Introduction to CSS Flexbox
CSS flexible box module is one dimensional layout model.
- Flexible and efficient layouts.
- Distribute space among items.
- Control their alignment.
Before flexbox we had 4 layout modes
- Block: It is used to make sections in a webpages.
- Inline: It is used for text.
- Table: It is used for two dimensional data.
- Positioned: It is used for explicit position of an element.
Features of flexbox:
- A lot of flexibility is given.
- Arranged items.
- Proper spacing
- Alignment of items.
- Order of items.
- Bootstrap 4 is build on the top of the flex layout.
Terminologies: There are 2 main components –
- Flex Container
- Flex Items
Flex Container: The parent “div” which contains various divisions is called a flex container.
Flex Items: The items inside the container “div” are flex items.
<div class="container"> <!-- CONTAINER --> <div>Item1</div> <!--ITMES--> <div>Item2</div> <div>Item3</div> </div> |
chevron_right
filter_none
Flexbox Axes: While working with Flexbox, we deal with 2 axis –
- Main Axis
- Cross Axis
Main Axis:
- In default, main axis run from left to right.
- Main Start: Start of main axis is called Main Start.
- Main Size: The length between Main Start and Main End is called Main Size.
- Main End: The end point is called Main End.
- Main And Cross Axis
Cross Axis:
- In default, Cross Axis runs perpendicular to the Main Axis i.e. from top to bottom.
- Cross Start: Start of Cross axis is called Cross Start.
- Cross Size: The length between Cross Start and Cross End is called Cross Size.
- Cross End: The end point is called Cross End.
