![](./assets/flex/img-1.png)
display
.flex-container {
display: flex;
}
flex-wrap
![](./assets/flex/flex-wrap.png)
.flex-container {
flex-wrap: wrap / no-wrap / wrap-reverse;
}
justify-content
![](./assets/flex/justify-content.png)
.flex-container {
justify-content: flex-start / center / flex-end / space-around / space-between / space-evenly;
}
align-content
![](./assets/flex/align-content.png)
NOTE: This property only takes effect when the flex-wrap attribute is set to 'wrap' or 'wrap-reverse'.
.flex-container {
flex-wrap: wrap;
align-content: flex-start / center / flex-end / stretch / space-between / space-around;
}
CSS Flexible Box Layout, commonly known as Flexbox, is a CSS3 web layout model. It is in the W3C's candidate recommendation (CR) stage. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size (or device).
- Source: Wikipedia
flex-direction
![](./assets/flex/row-direction.png)
.flex-container {
flex-direction: row / row-reverse / column / column-reverse;
}
flex-grow & flex-shrink
![](./assets/flex/flex-grow-shrink.png)
flex-grow
#flex-item-3 {
flex-grow: 4; /* default value = 0 */
}
flex-shrink
#flex-item-3 {
flex-shrink: 4; /* default value = 1 */
}
align-items
![](./assets/flex/align-items.png)
.flex-container {
align-items: flex-start / flex-end / center / stretch / baseline;
}
align-self
![](./assets/flex/align-self.png)
#flex-item-3 {
align-self: center;
}