显示 Flex CSS

什么是 Flex CSS

Flexbox 是 CSS3 中定义的一种新的布局方式，旨在解决旧的布局方式（例如浮动等）中存在的问题。它提供更加灵活的方式来排列和分配空间，以便于创建复杂的布局并适应各种设备和屏幕大小。

Flexbox 的优点

1. 更加灵活高效的布局方式。
2. 简化了多个元素之间的复杂定位问题。
3. 允许容器的大小自适应子元素的大小。
4. 可以完全控制子元素的排列顺序。
5. 对于响应式设计非常有用。

如何使用 Flex CSS

使用 Flex CSS 需要以下步骤：

1. 将要使用 Flex 布局的容器周围包裹一层 div，并设置 display: flex。

.container {
  display: flex;
}

2. 对于 flex 容器中的元素，可以使用以下属性对它们进行布局和定位：

flex-direction

flex-direction 定义了子元素在主轴（默认为横轴）方向上的排列顺序（顺序或倒序），可选值包括 row、row-reverse、column 和 column-reverse。

.container {
  flex-direction: row; /* 横向排列 */
  flex-direction: column; /* 竖向排列 */
}

justify-content

justify-content 定义了子元素在主轴方向上的对齐方式，可选值包括 flex-start、flex-end、center、space-between 和 space-around。

.container {
  justify-content: flex-start; /* 主轴起始位置对齐（默认值） */
  justify-content: center; /* 主轴居中对齐 */
  justify-content: flex-end; /* 主轴末尾对齐 */
  justify-content: space-between; /* 主轴两端对齐，元素之间均匀分布 */
  justify-content: space-around; /* 主轴两端对齐，元素之间均匀分布并留有空间 */
}

align-items

align-items 定义了子元素在交叉轴方向上的对齐方式，可选值包括 flex-start、flex-end、center、stretch 和 baseline。

.container {
  align-items: flex-start; /* 交叉轴起始位置对齐 */
  align-items: center; /* 交叉轴居中对齐 */
  align-items: flex-end; /* 交叉轴末尾对齐 */
  align-items: stretch; /* 交叉轴拉伸对齐 */
  align-items: baseline; /* 子元素基线对齐 */
}

flex-wrap

flex-wrap 定义是否换行，可选值有 nowrap、wrap 和 wrap-reverse。

.container {
  flex-wrap: nowrap; /* 不换行 */
  flex-wrap: wrap; /* 换行 */
  flex-wrap: wrap-reverse; /* 换行并倒序 */
}

align-content

align-content 定义了多行子元素在交叉轴方向上的对齐方式，可选值包括 flex-start、flex-end、center、stretch、space-between 和 space-around。

.container {
  align-content: flex-start; /* 整个交叉轴起始位置对齐 */
  align-content: flex-end; /* 整个交叉轴末尾位置对齐 */
  align-content: center; /* 整个交叉轴居中对齐 */
  align-content: stretch; /* 整个交叉轴拉伸对齐 */
  align-content: space-between; /* 整个交叉轴均匀分布 */
  align-content: space-around; /* 整个交叉轴均匀分布并留有空间 */
}

flex-basis

flex-basis 定义了子元素在主轴方向上的初始大小，可选值包括 auto、width、height 和 content。

.container {
  flex-basis: auto; /* 默认值 */
  flex-basis: width; /* 使用元素宽度 */
  flex-basis: height; /* 使用元素高度 */
  flex-basis: content; /* 使用内容宽度或高度 */
}

flex-grow

flex-grow 定义了子元素放大比例，默认值为 0，表示不放大。

.child {
  flex-grow: 1; /* 允许放大 */
  flex-grow: 2; /* 放大比例为 2 */
}

flex-shrink

flex-shrink 定义了子元素缩小比例，默认值为 1，表示按比例缩小。

.child {
  flex-shrink: 1; /* 默认值，按比例缩小 */
  flex-shrink: 0; /* 不缩小 */
}

flex

flex 是 flex-grow、flex-shrink 和 flex-basis 的三个属性的缩写形式。

.child {
  flex: 1; /* 等同于设置 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
  flex: 1 2 150px; /* 等同于设置 flex-grow: 1; flex-shrink: 2; flex-basis: 150px */
}

纵轴对齐方式总结

容器属性

| 属性 | 取值 | 作用 | |----------------|--------------------------------------------------------|------------------------------------------------------------| | align-items | flex-start | flex-end | center | baseline | stretch | 定义在交叉轴上如何对齐容器内的项 | | align-content | flex-start | flex-end | center | space-between | space-around | stretch | 在交叉轴上如何对齐容器内的行。如果只有一行，该属性不起作用。 |

项目属性

| 属性 | 取值 | 作用 | |-------------|------------------------------------------------------|------------------------------------------------------------| | order | 0 | 项目的排列顺序。数值越小，排列越靠前，默认为 0。 | | flex-grow | 0 | 项目的放大比例，默认为 0，即如果存在剩余空间也不放大。 | | flex-shrink | 1 | 项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。 | | flex-basis | auto | 定义了在分配多余空间之前，项目占据的主轴空间，默认值为 auto | | flex | flex-grow | flex-shrink | flex-basis | 是 flex-grow, flex-shrink 和 flex-basis 属性的缩写，默认值为 0 1 auto | | align-self | auto | flex-start | flex-end | center | baseline | stretch | 定义项目在交叉轴上如何对齐。可以覆盖容器的 align-items 属性。 |

示例代码

HTML

<div class="container">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.child {
  background-color: gray;
  color: white;
  padding: 10px;
  flex-basis: 100px;
}

输出结果

总结

Flexbox 是一种更加灵活的、高效的布局方式，可以帮助我们解决传统CSS布局中存在的一些问题。在使用时，需要了解常用的相关属性，以便进行灵活定制化的布局设计。通过使用 Flexbox，我们可以轻松实现响应式设计，并优化网站的用户体验。