Flex 布局：轻松实现最后一行左对齐

2023-01-25 17:21:31

掌握 Flex 布局，释放布局新境界

简介

Flex 布局是一种现代化的布局方式，它利用灵活的盒子模型，让你轻松创建响应式且美观的布局。Flex 布局具有强大的灵活性，能够处理各种复杂布局，让你轻松打造出惊艳的设计。

Flex 布局的基础

Flex 布局的核心理念是将元素放置在容器中，容器的布局方式由 display: flex 属性决定。容器中的每个元素称为 flex 项目，它们排列在主轴（水平或垂直）上。你可以使用 flex-direction 属性控制主轴的方向。

Flex 布局属性

Flex 布局提供了许多属性来控制项目在容器中的排列和对齐方式。以下是一些关键属性：

justify-content：控制项目在主轴上的水平对齐方式。
align-items：控制项目在侧轴上的垂直对齐方式。
flex-wrap：允许项目换行显示。
align-content：控制多行项目在侧轴上的垂直对齐方式。

实现最后一行左对齐布局

利用 Flex 布局，你可以轻松实现最后一行左对齐的布局。只需在容器上设置 justify-content: space-between，即可让项目在主轴上均匀分布，并使最后一行的项目左对齐。

<div class="container">
  <div class="item">项目 1</div>
  <div class="item">项目 2</div>
  <div class="item">项目 3</div>
  <div class="item">项目 4</div>
  <div class="item">项目 5</div>
</div>

<style>
  .container {
    display: flex;
    justify-content: space-between;
  }
  .item {
    background-color: #ccc;
    padding: 10px;
    margin: 10px;
  }
</style>