Flexbox 拉伸

Flexbox 是一种强大的 CSS 布局模式，它允许您在容器中快速定位元素，并在盒子的空间中自由应用拉伸和收缩。

容器属性

Flexbox 的布局始于父元素上 —— 容器。容器通过设置一些属性来确定它内部元素在横轴和纵轴上的排列方式。

display

将 display 属性设置为 flex，可以将元素转换为一个 flex 容器：

.container {
  display: flex;
}

flex-direction

flex-direction 属性可以控制子元素在容器中的排列方向。如果需要横向排列，可以将 flex-direction 设为 row，而要纵向排列，则将其设为 column：

.container {
  flex-direction: row; /* 默认值 */
}

.container-vertical {
  flex-direction: column;
}

justify-content

通过 justify-content 属性可以控制子元素在容器的横向分布方式。可以使用以下值：

• flex-start: 元素在容器开始端对齐
• center: 元素在容器中间对齐
• flex-end: 元素在容器结束端对齐
• space-between: 元素在容器两端对齐，中间元素等分
• space-around: 元素在容器两端对齐，中间元素空白分布

.container {
  justify-content: center; /* 默认值 */
}

.container-start {
  justify-content: flex-start;
}

.container-end {
  justify-content: flex-end;
}

.container-between {
  justify-content: space-between;
}

.container around {
  justify-content: space-around;
}

align-items

通过 align-items 属性可以控制子元素在容器的纵向分布方式。可以使用以下值：

• stretch: 元素被拉伸以填充整个纵向空间
• flex-start: 元素在容器开始端对齐
• center: 元素在容器中间对齐
• flex-end: 元素在容器结束端对齐
• baseline: 元素在基线对齐，如果没有基线，则默认对齐子元素的底部

.container {
  align-items: stretch; /* 默认值 */
}

.container-start {
  align-items: flex-start;
}

.container-end {
  align-items: flex-end;
}

.container-center {
  align-items: center;
}

.container-baseline {
  align-items: baseline;
}

元素属性

与容器属性不同的是，元素属性只影响该元素在容器中的排列方式。

order

order 属性用于定义元素在容器中的排列顺序。默认情况下，所有的 flex 子元素按文档流中定义的顺序排列，但通过 order 可以改变子元素的顺序：

.item:first-child {
  order: 1;
}

.item:last-child {
  order: 2;
}

flex-grow

flex-grow 属性用于控制元素的自动拉伸。将 flex-grow 值设置为大于 0 的数字将按比例扩展元素：

.item {
  flex-grow: 1;
}

flex-shrink

flex-shrink 属性用于控制元素的自动收缩。将 flex-shrink 值设置为大于 0 的数字将按比例收缩元素：

.item {
  flex-shrink: 1;
}

flex-basis

flex-basis 属性用于定义元素在容器中的初始大小。默认情况下，元素将占用他们的内容宽度和高度，而 flex-basis 则可以为元素定义一个基础宽度值：

.item {
  flex-basis: 200px;
}

flex

flex 属性是一个简写属性，用于设置元素在容器中的大小和拉伸性。

.item {
  flex: 1 1 auto; /* default value */
}

• 第一个值称为 flex-grow 属性，用于定义元素在容器中的拉伸比例。
• 第二个值称为 flex-shrink 属性，用于定义元素在容器中的收缩比例。
• 第三个值称为 flex-basis 属性，用于定义元素的基础宽度值。

结论

Flexbox 是一种非常强大的 CSS 布局技术，它允许我们在容器中自由地应用拉伸和收缩。通过掌握上述容器和子元素属性，你可以在应用程序和网站中创建出复杂的布局。