【笔记】Flex学习笔记

发表于 更新于 阅读次数：

前言

Flex布局（伸缩布局/弹性布局）学习笔记

父元素属性

  • 当把盒子设置成flex布局后，子元素的float、clear、vertical-align属性将失效
  • 如果主轴是横向的，侧轴就是纵向的；如果主轴是纵向的，侧轴就是横向的

display: flex;：使用flex布局
flex-direction：设置主轴方向

row：缺省值，从左到右
row-reverse：从右到左
column：从上到下
column-reverse：从下到上

flex-wrap：设置子元素是否换行

nowrap：缺省值，不自动换行，此时如果子元素过多，会导致子元素尺寸强制发生改变
wrap：自动换行，此时无论子元素是否过多，都不会导致子元素尺寸发生改变，会强制将放不下的子元素自动换行

flex-flow: flex-direction flex-wrap：同时设置主轴方向和是否换行
justify-content：设置主轴上子元素排列方式

flex-start：缺省值，从头到尾
flex-end：从尾到头
center：居中
space-around：平分剩余空间，两边有空隙
space-between：平分剩余空间，两边无空隙

align-items：为单行子元素，设置侧轴上子元素排列方式

flex-start：缺省值，从头到尾
flex-end：从尾到头
center：居中对齐
stertch：拉伸对齐（子盒子不能指定高度）

align-content：为多行子元素，设置侧轴上子元素排列方式

flex-start：缺省值，从头到尾
flex-end：从尾到头
center：子元素整体居中对齐
space-around：子元素在侧轴靠近两边
space-between：子元素每一行先在侧轴等分每一行空间，再整体居中对齐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
  <head>
    <style>
      div {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: flex-start;
      }
    </style>
  </head>
  <body>
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </body>
</html>

子元素属性

分配子元素的剩余空间

flex <num>：指定占比权重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
  <head>
    <style>
      div {
        display: flex;
      }
      div span {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </body>
</html>

控制当前子元素在侧轴的排列方式

  • 通过align-self属性覆盖指定子元素的align-items属性

align-self：为单行子元素，设置侧轴上子元素排列方式

auto：跟随父元素的align-self属性，如果没有父元素，按照stertch拉伸对齐
flex-start：从头到尾
flex-end：从尾到头
center：居中对齐
stertch：拉伸对齐（子盒子不能指定高度）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
  <head>
    <style>
      div {
        display: flex;
      }
      div span:nth(0) {
        align-self: auto;
      }
    </style>
  </head>
  <body>
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </body>
</html>

指定子项目的排列顺序

order <num>：指定子项目的排列顺序，数字越小越靠前，可以是0、正数、负数

0：缺省值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
  <head>
    <style>
      div {
        display: flex;
      }
      div span:nth(1) {
        order: -1;
      }
    </style>
  </head>
  <body>
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </body>
</html>

完成

参考文献

哔哩哔哩——干脆就叫这名