The Flex Box Module usually referred to as flexbox, was designed as an one-dimensional layout model. It make easier to design flexible responsive layout structure without using float or positioning.
Here is a demo to play around about CSS Flex Box Module: https://shafikshaon.github.io/css-flexbox/
The flex container properties are:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
The main axis defined by the flex-direction
property. It defines in which direction the container want to stack the
flex items.
The flex-direction
has four possible values:
- row
- row-reverse
- column
- column-reverse
row: The row value stacks the flex item horizontally but from left to right.
row-reverse: The row value stacks the flex item horizontally but from right to left.
column: The column value stacks the flex item vertically but from top to bottom.
column-reverse: The column value stacks the flex item vertically but from bottom to top.
flex-wrap
Flex box is one dimensional model. So, it is possible to cause our flex items wrap into multiple lines. We should consider each line as new flex container.
flex-wrap
property specifies whether items should wrap or not.
Wrap means cover or enclose (someone or something) in paper or soft material.
wrap: The wrap
value specifies that the flex items will wrap if necessary.
nowrap: The wrap
value specifies that the flex items will not wrap.
wrap-reverse: The wrap
value specifies that the flex items will wrap if necessary but in reverse order.
flex-flow
flex-flow
is shortland for both the flex-direction
and flex-wrap
properties
for example
.class {
flex-flow: row wrap;
}
justify-content
The justify-content
property is used to align the items on the main axis where direction determine by flex-direction
.
flex-start: flex-start
value align flex items at the start of the container.
flex-end: flex-end
value align flex items at the end of the container.
center: center
value align flex items at the center of the container.
space-around: space-around
value align flex items with space before, between and after the lines. It causes equal
amount of space on the right and left of each item.
space-between: space-between
value align flex items with space between the lines.
space-evenly: space-evenly
value align flex items with full-size space on either end.
align-items
The align-items
property used for align flex items vertically.
stretch: stretch
value stretch the flex items to fill the container. This is why flex items stretch to the height
of the tallest one by default.
baseline: baseline
value align the flex items by their flex container baselines.
center: center
value align the flex items to center of the container.
flex-start: flex-start
value align the flex items to top of the container.
flex-end: flex-end
value align the flex items to bottom of the container.
align-content
The align-content
property used for align flex lines. To demonstrate the align-content
property set flex-wrap
property set to wrap
.
stretch: stretch
value stretches the flex lines to take up the remaining space.
center: center
value show the flex lines in the center of the container.
flex-start: flex-start
value show the flex lines in the start of the container.
flex-end: flex-end
value show the flex lines in the end of the container.
space-around: space-around
value show flex lines with space before, between and after the lines. It causes equal
amount of space on the right and left of each lines.
space-between: space-between
value align flex lines with equal space between the lines.
Now we know about flex item properties:
order: order
property specify the order of the flex items. The order value must be a number, default value is 0
.
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
flex-grow: flex-grow
property specifies how much flex item glow (increasing in size) relative to other flex items.
The value must be a number, default value is 0
.
The flex-grow property can be used to distribute space in proportion.
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
flex-shrink: flex-shrink
property specifies how much a flex item will shrink relative to other flex items. The
value must be a number, default value is 1
.
Do not let the second flex item shrink as much as the other flex items:
<div class="flex-container">
<div>1</div>
<div style="flex-shrink: 0">2</div>
<div>3</div>
</div>
flex-basis: flex-basis
values specifies the size of item in terms of space it leaves as available space.
Set the initial length of the second flex item to 20 pixels:
<div class="flex-container">
<div>1</div>
<div style="flex-basis: 20px">2</div>
<div>3</div>
</div>
flex: flex
property is a shorthand property for the flex-grow
, flex-shrink
, and flex-basis
properties.
Make the first flex item growable (1), shrinkable (1), and with an initial length of 20 pixels:
<div class="flex-container">
<div style="flex: 1 1 20px">1</div>
<div>2</div>
</div>
align-self: align-self
property specifies the alignment for selected item inside flex container.
Align the third flex item in the middle of the container:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
Here is a demo to play around about CSS Flex Box Module: https://shafikshaon.github.io/css-flexbox/