Flex 和 Inline Flex 之间的区别

Flex 和 Inline Flex 是 CSS 中常用的布局模式，它们都提供了一种强大的方法来布置元素并控制它们之间的空间。然而，它们在一些关键的方面有所不同。以下是它们之间的主要区别：

Flex

Flex 是一种弹性盒子布局模式，它允许您根据需要自由地调整元素的大小和位置。它允许元素按照水平或垂直方向分布，并且可以通过定义一个 flex 容器或使用 flex 属性来实现。

Flex 容器

Flex 容器是一种包含 flex 项目的容器，它允许您控制项目的排列方式。要创建一个 flex 容器，您需要在容器的 CSS 中设置 display: flex。

flex-direction

flex-direction 属性用于定义 flex 项目的主轴方向。它可以设置水平轴（row）或垂直轴（column）方向。

/* 水平轴 */
flex-direction: row;

/* 垂直轴 */
flex-direction: column;

justify-content

justify-content 属性用于对 flex 项目在主轴上的排列方式进行对齐。它可以设置为 flex-start、flex-end、center、space-between 或 space-around。

/* 左对齐 */
justify-content: flex-start;

/* 右对齐 */
justify-content: flex-end;

/* 居中对齐 */
justify-content: center;

/* 两端对齐，项目之间的间隔相等*/
justify-content: space-between;

/* 沿轴线均匀分布 */
justify-content: space-around;

align-items

align-items 属性用于定义 flex 项目在交叉轴上的对齐方式。它可以设置为 flex-start、flex-end、center、stretch 或 baseline。

/* 上对齐 */
align-items: flex-start;

/* 下对齐 */
align-items: flex-end;

/* 垂直居中 */
align-items: center;

/* 把项目撑满整个容器的高度 */
align-items: stretch;

/* 基线对齐 */
align-items: baseline;

flex-wrap

flex-wrap 属性用于定义 flex 项目是否应该换行。它可以设置为 nowrap、wrap 或 wrap-reverse。

/* 不换行 */
flex-wrap: nowrap;

/* 换行，第一行在上方 */
flex-wrap: wrap;

/* 换行，第一行在下方 */
flex-wrap: wrap-reverse;

align-content

align-content 属性在 flex 容器内控制交叉轴上行之间的间隔。它可以设置为 flex-start、flex-end、center、space-between、space-around 或 stretch。

/* 上对齐 */
align-content: flex-start;

/* 下对齐 */
align-content: flex-end;

/* 垂直居中 */
align-content: center;

/* 把各行沿交叉轴方向平均分布 */
align-content: stretch;

/* 沿主轴线两端对齐，且行之间的间隔平均分布 */
align-content: space-between;

/* 沿主轴线两端对齐，行之间的间隔平均分布且空余空间分配到行之间 */
align-content: space-around;

Flex 项目

Flex 项目指添加到 flex 容器的元素。Flex 容器中的项目具有以下属性：

order

order 属性用于定义 flex 项目的排序顺序。默认情况下，flex 项目的排序顺序是 0，但是通过设置 order 属性，您可以改变项目的排序值。

/* 把项目排在第二位 */
order: 2;

flex-wrap

flex-wrap 属性用于定义 flex 项目是否可以换行。

/* 不换行 */
flex-wrap: nowrap;

/* 换行 */
flex-wrap: wrap;

/* 换行，第一行在下方 */
flex-wrap: wrap-reverse;

flex-grow

flex-grow 属性用于定义 flex 项目的放大比例。

/* 充满剩余空间 */
flex-grow: 1;

/* 不放大 */
flex-grow: 0;

flex-shrink

flex-shrink 属性用于定义 flex 项目的缩小比例。

/* 缩小 */
flex-shrink: 1;

/* 不缩小 */
flex-shrink: 0;

flex-basis

flex-basis 属性用于定义 flex 项目的初始大小。

/* 初始大小为0 */
flex-basis: 0;

/* 初始大小为200px */
flex-basis: 200px;

flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写，可以同时设置这三个属性。

/* 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0;*/
flex: 1;

/* 等同于 flex-grow: 0; flex-shrink: 0; flex-basis: 100px;*/
flex: 0 0 100px;

Inline Flex

与 Flex 不同，Inline Flex 是一种内联弹性盒子布局模式。它的主要区别在于，Inline Flex 允许元素在同一行内排列，并且具有默认的 white-space: nowrap; 属性。

为了创建 Inline Flex 内容，请在元素的 CSS 中设置 display: inline-flex。

.container {
  display: inline-flex;
}

总结

Flex 和 Inline Flex 都是非常有用的布局模式，可以让您轻松地布置您的内容并控制它们之间的间距。Flex 提供了更多的灵活性和控制，而 Inline Flex 允许在同一行内排列元素。了解这两个选项的区别和如何使用它们可以帮助您更好地布置和控制您的网页。