Css 中 flex 弹性布局详解


共计 2344 个字符,预计需要花费 6 分钟才能阅读完成。

1. 概念

flex 是 CSS 的一种布局模式,它通过定义父容器 (flex container)子元素 (flex items) 之间的关系来创建灵活的布局。

1.1 容器-Flex Container

  • 设置了 display: flexdisplay: inline-flex 称为容器。
  • 它的所有直接子元素都会成为 flex items (弹性项目)。

1.2 弹性项目-Flex Items

  • 所有弹性容器内的子元素。
  • 这些子元素可以通过各种 flex 相关的 css 属性来控制对齐、排序和空间分配。

此案例外层 div 为容器,内层全为弹性项目。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<style>
.box {
    display: flex;
}
</style>

1.3 主轴与交叉轴

  • 主轴:弹性项目的主要排列方向,默认是水平的(从左到右)。
  • 交叉轴:与主轴垂直的方向,默认是垂直方向(从上到下)。

可以通过 flex-direction 改变主轴方向。

2. 容器属性

2.1 display

display 属性定义弹性容器。

  • flex:块级弹性容器,元素占据整个宽度。
  • inline-flex:行内弹性容器,容器只占据内容的宽度。

2.2 flex-direction

弹性项目在弹性容器中的排列方向(主轴方向)。

  • flex-direction:从左到右
  • row-reverse: 从右到左。
  • column: 从上到下。
  • column-reverse: 从下到上。

2.3 flex-wrap

弹性项目是否换行。

  • nowrap: 不换行,所有项目都在同一行(默认)。
  • wrap: 换行,项目会在行满后另起一行。
  • wrap-reverse: 换行,但顺序与 wrap 相反。

2.4 justify-content

弹性项目在主轴上的对齐方式。

  • flex-start: 从主轴起始处对齐(默认)。
  • flex-end: 从主轴末端对齐。
  • center: 居中对齐。
  • space-between: 两端对齐,项目之间的间距相等。
  • space-around: 每个项目两侧的间距相等,项目之间的间距是两边间距的两倍。
  • space-evenly: 项目之间的间距和两端的间距都相等。

2.5 align-items

弹性项目在交叉轴上的对齐方式(针对单行)。

  • stretch: 项目拉伸以填满容器(默认)。
  • flex-start: 项目在交叉轴的起始处对齐。
  • flex-end: 项目在交叉轴的末端对齐。
  • center: 项目在交叉轴上居中。
  • baseline: 项目基线对齐。

2.6 align-content

定义多行内容在交叉轴上的对齐方式(针对多行)。

  • stretch: 行会拉伸以填满容器(默认)。
  • flex-start: 行在交叉轴的起始处对齐。
  • flex-end: 行在交叉轴的末端对齐。
  • center: 行在交叉轴上居中。
  • space-between: 行之间的间距相等。
  • space-around: 每行两侧的间距相等,行之间的间距是两侧的两倍。

3. 弹性项目属性

3.1 order

  • 控制项目的显示顺序,默认值为 0
  • 数字越小,项目越靠前,负数同样有效。

3.2 flex-grow

项目在容器中剩余空间的分配比例,默认值为 0。(即默认不占满容器)

  • 比例越大,项目占据的剩余空间越多。
  • 如果所有项目的 flex-grow 值相同,剩余空间将会均匀分配。

3.3 flex-shrink

项目在容器空间不足时的收缩比例,默认值为 1。(即空间不足时默认自动收缩容器,原来设置宽度为800,但实际会达不到)

  • 比例越大,项目缩小得越多。
  • 如果设置为 0,项目不会缩小。

3.4 flex-basis

项目的初始大小(主轴方向上的),默认值为 auto。

  • 可以用具体的值如 px%auto
  • flex-basis 的值会覆盖 widthheight 的值。

3.5 flex

flex-grow, flex-shrinkflex-basis 的简写形式。

  • flex: none 等价于 flex: 0 0 auto。即元素不会放大,也不会缩小,元素的初始尺寸根据其内容、宽度/高度等自动决定。
  • flex: auto 等价于 flex: 1 1 auto。容器空间有剩余时占满,不足时收缩。元素的初始大小由其内容、宽度/高度等因素自动决定(类似于常规布局时的大小),而不是固定为 0。
  • flex: 1 等价于 flex: 1 1 0。即:容器空间有剩余时占满,不足时收缩。布局时先忽略元素内容的大小,然后再按 flex-grow 和 flex-shrink 规则调整。

3.6 align-self

允许单个项目对齐方式覆盖容器的 align-items 属性。

  • auto: 使用容器的 align-items 设置(默认)。
  • stretch: 拉伸以填充容器。
  • flex-start: 在交叉轴起始处对齐。
  • flex-end: 在交叉轴末端对齐。
  • center: 在交叉轴居中对齐。
  • baseline: 项目基线对齐。

测试代码:

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

<style>
.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    height: 300px;
    border: 2px solid #333;
}

.item {
    width: 600px;
    height: 100px;
    background-color: lightcoral;
    margin: 10px;
}
</style>

Tips:清朝云网络工作室

阅读剩余
THE END