flex 弹性布局还不懂？一篇文章带你了解一下

冥想.jpg
在这里插入图片描述

flex 是什么

Flex布局，全称为Flexible Box布局，或简称Flexbox，是一种由W3C提出用于网页设计的新型布局模式。它旨在提供一个更加有效且灵活的方式来布局、对齐和分配容器内项目的空间，无论是行还是列方向。Flex布局特别适用于响应式和动态调整的用户界面设计，特别是在不同屏幕尺寸和设备上实现一致的布局效果。

在Flex布局中，父容器被设置为display: flex;或display: inline-flex;后，就变成了一个Flex容器。这个容器内的所有直接子元素自动成为Flex项目。这种布局的核心优势在于能够简便地处理元素的对齐（包括水平和垂直方向）、分配剩余空间、调整元素顺序以及控制元素尺寸，而无需使用传统的流体布局技巧如浮动或定位。

Flex布局的关键特点包括：

弹性伸缩：项目可以按照比例伸缩以填充容器，或者根据需要分配多余空间。
方向控制：可以轻松改变项目在容器中的水平或垂直排列方向。
对齐能力：提供了强大的对齐选项，使得元素在主轴和交叉轴上都能精准对齐。
一维布局：专注于单一行或一列的布局，简化了多维度布局的复杂性。
重新排序：无需改变HTML结构，仅通过CSS即可调整项目在容器中的顺序。

初识 flex 布局

下面是一个简单的Flex布局示例，展示了弹性伸缩特性。假设我们有一个容器，里面包含三个子元素，我们希望这三个子元素在任何屏幕宽度下都能等宽排列，并且能够自适应容器的宽度变化。

HTML 代码如下：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

对应的CSS 代码如下：

.container {
  display: flex; /* 设置容器为Flex布局 */
}
.item {
  flex: 1; /* 这是关键！每个.item占据容器等比例的空间，实现弹性伸缩 */
  border: 1px solid #000; /* 为了视觉上区分各个item，添加边框 */
  padding: 10px;
  box-sizing: border-box; /* 包含边框和内边距在元素的总宽度和高度中计算 */
}

在这个例子中，.container被设置为Flex容器，而它的子元素（.item）通过flex: 1;属性设置了伸缩行为。这意味着所有.item将会平分.container的可用空间。如果容器宽度变化，每个.item的宽度也会相应地自动调整，保持相等。这就是Flex布局中“弹性伸缩”的一个直观体现。

flex 属性详解

在上面的示例中，.item的属性之一“flex: 1;”，其实这是=是一个非常实用且强大的简写形式，它综合控制了Flex项目的三个关键方面的行为：扩展(flex-grow)、收缩(flex-shrink)和基础大小(flex-basis)。具体来说，flex: 1;等价于flex: 1 1 0%;，这分别对应于以下三个属性的设置：

flex-grow: 设定为1意味着当Flex容器有多余空间时，该Flex项目会按比例分配这部分空间。如果所有的Flex项目都设定了相同的flex-grow值（例如都是1），那么它们会均等地分享容器的剩余空间。值越大，项目获取的额外空间比例也越大。
flex-shrink: 同样设定为1，这决定了当Flex容器空间不足时，项目愿意缩小自己的大小以适应容器。所有项目的flex-shrink默认值都是1，意味着它们会等比例缩小。如果设置为0，则项目大小不会因为容器空间不足而缩小。
flex-basis: 设置为0%，意味着在计算分配多余空间前，项目没有预先设定的基础大小（或者说基础大小非常小，接近于0）。这通常意味着项目的初始大小将主要由其内容决定，但随后会根据flex-grow分配剩余空间。因此，即使flex-basis设置为0%，一旦考虑到flex-grow，项目仍会扩展以填满分配给它的空间。

在CSS的Flex布局中，除了flex-grow, flex-shrink, 和 flex-basis这三个重要属性外，还有其他几个核心属性对于理解和应用Flex布局至关重要：

