Flexible Box Layout (Flexbox)
Flexbox is a
one-dimensional layout method for arranging items in rows or columns.
Items flex (expand) to fill additional space or shrink to fit into
smaller spaces. This article explains all the fundamentals
The Flexible
Box module, or just 'flexbox' for short, is a box model designed for user
interfaces, and it allows users to align and distribute space among items in a
container such that elements behave predictably when the page layout must
accommodate different, unknown screen sizes. A flex container expands items to
fill available space and shrinks them to prevent overflow.
Why flexbox?
For a long
time, the only reliable cross-browser compatible tools available for creating
CSS layouts were features like floats and positioning. These work, but in some ways,
they're also limiting and frustrating.
Based on MDN
web docs the following simple layout designs are either difficult or impossible
to achieve with such tools in any kind of convenient, flexible way:
·
Vertically
centering a block of content inside its parent.
·
Making
all the children of a container take up an equal amount of the available
width/height, regardless of how much width/height is available.
·
Making
all columns in a multiple-column layout adopt the same height even if they
contain a different amount of content.
Dynamic
Vertical and Horizontal Centering (align-items, justify-content)
Example
HTML
<div class="Align">
<div class="Align-item
Aligner-item-fixed">
<div class="Demo">
<h3> Centered </h3>
<p> Flex center </p>
</div>
</div>
</div>
CSS
.Align {
display: flex;
align-items: center;
justify-content: center;
background: skyblue;
height: 250px;
}
.Align-item {
background: white;
max-width: 100%;
}
Result
|
Property |
Value |
Description |
|
align-items |
center |
This centers the elements along the axis other than the one
specified by flex-direction, i.e., vertical centering for a horizontal
flexbox and horizontal centering for a vertical flexbox. |
|
justify-content |
center |
This centers the elements along the axis specified by
flex-direction. I.e., for a horizontal (flex-direction: row) flexbox, this
centers horizontally, and for a vertical flexbox (flex-direction: column)
flexbox, this centers vertically) |
The flex container becomes flexible when the display property is set to flex. The flex container properties include the following-
|
Property |
Value |
Description |
|
align-items |
stretch, center, start, end |
This property is used to align the items inside the flex
container along the y-axis. |
|
justify-content |
start, center, space-between; space-around; space-evenly; |
This property is used to align the flex items along the x-axis.
|
|
flex-direction |
row, row-reverse, column, column-reverse. |
It defines the direction in which the items will be aligned. |
|
flex-wrap |
wrap, no-wrap, wrap-reverse. |
This property defines whether items will be wrapped or not,
options. |
|
flex-flow |
row-reverse wrap, row wrap; row-reverse nowrap; column
wrap-reverse; column wrap; |
This property is a combination of flex-direction and flex-wrap properties. |
|
align-content |
start, center, space-between; space-around; |
This property is used to align the flex item lines. We will use
this property along with the flex-wrap property set to wrap to
demonstrate better- |
Individual
Property Examples
All of the
below styles are applied to this simple layout:
HTML
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
Example justify-content: center
on a vertical flexbox
CSS
div#container {
display: flex;
flex-direction: column;
justify-content: center;
}
/* for
better viewing */
body, Html {
margin: 0;
height: 100%;
box-sizing: border-box;
padding: 10px;
background-color: white;
}
div#container {
background-color: skyblue;
height: 100%;
width: 100%;
}
div#container > div {
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
}
Result:
where
#container is the flex-box.
Example:
justify-content: center on a horizontal flexbox
HTML
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
CSS
div#container {
display: flex;
flex-direction: row;
justify-content: center;
}
/* for
better viewing */
body, Html {
margin: 0;
height: 100%;
box-sizing: border-box;
padding: 10px;
background-color: skyblue;
}
div#container {
background-color: skyblue;
height: 100%;
width: 100%;
}
div#container > div {
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
}
Result:
Example: align-content: center on a horizontal
flexbox
HTML
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
CSS
div#container {
display: flex;
flex-direction: row;
align-items: center;
}
/* for
better viewing */
body, Html {
margin: 0;
height: 100%;
box-sizing: border-box;
padding: 10px;
background-color: skyblue;
}
div#container {
background-color: skyblue;
height: 100%;
width: 100%;
}
div#container > div {
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
}
Result
Leave a comment
No Cmomments yet