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