CSS Flex Automatic Line Wrap

1. What is CSS Flex?

2. Flex Containers and Flex Items

Before using CSS Flex to implement automatic line wrapping, let’s first understand the concepts of flex containers and flex items.

• Flex container (Flex Container): An element with display: flex or display: inline-flex set is called a flex container. A flex container creates a flex layout context, within which child elements are laid out.

  <div class="container">
  ...
  </div>
  

  .container {
  display: flex; /* or display: inline-flex */
  }
  

• Flex Item: Each direct child element of a flex container is called a flex item. Child elements are laid out relative to the parent container.

  <div class="container">
  <div class="item">Child 1</div>
  <div class="item">Child 2</div>
  ...
  </div>
  

  .container {
  display: flex;
  }
  .item {
  ...
  }
  

3. Implementing Flex Automatic Line Wrapping

Flex automatic line wrapping requires the flex-wrap property. The flex-wrap property defines whether and how child elements within a flex container wrap.

• flex-wrap: nowrap;: The default value. Child elements do not wrap and are displayed on a single line as much as possible.
• flex-wrap: wrap;: Child elements automatically wrap and move downward to a new line.
• flex-wrap: wrap-reverse;: Child elements automatically wrap and move upward to a new line.

In the example code, we create a flex container and set flex-wrap: wrap; to allow child elements to wrap automatically.

<div class="container"> 
<div class="item">Sub-element 1</div> 
<div class="item">Sub-element 2</div> 
<div class="item">Sub-element 3</div> 
... 
</div> 

.container { 
display: flex; 
flex-wrap: wrap; 
} 
.item { 
... 
} 

4. Setting Sub-element Widths

When using Flex for automatic line wrapping, you need to set the width of the sub-element; otherwise, the sub-element will occupy the entire available space by default. You can set a specific width for the sub-element as needed, or use the flex-basis property to set a base width for the sub-element.

• flex-basis: auto;: The default value. The base width of the child element automatically adjusts based on the content.
• flex-basis: <length> | <percentage>;: You can set a specific width value, such as pixels or percentages.

In the example code, we set the base width of the child element to 200px.

.item {
flex-basis: 200px;
} 

5. Automatically Wrapping Child Elements

By setting the flex-wrap: wrap; property of the Flex container and the width of the child element, you can achieve automatic wrapping of the child element. When the total width occupied by child elements exceeds the width of the parent container, the child elements will automatically wrap to new lines.

The following is a sample code showing the effect of Flex automatic line wrapping:

<div class="container"> 
<div class="item">Sub-element 1</div>
<div class="item">Sub-element 2</div>
<div class="item">Sub-element 3</div>
<div class="item">Sub-element 4</div>
<div class="item">Sub-element 5</div>
<div class="item">Sub-element 6</div>
<div class="item">Sub-element 7</div>
<div class="item">Sub-element 8</div>
</div>

.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: 200px; /* Sets the base width of the sub-element to 200px */
height: 100px; /* Sets the height of the sub-element to 100px */
background-color: #f1f1f1; /* Set the background color of the child element */
margin: 10px; /* Set 10px spacing between child elements */
text-align: center; /* Set the horizontal center of the child element's text */
line-height: 100px; /* Set the vertical center of the child element's text */
}

In the above example code, the child element’s width is set to 200px. When the container width is not enough to accommodate all the child elements, the child elements will automatically wrap and move down to the new line.

6. Flex Wrap and Child Element Height

With Flex wrapping, the height of the child element will automatically adjust based on the content. You can also adjust the height of the child element by setting the flex-grow property.

• flex-grow: <number>;: Specifies that if there is any remaining space, the remaining space will be allocated proportionally to the child elements. The default value is 0, which means no remaining space is allocated.
  • When all child elements have flex-grow set to 1, the remaining space will be allocated proportionally to each child element.
  • When a child element has flex-grow set to 1 and the other child elements have flex-grow set to 0, the child element will take up all the remaining space.

The following is a sample code that shows how Flex wraps text while adapting the height of child elements to their content. The flex-grow property is also used to adjust the height of child elements:

<div class="container"> 
<div class="item">child element 1</div> 
<div class="item">child element 2</div> 
<div class="item">child element 3</div> 
... 
</div> 

.container { 
display: flex; 
flex-wrap: wrap; 
} 
.item { 
flex-basis: 200px; 
flex-grow: 1; /* Set the child element's flex-grow to 1, distributing its height proportionally to the remaining space. */
height: auto; /* Set the child element's height to adapt to the content. */
background-color: #f1f1f1;
margin: 10px;
text-align: center;
line-height: 100px;
}

7. Summary

Using the CSS Flex flex-wrap property and setting the child element’s width, we can easily achieve an automatic line-wrapping layout.