Learnable Flexbox
Update Container properties
Property
flex-direction
flex-wrap
justify-content
align-items
align-content
Value
row
row-reverse
column
column-reverse
Details
It define the main-axis, according to direction item are placed in container.
row
(default): left to right in ltr; right to left in rtl
row-reverse
: right to left in ltr; left to right in rtl
column
: same as row but top to bottom
column-reverse
: same as row-reverse but bottom to top
Style applied on container
display: flex;
flex-direction: row;
1. Update Item properties
stretch
flex-start
flex-end
center
auto
baseline
2. Update Item properties
stretch
flex-start
flex-end
center
auto
baseline
3. Update Item properties
stretch
flex-start
flex-end
center
auto
baseline
Flex item details
Made with ♥️ in India