flex-direction: 此属性决定了Flex项目在容器中的排列方向，从而定义了主轴的方向。可用值包括：
- row（默认值）：项目沿水平方向排列，从左到右。
- row-reverse：项目沿水平方向排列，但从右到左。
- column：项目沿垂直方向排列，从上到下。
- column-reverse：项目沿垂直方向排列，但从下到上。
flex-wrap: 控制Flex项目在一行中无法完全放下时是否换行以及如何换行。可用值包括：
- nowrap（默认值）：项目都在同一行，超出部分被隐藏。
- wrap：项目可以换行，第一行在上方。
- wrap-reverse：项目可以换行，第一行在下方。
align-items: 定义了Flex项目在交叉轴（与主轴垂直的轴）上的对齐方式。需要注意的是align-items作用范围限于单行内的每个项目。也就是说，它会影响每个Flex行内部的项目对齐，而不是行与行之间的关系。可用值包括：
- stretch（默认值，仅当align-items未在项目上设置时）：拉伸以填满容器。
- flex-start：项目位于容器的起始位置。
- flex-end：项目位于容器的结束位置。
- center：项目居中对齐。
- baseline：项目基于文本基线对齐。
align-content: 主要用于多行Flex布局中，用于调整多行Flex项目之间的对齐方式。当Flex容器的flex-wrap属性设置为wrap或wrap-reverse，即容器内的项目可以跨越多行时，align-content才会生效。它的作用是对整个Flex行集进行对齐，而不是单个Flex项目。换句话说，align-content控制的是行与行之间的空间分配。可用值包括：
- stretch（默认值）：默认情况下，Flex行会被拉伸以填满整个容器在交叉轴上的可用空间。
- flex-start：所有行都堆叠在交叉轴的起始位置。
- flex-end：所有行都堆叠在交叉轴的结束位置。
- center：所有行居中对齐在交叉轴上。
- space-between：在每行之间均匀分配空间，第一行和最后一行分别贴紧容器的起始和结束位置。
- space-around：在每行之间以及行的外部均匀分配空间，每行两侧的空间相等。
justify-content: 定义了Flex项目在主轴上的对齐方式。
- flex-start（默认值）：项目位于容器的起始位置。
- flex-end：项目位于容器的结束位置。
- center：项目居中对齐。
- space-between：项目之间均匀分配空间，首尾项目分别靠边。
- space-around：项目周围均匀分配空间。
- space-evenly：项目之间以及项目与容器边缘之间均匀分配空间。
justify-items：justify-items是Grid布局模型中的属性，并不是flex布局中的属性，梳理在这里是因为这个属性容易搞混，这里特别注意。
flex-flow: 是flex-direction和flex-wrap的简写。如“flex-flow: row wrap; ”
flex：是一个简写属性，它结合了flex-grow、flex-shrink和flex-basis三个属性，允许你更便捷地控制Flex项目在容器中的伸缩行为和初始大小。
align-self: 类似于align-items，但允许单个Flex项目覆盖容器的默认对齐方式。

align-items与align-content区别

在CSS Flex布局中，理论上可以同时设置align-items和align-content属性，但它们的作用范围和适用场景不同，这导致在某些情况下它们的组合使用可能不会像预期那样工作。

align-items

用于单行或多行Flex容器中，控制容器内每一行的子元素在交叉轴上的对齐方式。如果Flex容器只有一行，align-items将决定所有子元素的对齐；如果有多个行（flex-wrap设为wrap或wrap-reverse），并且行的总高度没有填满容器的交叉轴尺寸，align-items仍然会影响每行内元素的对齐。

align-content

主要用于有多行的Flex容器，控制行与行之间的对齐方式以及行间空间的分配。当Flex容器有多行并且具有额外的交叉轴空间时（即行没有填满容器的高度或宽度时），align-content才起作用。如果只有一行或者行完全填满了容器的交叉轴，则align-content没有任何视觉效果。

总来看，具体的区别体现在三个方面：

应用场景：align-content主要应用于多行Flex容器，当项目跨越多行时才有效；而align-items适用于所有Flex容器，无论是单行还是多行。
作用对象：align-content调整的是多行之间的空间分布，影响的是整个Flex行集；而align-items直接影响单行内每个项目的对齐方式。
默认行为：在单行Flex容器中，align-content的设置不会产生视觉效果，因为它主要是为多行布局设计的。

因此，需要注意的是，当同时设置这两个属性时，如果Flex容器内只有单行，align-content将不产生任何效果，因为它是针对多行布局设计的。而在多行布局中，尽管两者可以共存，但align-items主要控制单行内部的对齐，而align-content则负责行间的对齐和空间分配。在某些情况下，如果align-items和align-content有冲突的值（比如同时设置了align-items: center和align-content: flex-start），具体表现可能会根据浏览器的实现细节有所不同，但通常align-items对单行内元素的直接对齐效果优先。

因此，理解它们各自的用途并在适当的情况下使用是非常重要的。在大多数布局需求中，你会根据布局是否有多行来选择使用align-items或align-content，而不是同时使用它们来达到不同的效果。

justify-items与justify-content区别

在CSS中，justify-content和justify-items是两个用于不同布局模型的对齐属性，它们之间存在一定的区别：

justify-items

应用范围：justify-items是Grid布局模型中的属性，用于设置Grid容器内Grid项在行轴（类似于Flex布局的主轴）上的对齐方式。
功能描述：与justify-content不同，justify-items作用于Grid布局中的单个项目，控制每个单独Grid项在行轴上的对齐方式，而不是整个Grid容器的内容分布。
可选值：包括start、end、center、stretch（默认值）等，具体取决于Grid项的大小和Grid容器的设置。

justify-content