One of the greatest powers a flex container has is the ability to control the alignment of its child containers. You can specify the horizontal and the vertical alignments with two different properties that are explored below.
When flex children have different height you can specify the vertical alignment with the
flex-startaligns to top.
flex-endaligns to bottom.
stretchmakes the height of the child containers equal to the highest of the them. Child containers with the specified
heightproperty won’t stretch. It’s the default value.
justify-content property allows you to align child containers horizontally:
flex-startaligns to the left. It’s the default value.
flex-endaligns to the right.
There are three more values that distribute the horizontal space evenly:
space-betweendistributes the space evenly between the containers.
space-arounddistributes the space evenly around the containers.
space-evenlydistributes the space evenly between the containers and the edges of the parent container.
The specs above are true for flex parent container with the default direction, which is
row. When you change the direction to
column, all the properties of the flex container rotate 90 degrees clockwise:
align-itemsswitches to vertical alignment. For example,
align-items: flex-startaligns children to the left, and
align-items: flex-endaligns them to the right.
justify-contentswitches to horizontal alignment. For example,
justify-content: flex-startaligns children to the top, and
justify-content: flex-endaligns them to the bottom.
This can be confusing at first, and in reality it’s easy to mix up the alignments even after years of practice. The good news is, since there are only two alignment properties, if one of them did not work properly, you just need to switch to another one 🤷♂️.
A centered container that doesn’t expand beyond a fixed width is a very popular layout in responsive design. Open this prototype and try resizing the window. You should notice that on larger screens the white container has the fixed width, and on smaller screens it adjusts to the width of the viewport. Let’s create this layout step-by-step:
- Create a new pen. In CSS, apply
margin: 0to the
- In HTML, create a parent flex container with light-gray background.
- Make it full-screen using
- Center the content horizontally using
- Create a child container with white background, and subtle borders on the sides.
- As described in the max-width section of the Box model article, you can prevent the container from expanding beyond a particular size by applying
max-width: 560px. Do it and try resizing the Preview now: you should see a centered container that takes the full screen width on smaller screens, and has a fixed width on larger screens.
There’s a number of ways to center containers horizontally, but using a flex parent with the
justify-content: center property is particularly useful for prototyping. If you decide that you want a sidebar next to the main area, you will only need to add another child container and they will be both centered:
Design a tab bar:
- Create a new pen. In CSS, apply
margin: 0and a light-gray background to the
- In HTML, create a flex parent container with a white background and a gray bottom border.
- Create three child containers. Apply a text color and a colored bottom border to one of them to indicate the selected state.
- Add the
justify-contentproperty to the parent container and try different options of space distribution to find the one that works best for you.