CSS学习笔记--初级版4

一、弹性盒布局

弹性盒基本概念

• flex 布局是 一种盒子的布局方式

• 弹性盒 也是一种元素类型(display转换)

  • block 块元素

  • inline 行内元素

  • inline-block 行内块元素

  • flex 弹性元素

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

弹性元素的默认内容

1. 会生成一个默认主轴

   • 方向: 默认从左到右

2. 会生成一个默认侧轴

   • 方向: 默认从上到下

3. 子元素的默认排列方式

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

4. 默认的子元素尺寸

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

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

5. 默认元素不会换行

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

   • 会默认挤压元素内容区域

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

弹性父元素的属性

• 主轴方向调整

  • 样式: flex-direction

  • 样式值:

    • row 主轴从左到右(默认)

    • row-reverse 主轴从右到左

    • column 主轴从上到下

    • column-reverse 主轴从下到上

  • 注意:

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

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

• 主轴方向上元素的排列方式

  • 样式: justify-content

  • 值:

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

    • flex-end 堆放在结束位置

    • center 堆放在居中位置

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

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

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

• 允许换行

  • 样式: flex-wrap

  • 值:

    • nowrap 不允许换行(默认)

    • wrap 允许换行

  • 注意:

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

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

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

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

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

  • 样式: align-items

  • 值:

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

    • flex-end 放在侧轴结束位置

    • center 放在侧轴居中位置

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

    • 关注: 每一行的临时侧轴

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

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

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

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

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

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

  • 样式: align-content

  • 值:

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

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

    • center 堆放在侧轴居中位置

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

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

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

弹性子元素的属性

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

• 占有剩余空间的比例

  • 样式: flex

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

  • 计算方式:

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

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

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

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

• 排序

  • 样式: order

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

  • 意义: 谁大, 谁排在后面

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

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

  • 样式: align-self

  • 值:=> flex-start 放在侧轴开始位置=> flex-end 放在侧轴结束位置=> center 放在侧轴居中位置