Codes►前端

flex

Flex

flex

Flex 布局教程：语法篇 - 阮一峰的网络日志
CSS Flexbox（Flexible Box Layout）是一种布局模式，用于在容器中对齐和分配空间给项目（子元素），即使它们的大小是未知或者动态变化的。Flexbox布局非常适合用来创建响应式设计，因为它可以动态地调整其子项的大小和位置。
以下是Flexbox布局的一些基本概念和属性：

基本概念

  1. 容器（flex container）：使用display: flex;或display: inline-flex;声明的元素。
  2. 项目（flex items）：容器内的直接子元素。

容器属性

  • flex-direction：定义主轴的方向（是水平还是垂直）。
    • row（默认值）：主轴为水平方向，起点在左端。
    • row-reverse：主轴为水平方向，起点在右端。
    • column：主轴为垂直方向，起点在顶部。
    • column-reverse：主轴为垂直方向，起点在底部。
  • flex-wrap：定义项目是否应该在必要时换行。
    • nowrap（默认值）：不换行。
    • wrap：换行，第一行在上方。
    • wrap-reverse：换行，第一行在下方。
  • flex-flow：flex-direction和flex-wrap的简写形式。
  • justify-content：定义项目在主轴上的对齐方式。
    • flex-start（默认值）：项目在主轴起点对齐。
    • flex-end：项目在主轴终点对齐。
    • center：项目在主轴中心对齐。
    • space-between：项目在主轴上均匀分布。
    • space-around：项目在主轴上两边对齐，中间间隔相等。
    • space-evenly：项目在主轴上均匀分布，包括两端。
  • align-items：定义项目在交叉轴上的对齐方式。
    • flex-start：项目在交叉轴起点对齐。
    • flex-end：项目在交叉轴终点对齐。
    • center：项目在交叉轴中心对齐。
    • baseline：项目在交叉轴的基线对齐。
    • stretch（默认值）：项目在交叉轴上拉伸以填满容器。
  • align-content：定义多行项目在交叉轴上的对齐方式。

项目属性

  • order：定义项目的排序顺序。数值越小，越靠前。
  • flex-grow：定义项目的放大比例。如果容器有多余的空间，项目可以放大。
  • flex-shrink：定义项目的缩小比例。如果容器空间不足，项目可以缩小。
  • flex-basis：定义项目在主轴上的初始大小。
  • flex：flex-grow、flex-shrink和flex-basis的简写形式，默认值为0 1 auto。
  • align-self：允许单个项目有与其他项目不同的对齐方式。

示例代码

1
2
3
4
5
6
7
8
9
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.item {
  flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}
1
2
3
4
5
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

在这个例子中，.container是一个flex容器，它的子元素.item将平均分配空间，并在容器中水平居中对齐。
Flexbox是一个强大的布局工具，能够解决许多传统CSS布局难以处理的问题，特别是在处理复杂布局和响应式设计时。

flex 1和flex auto区别

在CSS的Flexbox布局中，flex属性是一个简写属性，用于设置元素的flex-grow、flex-shrink和flex-basis三个属性。flex: 1和flex: auto是两种常见的用法，它们之间有一些区别：

Flex: 1

  • flex: 1等同于flex: 1 1 0%。
    • flex-grow: 1：允许元素增长来占据额外的空间。
    • flex-shrink: 1：允许元素缩小以释放空间。
    • flex-basis: 0%：元素的初始大小（在分配多余空间之前）是0%，即元素最初没有占据任何空间。
      这意味着使用flex: 1的元素会尽可能地占据所有可用空间，并且如果需要，也可以缩小以适应容器。

Flex: Auto

  • flex: auto等同于flex: 1 1 auto。
    • flex-grow: 1：允许元素增长来占据额外的空间。
    • flex-shrink: 1：允许元素缩小以释放空间。
    • flex-basis: auto：元素的初始大小（在分配多余空间之前）是其内容的自然尺寸。
      这意味着使用flex: auto的元素会首先尝试保持其自然尺寸，但如果有额外的空间，它会增长以占据这些空间，如果需要，它也会缩小以适应容器。

区别

  • 初始大小：flex: 1的元素初始大小是0%，而flex: auto的元素初始大小是其内容的自然尺寸。
  • 空间分配：flex: 1的元素会首先尝试填充所有可用空间，而flex: auto的元素只有在有额外空间时才会增长。
    在实际应用中，选择flex: 1还是flex: auto取决于你希望元素如何分配空间和响应容器大小的变化。如果你希望元素能够完全填充容器，使用flex: 1；如果你希望元素保持其自然尺寸，只在必要时增长或缩小，使用flex: auto。