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

Susan Sarandon
Release: 2024-11-03 17:44:02
Original
406 people have browsed it

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>
Copy after login
<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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template