CSS Flexible Box Layout
The layout for the flexbox:
Syntax:
The CSS rule for the flex container – the parent of the flex items:
.flex-container {
display: flex | inline-flex;
}
CSS properties used with the flex container:
Property | Initial value | |
---|---|---|
flex-direction | row | Use to set items on desirable axis and direction (normal or reversed). |
justify-content | flex-start | Use to align items on the main axis. |
align-items | stretch | Use to align items on the cross axis. |
flex-wrap | nowrap | Use to force items onto one line or to wrap onto multiple line. |
align-content | stretch | Use to set the distribiution of space between and around items along a flexbox’s corss axis. |
Examples for default values of CSS flexbox properties:
.flex-container {
display: -webkit-flex;
display:flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
}
Example 1
.flex-container-1 {
width:75%;
}
.flex-container-1 .flex-item {
width:200px;
height:100px;
margin:1em;
}
The size of flex items adapts to the size of their parent.
Example 2
The combined size of flex items is bigger than the size of their parent. The size of flex items shrinks accordingly to match their parent. In this example width of the every flex item is equal 93px.
.flex-container-2 {
width:500px;
}
.flex-container-2 .flex-item {
width:200px;
height:100px;
margin:1em;
}
The CSS properties used with flex items
Property | Initial value |
---|---|
order | 0 |
align-self | auto |
flex-basis | auto |
flex-grow | 0 |
flex-shrink | 1 |
The CSS properties used with the flex container:
flex-direction
Use to set items on desirable axis and direction (normal or reversed).
Values:
row | row-reverse | column | column-reverse
row
row-reverse
column
column-reverse
justify-content
Use to align items on the main axis (horizontally – if direction is set on row).
justify-content property is applied to the flex-items after margins and flex-grow values are calculated. If any flex-item has flex-grow property grater than 0 or has an auto margin on the main axis justify-content has no effect.
flex-start
(default)
flex-end
center
space-between
space-around
align-items
Use to align items on the cross axis (vertically – if direction is set on row).
stretch
(default)
flex-start
flex-end
center
baseline
flex-wrap
Use to force items onto one line or to wrap onto multiple line.
nowrap
(default)
wrap
wrap-reverse
align-content
Use to set the distribiuton of space between and around items along a flexbox’s corss axis.
stretch
(default)
flex-start
flex-end
center
space-between
space-around
The shorthand
The flex-flow
CSS property is a shorthand property for: flex-direction
and flex-wrap
flex-flow: flex-direction flex-wrap