Flexible images and layouts

Flexible images

Relative sizes are also used to make images and other media flexible. In the following example, the width of an image is set to 50% of the viewport's width, leading to the image scaling up and down as the width of the viewport changes.

#image {
  width: 50vw;
}

Furthermore, when considering the format of the image, one would ideally use vector graphics whenever possible to ensure that the image scales up and down without losing quality. Note that vector graphics are not always the best choice as, for example, a vector graphic of a picture would either take very large amounts of space or it would not be able to capture the details of the image. For pictures, it is better to use a raster image, such as a JPEG or PNG.

Flexible layouts

Flexible layouts are used to define layouts that adjust based on the screen size. Controlling the order and flow of elements are used primarily using three approaches: float, flexbox and grid.

Floats

The CSS float property is used to define how an element should be positioned on a page. It can be used to make an element float on the side, allowing the content on the page to wrap around it. The following example demonstrates the use of the float property to make an element float to the left.

#box {
  float: left;
  margin-right: 1em;
  width: 10em;
  height: 6em;
  border-radius: 0.33em;
  background-color: rgb(207, 232, 220);
  padding: 1em;
  background-color: blue;
}

As a part of a page, the above styling would look as follows.

Flexbox

Flexbox is used to define how children of an element should be positioned. Flexbox is taken into use through the display style flex, and by defining the styles for the child elements.

The following style defines a container that has its children positioned in a row, and that wraps the children to the next row if there is not enough space for them in the current row. The children are given a width of 200 pixels, and the children are given a margin of 1 em on all sides. The children are also given a border radius of 0.33 em, and a background color of rgb(207, 232, 220).

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#article {
  flex: 1 1 200px;
  margin: 1em;
  padding: 1em;
  border-radius: 0.33em;
  background-color: rgb(207, 232, 220);
}

In a page that has two children in the container, the above styling would look as follows.

Note that when you adjust the width of the screen, you'll notice that the children of the container are repositioned to fit the width of the screen. This is because the children are given a width of 200 pixels, and the container is set to wrap the children to the next row if there is not enough space for them in the current row.

Grids

Grids are used to create grids of elements. They are used by setting the display value grid to a container, and potentially also outlining the number of rows and columns that the grid should have. The following example demonstrates the use of a grid to create a three-column layout, where the leftmost column would have a width of 150 pixels, the middle column would have the width of 250 pixels, and the rightmost column would have the width of 200 pixels. Items in the grid have a margin of 1 em on all sides, a border radius of 0.33 em, and a background color of rgb(207, 232, 220).

#container {
  display: grid;
  grid-template-columns: 150px 250px 200px;
}

.item {
  margin: 1em;
  padding: 1em;
  border-radius: 0.33em;
  background-color: rgb(207, 232, 220);
}

A page with the above styling with three items in the grid would look as follows.

Note that as you resize the screen, the above layout will not change. This is because the grid is defined to have three columns, and the width of the columns is fixed. Responsive grids are defined with the fr unit, which refers to a fractional unit. One fr, i.e. 1fr, refers t one part of the available space. The following example demonstrates the use of the fr unit to define the width of the columns. The leftmost column would have a width of 2 times the width of the middle column, and the rightmost column would have a width of 1 times the width of the middle column. The items in the grid have a margin of 1 em on all sides, a border radius of 0.33 em, and a background color of rgb(207, 232, 220).

#container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

.item {
  margin: 1em;
  padding: 1em;
  border-radius: 0.33em;
  background-color: rgb(207, 232, 220);
}

The previously seen page would look as follows with the above styles.