Flexbox & Grid

Flexbox

Flexbox Container

Flex Wrap

• If wrapped, the items can be moved into the next rows

Align Items

• Stretch will let the item height filled into container if it is a single row and height is not specified

Justify Content

Align Content

Align Content vs Align Items

• Align items focus on the items of a single row

• Align content focus on layout and distance of multiple rows

Flex Item

Flex Grow

• The ratio of width of item in a single row, but easy to be affected by width / flex-basis , here is an example below

Width / Flex-basis

• The minimum width of item

Flex

• The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

• flex: 1 1 200px => growth ratio 1, shrink ratio 1, minimum width/ height 200px

Align Self

• It is used override the align item of container

Grid

Grid Container

grid-template-columns

• To describe the ratio of column

// ratio of columns: 1 : 2 : 1
grid-template-columns: 1fr 2fr 1fr;
// all the ratio of columns are the same
grid-template-columns: auto auto auto;

justify-content

• Focus on the the postition of layout

Align content

• Same as justify-content, but with different axis

Align items

• focus on the position of grid item

Justify item

Grid Item

Grid Column & Grid Row

• To define where the item will start, and where the item will end.

// start on column 1 , end before column 5
grid-column: 1 / 5;

// start on row 1, end before row 5
grid-row: 1 / 5;

• If grid-row and grid-col is overlap, the element will be overrided

Grid Area

• It can be used assign a name , used to represent the layout