CSS Flexbox in pictures
11 December, 2022
3
3
0
Contributors
Flexbox is a layout module in CSS that allows for the creation of flexible and responsive layouts.
Flexbox layout provides a efficient way to distribute and align items in a container. Other than the flexbox layout model there are four other model for layouts.
•
Block - For sections
•
Inline - For texts
•
Table - For two dimension table
•
Positioned - For explicit positions of elements
Flexbox Model
FLexbox model have two main elements.
•
Flex Container
•
Flex Items
Flexbox Model
Flexbox Properties
Flex Container Properties
1.
Display
Container enable to flexible using the display property.
2.
Flex Direction
Define the direction of the flex items are arranged in the flex container. Flex direction has four property values.
•
row
•
row-reverse
•
column
•
column-reverse
3.
Flex Wrap
Flex wrap used to define the way items fit on to lines. It has four property values.
•
wrap
•
nowrap
•
wrap-reverse
5.
Justify Content
Defines the alignment of items in the main axis.
•
center
•
flex-start
•
flex-end
•
space-between
•
space-around
•
space-evenly
6.
Align Items
Defines the alignment of items in the cross axis.
•
stretch
•
flex-start
•
flex-end
•
center
•
baseline
Flex Item Properties
1.
Order
Define the order of the items
2.
Flex grow
Define ability of item to grow. In following image shows child has a value 2 take twice of the image and other items get equally one.
css
responsive
flexbox
develevate