flex布局

一、认识flex

1.flex 布局：

一种盒子的布局方式

是一种元素类型

=> block 块元素

=> inline 行内元素

=> inline-block 行内块元素

=> flex 弹性元素

2. 如何把一个元素设置为弹性元素

=> 给该元素设置 display: flex;

注意: 弹性元素不弹自己, 弹子元素

3.认识弹性元素给出的默认内容

1）会生成一个默认主轴

=> 方向: 默认从左到右

2）会生成一个默认侧轴

=> 方向: 默认从上到下

3） 会默认元素排列方式

=> 默认按照主轴方向, 从主轴开始向主轴结束排列

4）默认的子元素尺寸

=> 当子元素没有设置主轴方向长度的时候, 默认按照元素内容来设定

=> 当子元素没有设置侧轴方向长度的时候, 默认按照侧轴长度来设定

5） 默认元素不会换行

=> 如果元素超出父元素范围了, 那么不会换行排列

=> 会默认挤压元素内容区域

=> 挤压到内容大小不在继续挤压, 溢出父元素

4.设置 flex 相关样式

+ 给 flex 元素设置样式调整子元素(弹性父元素)

+ 直接给子元素设置样式来进行单独调整自己(弹性子元素)

二、弹性父元素的属性

1. 主轴方向调整

样式: flex-direction

值:

=> row 主轴从左到右(默认)

=> row-reverse 主轴从右到左

=> column 主轴从上到下

=> column-reverse 主轴从下到上

注意:

=> 当主轴是 row 或者 row-reverse 的时候, 侧轴都是从上到下

=> 当主轴是 column 或者 column-reverse 的时候, 侧轴都是从左到右

2. 主轴方向上元素的排列方式

样式: justify-content

值:

=> flex-start 堆放在开始位置(默认)

=> flex-end 堆放在结束位置

=> center 堆放在居中位置

=> space-between 把所有的空白位置均分在每两个元素之间(假设 6 个元素, 5 个空白)

=> space-around 把所有的空白位置均分放在每个元素两侧(假设 6 个元素, 12 个空白)

=> space-evenly 把所有的空白位置绝对均分(假设 6 个元素, 7 个空白)

3. 允许换行

样式: flex-wrap

值:

=> nowrap 不允许换行(默认)

=> wrap 允许换行

注意:

=> 当元素开启换行以后, 换多少行决定了元素的排列位置

=> 当元素开启换行以后, 会出现多个临时侧轴

-> 每一行会有自己的临时侧轴

4. 元素在侧轴上的排列方式(单行)

指: 在不允许换行的情况下使用

样式: align-items

值:

=> flex-start 放在侧轴开始位置(默认)

=> flex-end 放在侧轴结束位置

=> center 放在侧轴居中位置

注意: 多行的情况下, 可以生效的, 前提: 不能有 align-content 样式

=> 关注: 每一行的临时侧轴

=> flex-start 把每一行元素放在临时侧轴的开始位置

=> flex-end 把每一行元素放在临时侧轴的结束位置

=> center 把每一行元素放在临时侧轴的居中位置

5. 元素在侧轴上的排列方式(多行)

指: 在允许换行的情况下使用(单行情况不生效)

关注: 主要侧轴上(和每一行的临时侧轴没有关系)

样式: align-content

值:

=> flex-start 堆放在侧轴开始位置

=> flex-end 堆放在侧轴结束位置

=> center 堆放在侧轴居中位置

=> space-between 把所有的空白位置均分在每两行元素之间(假设 3 行元素, 2 个 空白)

=> space-around 把所有的空白位置均分放在每行元素两侧(假设 3 行元素, 6 个 空白)

=> space-evenly 把所有的空白位置绝对均分(假设 3 行元素, 4 个 空白)

三、弹性子元素的属性

注意: 直接设置到弹性子元素身上

1. 占有剩余空间的比例

样式: flex

值: 一个数字(没有单位)

计算方式:

=> 主轴方向的整体长度 减去 设置了固定宽度的元素 (800 - 400 === 400)

=> 计算所有书写了 flex 样式的元素的数字的总和当做分母 (10 + 30 === 40)

=> 每一个元素的 flex 的值就是 分子

注意: 当你没有换行, 并且元素出界以后, 开始挤压的时候, 优先挤压没有设置固定宽度的元素

2. 排序

样式: order

值: 一个数字(没有单位)

意义: 谁大, 谁排在后面

3. 自己单独在侧轴上的排列方式

注意:

=> 如果是单行

=> 如果是多行, 按照每一行的临时侧轴来进行调整

样式: align-self

值:

=> flex-start 放在侧轴开始位置

=> flex-end 放在侧轴结束位置

=> center 放在侧轴居中位置

四、弹性盒子注意

1. 弹性元素修改的是 子一级元素 的排列方式

2. 当该元素没有子元素的时候, 可以弹 文本

<div>
    文本内容
</div>

div {
  width: 300px;
  height: 300px;
  border: 1px solid #333;
  /* 弹性元素 ===> 文字垂直居中*/
  display: flex;
  justify-content: center;
  align-items: center;
}

3. 弹性元素默认不换行

4. 弹性元素会触发 BFC