CSS Flexbox
This lesson is part of the Web Programming 1 Course.
By setting the display property to flex for an element, its immediate children will become 'flex items' (AKA 'flex children').
By default, the children will then occupy only as much width as they need and they will align themselves horizontally (like inline elements). But, unlike inline elements, they will stretch out vertically to fill the height of their parent.
The justify-content property controls the arrangement of the flex-items on the main axis (the main axis is the horizontal one by default - we'll see in a bit how you can change this in a bit). Here are just some of the values that you can set the justify-content property to:
- space-around puts even spacing around the children
- space-between puts even spacing between the children
- space-evenly distributes space evenly between the children
- center will centers children on the main axis
The align-items property controls the arrangement of the flex-children on the cross axis (the cross axis is the vertical one by default). Here are some of the values you can set the align-items property to:
- start aligns the children to the top of the container
- center aligns the children to the center of the container
- end aligns the children to the bottom of the container
- stretch is the default, which makes the flex-children stretch out to match the height of the flex container
Setting the flex property on the flex children allows you control ratio of the available space that a child will occupy. In the video, we set the flex property to 1 for DIV 1 and DIV 3. But we set it to 2 for the middle DIV, which resulted in the middle one being twice as wide as the others.
If you want to align the text inside an element, you can set that element's display property to flex and then use the justify-content and align-items properties to do so.
If you set the flex-direction property of the container to column then the children will align vertically (in a column), and main axis and cross axis will be rotated.