CSS: Flexbox Layout
What's Flexbox Layout
Flexbox Layout (Flexible Box Layout) is very useful, flexible, one-dimensional layout. It's very easy to align, distribute, and size items within a container.
display flex and inline-flex
To use flexbox, set the
Display Property
to
flex
or
inline-flex
on the parent element.
display: flex;-
Make the element's children to have the flexbox layout.
display: inline-flex;-
like
display: flexbut make the element itself inline.
Browser shows
1
2
3
Code
<div class="xflex7562"> <div class="item949">1</div> <div class="item949">2</div> <div class="item949">3</div> </div>
.xflex7562 { display: flex; margin: 1rem; border: dotted 3px red; } .item949 { border: solid 1px blue; padding: 20px; margin: 6px; }
Main Axis vs. Cross Axis
2 important concepts:
- Main axis: The direction items are laid out.
- Cross axis: Perpendicular to the main axis.