Lesson 07 Flexbox Layout

Mark Harder, 02 November 2018

Modern Web Application Development

Flexbox Layout

Let’s learn how to use Flexbox for layout.

Flexbox is a new module that makes it easy to align elements to one another, in different directions and orders.

The idea behind flexbox is to give the container the ability to expand and to shrink elements to best use all available space.

Flexbox is used to build one-dimensional layouts.


Sample code can be found at https://github.com/mhintegrity/lesson07


Flexbox Module

Properties for the Parent (flex container)

CSS Property: default value; Value list Notes
display: flex; defines a flex container for all its direct children
flex-direction: row; row row-reverse column column-reverse defines the main-axis, direction
flex-wrap: nowrap; nowrap wrap wrap-reverse by default, flex items try to fit on one line
justify-content: flex-start flex-end center space-between space-around space-evenly align main axis
align-items: stretch flex-start flex-end center baseline align cross axis
align-content: flex-start flex-end center space-between space-around Only applies when there is more then one row of flex items. Cross axis if extra space

The two axes of flexbox

Main Axis The main axis is defined by flex-direction property which has 4 possible values.

  • row
  • row-reverse
  • column
  • column-reverse

Should you choose row or row-reserve, your main axis will run along the row in the horizontal direction. main axis

Choose column or column-reverse and your main axis will run from the top of the page to the bottom - in the block direction. cross axis

Cross Axis The cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns. cross axis row

If your main axis is column or column-reverse then the cross axis runs along the rows. cross axis column

Multi-line flex containers with flex-wrap

While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.

flex-wrap: wrap; Now, should your items be too large to all display in one line, they will wrap onto another line. flex-wrap: nowrap; Which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.

Start and end lines

If the flex-direction is row, then the start end of the main axis will be on the left, and the end edge on the right. flex-row-start


Properties for the Children (flex items)

CSS Property: default value; Value list Notes
align-self: auto; auto stretch flex-start flex-end center baseline align-items for one item
order: 0 <integer> default, flex items are laid out in the source order
flex-grow: 0 <integer> defines the ability for a flex item to grow if necessary
flex-shrink: 1 <integer> defines the ability for a flex item to shrink if necessary
flex-basis: auto <integer> defines the default size of an element before the remaining space is distributed
flex: flex-grow flex-shrink flex-basis shorthand for flex-grow, flex-shrink and flex-basis combined

Properties applied to flex items

To have more control over flex items we can target them directly. We do this by way of three properties.

  • flex-grow
  • flex-shrink
  • flex-basis

The flex-grow property

With the flex-grow property set to a positive integer, flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

If we gave all of our items in the example above a flex-grow value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.

The flex-shrink property

Where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. As with flex-grow different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values.

Alignment, justification and distribution of free space between items

A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.

align-items

The align-items property will align the items on the cross axis.

  • stretch: The initial default value, which will stretch to the height of the tallest item. Stretching to fill the flex container.
  • flex-start: Makes the items line up at the start of the flex container.
  • flex-end: Makes the items line up at the end of the flex container.
  • center: Makes the items line up at the end of the flex container.

justify-content

The justify-content property is used to align the items on the main axis, the direction in which flex-direction has set the flow.

  • flex-start: The initial default value, which will line the items up at the start edge of the container.
  • flex-end: Line the items up at the end.
  • flex-center: Line the items up to group in the center.
  • space-between: This takes up all the space space after the items have been laid out, and shares it out evenly between each item.
  • space-around: Causes a half sized space on either end.
  • space-evenly: Causes the space to be shared equally around each item.

We want to bring what we have learned about flexbox transition and images together in a better image gallery.

The code for this section can be found on another branch at github called responsive-image-gallery. Please download the code and try it out on your machine. https://github.com/mhintegrity/lesson07/tree/responsive-image-gallery



Assignment due for discussion next class and checked into GitHub by the Monday after that.

  • create a new repo called lesson07
  • Create your own website using the responsive image gallery.
  • Use your own images and content inside the container items.