» CS 347: Lab 6 – Flexbox Expansion

CS 347: Lab 6 – Flexbox Expansion

September 15, 2020 by Chris Johnson. Filed under fall-2020, labs, webdev.

Welcome to lab. By now you have already watched the lecture videos on your own. Now we will apply the ideas from those videos in a handful of exercises, which you will complete in small groups.

Within your breakout room, designate one of your team to be the screen sharer. Screen sharer, share your screen and claim your group’s task on Crowdsource. Make sure to enter every group member’s JMU eID so that they receive credit. Your group will be assigned a task number.

Team, complete the assigned task below. Screen sharer, be careful not to dominate. All members should contribute ideas.

Task

Recreate the following page using an internal stylesheet:

A mosaic of differently-sized boxes is called masonry. In general, the boxes in masonry have different widths and heights. Here the widths of the photos differ, but the heights are all the same, yielding horizontal line masonry. Follow these guidelines in your solution:

Retrieve 20+ images from Lorem Picsum using URLs of the form https://picsum.photos/WIDTH/200. For each image, replace WIDTH with a unique random number in the interval [100, 400].
Use several Flexbox layouts. No other layout system or tricks are needed.
The photo masonry is built out of a flex-parent with row orientation and wrapping. The children expand to fill any leftover space.
The left panel has a fixed width but always vertically fills the viewport.
The right panel scrolls. Use overflow-y: auto on this container to keep the content from making body scroll.

Screen sharer, when your group is done or when time is up, submit your group’s solution on Crowdsource.

Reference Implementation

masonry.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Masonry</title>
  <link rel="stylesheet" href="masonry.css">
  <script defer src="masonry.js"></script>
</head>
<body>

  <div id="left">
    <div>&#x1F4F7;</div>
    <div>&#x1F5C4;</div>
    <div>&#x2764;&#xfe0f;</div>
    <div>&#x1F5D1;</div>
  </div>

  <div id="right">
    <img src="https://picsum.photos/300/200">
    <img src="https://picsum.photos/200/200">
    <img src="https://picsum.photos/250/200">
    <img src="https://picsum.photos/175/200">
    <img src="https://picsum.photos/100/200">
    <img src="https://picsum.photos/230/200">
    <img src="https://picsum.photos/190/200">
    <img src="https://picsum.photos/400/200">
    <img src="https://picsum.photos/103/200">
    <img src="https://picsum.photos/345/200">
    <img src="https://picsum.photos/214/200">
    <img src="https://picsum.photos/132/200">
    <img src="https://picsum.photos/256/200">
    <img src="https://picsum.photos/311/200">
    <img src="https://picsum.photos/209/200">
    <img src="https://picsum.photos/268/200">
    <img src="https://picsum.photos/288/200">
    <img src="https://picsum.photos/182/200">
    <img src="https://picsum.photos/203/200">
    <img src="https://picsum.photos/385/200">
    <img src="https://picsum.photos/402/200">
    <img src="https://picsum.photos/216/200">
    <img src="https://picsum.photos/349/200">
    <img src="https://picsum.photos/97/200">

    <img src="https://picsum.photos/387/200">
    <img src="https://picsum.photos/207/200">
    <img src="https://picsum.photos/133/200">
    <img src="https://picsum.photos/178/200">
    <img src="https://picsum.photos/222/200">
    <img src="https://picsum.photos/271/200">
    <img src="https://picsum.photos/298/200">
    <img src="https://picsum.photos/109/200">
    <img src="https://picsum.photos/249/200">
    <img src="https://picsum.photos/118/200">
    <img src="https://picsum.photos/92/200">
    <img src="https://picsum.photos/184/200">
  </div>
  
</body>
</html>

masonry.css

body {
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100vh;
}

#left {
  font-size: 4em;
  flex-grow: 0;
  flex-basis: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: darkorange;
}

#left > div:nth-child(3) {
  flex-grow: 1;
}

#right {
  flex-basis: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: scroll;
}

#right > img {
  flex-grow: 1;
  object-fit: cover;
  margin: 0 5px 5px 0;
}