- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- Flexbox playground
Flexbox (or Flexible boxe) is a new layout mode in CSS3, intended to accommodate different screen sizes and different display devices.
The flexible box model does not use floats, nor do the flex container's margins collapse with the margins of its contents.
Flexbox gives us complete control over the alignment, direction, order, and size of our boxes.
- This tutorial presents examples and css3 properties for the Flex container.
Creating a flexbox container
Flexbox consists of flex containers and flex items.To define a flex container, set the display property of an element to flex (rendered as a block) or inline-flex (rendered as inline).
Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.
<style>
.container {
display: ; /* or: inline-flex */
margin:2px;
padding:3px;
}
.container .item {
background:#ccccfe;
margin:2px;
}
</style>
- Content Before..
<div class='container'>
Parent content.
<div class='item'>Child 1</div>
<div class='item'>Child_2</div>
<div class='item'>Child-3</div>
</div>
- Content After..
Result:
- Content Before..
Parent content.
- Content After..
Flex item #1
Child 2
Flexbox child 3
Flexbox container properties
flex-direction
The flex-direction property specifies the direction of the flexible items inside the flex container. They can be laid out in two main directions, like rows horizontally or like columns vertically.-
flex-direction values:
- row - (default) the flex items are stacked in a row from left-to-right (in ltr context).
- row-reverse - the flex items are stacked in a row from right-to-left (in ltr context).
- column - the flex items are stacked in a column from top-to-bottom.
- column-reverse - the flex items are stacked in a column from bottom-to-top.
Example with inline-flex and column:
.container {
display: inline-flex;
flex-direction: column;
}
flex-wrap
By default, the flex container sets its items in one single line.The flex-wrap property controls if the flex container lay out its items in single or multiple lines, and the direction the new lines are stacked in.
-
flex-wrap values:
- nowrap - (default) all flex items will be on one line.
- wrap - flex items will wrap onto multiple lines, from top to bottom.
- wrap-reverse - flex items will wrap onto multiple lines from bottom to top.
.container {
display: flex;
flex-wrap: wrap;
}
flex-flow
flex-wrap is a shorthand for setting theflex-direction and flex-wrap properties, which together define the flex container's main and cross axes. Default is row nowrap-
flex-flow syntax:
flex-flow: flex-direction flex-wrap;
.container {
display: flex;
flex-flow: row wrap;
}
justify-content
justify-content horizontally aligns the flexible container's items when the items do not use all available space on the main-axis. It helps distribute left free space when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.-
justify-content values:
- flex-start - (default) items are positioned at the beginning of the container.
- flex-end - Items are positioned at the end of the container.
- center - Items are positioned at the center of the container.
- space-between - Items are displayed with equal spacing between them, first and last flex items are aligned to the edges of the flex container.
- space-around - Items are displayed with equal spacing around every flex item, even the first and last flex items.
- space-evenly - Items are distributed so that the spacing between any two items (and the space to the edges) is equal.
.container {
display: flex;
justify-content: space-around;
}
align-items
align-items vertically aligns the flexible container's items when the items do not use all available space on the cross-axis. It is similar tojustify-content but in the perpendicular direction.-
align-items values:
- stretch - (default) stretch to fill the container (still respect min-width/max-width).
- flex-start - Items are positioned at the top of the container.
- flex-end - Items are positioned at the bottom of the container.
- center - Items centered in the vertical axis.
- baseline - Flex items are aligned in a way that their baselines are aligned.
.container {
display: flex;
align-items: center;
}
align-content
align-content aligns a flex container's lines within when there is extra space in the vertical-axis, similar to howjustify-content aligns individual items within the horizontal-axis.
This property has no effect when there is only one line of flex items.
- align-content values:
- stretch - (default) Lines stretch to take up the remaining space.
- flex-start - Lines packed to the start of the container.
- flex-end - Lines packed to the end of the container.
- center - Lines are packed to the center of the flex container.
- space-between - Lines evenly distributed; the first line is at the start of the container while the last one is at the end.
- space-around - Lines evenly distributed with equal space around each line.
.container {
display: flex;
align-content: space-around;
}
Flexbox playground
Here's a flex playground where you can combine and play with several css flex properties.
.container {
display: ;
flex-direction: ;
flex-wrap: ;
justify-content: ;
align-items: ;
align-content: ;
margin:2px;
padding:3px;
height: ;
width: ;
}
.container .item {
background:#ccccfe;
height:50px;
margin:2px;
}
Demo:
- Content Before..
Parent content.
- Content After..
Flex item #1
Child 2
Flexbox child 3