How to Left-Align the Last Row in a Flexbox Layout?

Aligning the Last Row Left in Flexbox

Flexbox is a powerful layout tool that allows for versatile content arrangement. However, when dealing with multiple line flexboxes, maintaining alignment can be challenging. This article addresses the issue of left-aligning the last row/line in flexbox, ensuring a consistent grid-like layout.

The issue arises when the last row does not contain the same number of elements as other rows, causing centering and breaking the grid effect. To address this, a solution using strategically placed empty space-filling elements is proposed.

In the HTML, create three empty divs with the class "filling-empty-space-childs." These elements should have a width equal to the width of the child elements and a height of 0. These elements play a crucial role in aligning the last row to the left.

The flexbox container should have the following properties:

• display: flex
• flex-wrap: wrap
• justify-content: space-around

Depending on the number of elements in the last row, the empty space-filling elements collapse in a new row, remaining invisible, ensuring that the last line remains aligned to the left.

Here's an example:

<code class="html"><div class="container">
  <div class="item"></div>
  <div class="item"></div>
  ...
  <div class="item"></div>
  <div class="filling-empty-space-childs"></div>
  <div class="filling-empty-space-childs"></div>
  <div class="filling-empty-space-childs"></div>
</div></code>

<code class="css">.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.item {
  width: 130px;
  height: 180px;
  background: red;
  margin: 0 1% 24px;
}

.filling-empty-space-childs {
  width: 130px;
  height: 0;
}</code>

By implementing this technique, the last line/row will be left-aligned, preserving the desired grid effect even when it contains a different number of elements than other rows.

The above is the detailed content of How to Left-Align the Last Row in a Flexbox Layout?. For more information, please follow other related articles on the PHP Chinese website!