CSS Flex Properties
CSS Flex Properties
In web development, Flex layout is a powerful layout method that can help us more easily achieve various complex layout effects. Flex layout uses a series of CSS properties to control the arrangement of elements within a container, making page layouts more flexible and responsive. This article will detail the commonly used properties in Flex layout and their usage.
display
The display
property defines the type of box an element should generate. In Flex layout, we typically set the container element’s display
property to flex
to enable Flex layout.
.container {
display: flex;
}
flex-direction
flex-direction
property specifies the direction of the main axis of a flex container. The main axis is the primary direction of the flex container, along which flex items are laid out.
.container {
display: flex;
flex-direction: row; /* horizontal direction */
}
.container {
display: flex;
flex-direction: column; /* vertical direction */
}
flex-wrap
flex-wrap
property controls whether flex items wrap within a row or column.
.container {
display: flex;
flex-wrap: nowrap; /* No line break */
}
.container {
display: flex;
flex-wrap: wrap; /* Wrap line */
}
flex-flow
flex-flow
property is a shorthand for the flex-direction
and flex-wrap
properties, allowing you to set both properties simultaneously.
.container {
display: flex;
flex-flow: row nowrap; /* Horizontal, no line break */
}
justify-content
The
justify-content
property controls the alignment of flex items on the main axis.
.container {
display: flex;
justify-content: flex-start; /* Left alignment */
}
.container {
display: flex;
justify-content: center; /* Center alignment */
}
.container {
display: flex;
justify-content: flex-end; /* Right alignment */
}
align-items
align-items
property controls the alignment of flex items on the cross axis.
.container {
display: flex;
align-items: flex-start; /* Top alignment */
}
.container {
display: flex;
align-items: center; /* Center alignment */
}
.container {
display: flex;
align-items: flex-end; /* Bottom alignment */
}
align-content
align-content
property is used to control the alignment of multiple axes and is only effective when multiple axes are used.
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start; /* top alignment */
}
.container {
display: flex;
flex-wrap: wrap;
align-content: center; /* Center alignment */
}
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-end; /* Bottom alignment */
}
flex-grow
flex-grow
property is used to control the scale of flex items. When there is excess space in the container, the flex items will distribute the remaining space according to the scale.
.item {
flex-grow: 1; /* Default value is 0, no enlargement */
}
.item {
flex-grow: 2; /* Enlargement ratio is 2 */
}
flex-shrink
The
flex-shrink
property controls the shrinkage ratio of a flex item. When the container space is insufficient, the flex item shrinks according to the shrinkage ratio.
.item {
flex-shrink: 1; /* Default value is 1, shrinkable */
}
.item {
flex-shrink: 0; /* No shrinkage */
}
flex-basis
The
flex-basis
property specifies the initial size of a flex item along the main axis.
.item {
flex-basis: 100px; /* Initial size is 100px */
}
.item {
flex-basis: 50%; /* Initial size is 50% */
}
flex
flex
property is a shorthand form for flex-grow
, flex-shrink
, and flex-basis
properties, allowing you to set all three properties simultaneously.
.item {
flex: 1 1 100px; /* Zoom in/out ratio is 1, zoom out ratio is 1, initial size is 100px */
}
.item {
flex: 2 0 50%; /* Zoom in/out ratio is 2, no zooming, initial size is 50% */
}
order
The
order
property controls the order of flex items. Smaller values appear first.
.item {
order: 1; /* Sort order is 1 */
}
.item {
order: -1; /* Sort order is -1 */
}
Example Code
Example 1: Basic Flex Container Settings
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background-color: #f0f0f0;
margin: 10px;
}
Example 2: Flex containers arranged horizontally
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex; justify-content: space-around;
}
.item {
width: 100px;
height: 100px;
background-color: #f0f0f0;
}
Example 3: Vertically arranged Flex containers
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.item {
width: 100px; height: 100px;
background-color: #f0f0f0;
}
Example 4: Flex project zooming in and out
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
}
.item {
flex: 1 1 100px;
background-color: #f0f0f0;
margin: 10px;
}
Example 5: Flex project sorting order
<div class="container">
<div class="item" style="order: 3;">Item 1</div>
<div class="item" style="order: 1;">Item 2</div>
<div class="item" style="order: 2;">Item 3</div>
</div>
.container {
display: flex;
}
.item {
width: 100px;
height: 100px;
background-color: #f0f0f0;
margin: 10px;
}
Example 6: Flex container line wrapping
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 100px;
height: 100px;
background-color: #f0f0f0;
margin: 10px;
}
Example 7: Flex project horizontally centered
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
justify-content: center;
}
.item {
width: 100px;
height: 100px;
background-color: #f0f0f0;
margin: 10px;
}
Example 8: Flex project vertically centered
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background-color: #f0f0f0;
margin: 10px;
}
Example 9: Horizontally and vertically centering Flex items
<div class="container">
<div class="item">Item 1</div>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
width: 100px;
height: 100px;
background-color: #f0f0f0;
}
Example 10: Automatically scale Flex items
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
}
.item {
flex: 1;
background-color: #f0f0f0;
margin: 10px;
}
The above is about