CSS - Flexbox

Today’s notes is for the Section 7, Lecture 67-71 of this udemy course.

Flexbox Introduction

Main Properties

Container properties

1. flex-direction defines the axis on which the items should be aligned.
2. flex-wrap defines how the container should align the items when the size of the items overflow the container.
3. justify-content defines how the items should be aligned on the main axis.
4. align-items defines how the items should be aligned on the cross axis.
5. align-content defines how the lines should be aligned on the cross axis, when there are multiple lines on the cross axis.

Item properties

1. align-self defines where to align the item itself based on the container.
2. order defines the order of the item among all the sibilines.
3. flex-grow defines the ratio of the space the item can take when there is extra space in the container.
4. flex-shrink defines the ratio of the space the item can shrink when there’s not enough space in the container.
5. flex-basis defines the initial size of the item before the available space being distributed.