Flex布局详解

1.flex布局原理

• flex意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
  • 为父盒子设置flex布局后，子元素的flot、clear 和 vertical-align 属性将失效
  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
• 采用flex布局的元素，称为flex容器，简称“容器”。它所有的子元素自动成为容器成员，称为flex项目，简称“项目”

2.父项属性

2.1flex-direction

• 作用：设置主轴方向

• 主轴与侧轴

  • 主轴默认为x轴，水平向右

  • 侧轴默认为y轴，水平向下

  • 主轴可更改，子元素是跟随主轴排列的

  • 属性值

  • 属性值	说明
    row（默认值）	从左到右
    row-reverse	从右到左（翻转）
    column	从上到下
    column-reverse	从下到上

2.2justify-content

• 作用：设置主轴上的子元素排列方式

• 属性值

  • 属性值	说明
    flex-start（默认值）	从头部开始，如果主轴是x轴，则从左到右（贴着左边对齐）
    flex-end	从尾部开始排列（贴着右边对齐）
    center	在主轴居中对齐
    space-around	平分剩余空间（每个盒子左右边距相等，边上间距小于盒子间的边距）
    space-evenly	真平分剩余空间
    space-between	先两边贴边，再平分剩余空间（重要）

2.3flex-warp

• 作用：设置子元素是否换行

• 默认情况下，子元素都排在一条轴线上，flex布局中默认是不换行的

• 属性值

  • 属性值	说明
    nowrap（默认值）	不换行
    warp	换行

2.4align-items

• 作用：设置侧轴（默认y轴）上的子元素排列方式（单行）

• 在子项为单行时使用

• 属性值

  • 属性值	说明
    flex-start	从上到下
    flex-end	从下到上
    center	垂直居中
    stretch（默认值）	拉伸

  • 拉伸：子盒子有高度时不生效。无高度时，子盒子高度拉伸到和父盒子一样

2.5align-content

• 作用：设置侧轴（默认y轴）上的子元素的排列方式（多行）

• 只能用于子项出现换行的情况，即多行。单行下没有效果

• 属性值

  • 属性值	说明
    flex-start（默认值）	在侧轴的头部开始排列
    flex-end	在侧轴的尾部开始排列
    center	在侧轴中间显示
    space-around	子项在侧轴，平分剩余空间（子项margin值相等）
    space-evenly	子项在侧轴，真平分剩余空间
    space-between	子项在侧轴，先分布在两头，再平分剩余空间
    stretch	设置子项元素高度平分父项高度

2.6flex-flow

• 作用：复合属性，相当于同时设置了 flex-direction 和 flex-warp
• 例：flex-flow：row warp

3.子项属性

3.1felx

• 作用：定义子项分配剩余空间，用flex来表示占多少份数

• 例：flex:1，表示占剩余空间的一份

3.2align-self

• 作用：控制单个子项自己在侧轴上的排列方式

• 允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性

• 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

• 例：

  • span:nth-child(2) {
        /* 设置自己在侧轴上的排列方式 */
        align-self"flex-end;
    }
    

3.3order

• 作用：属性自定义项目的排列顺序
• 数值越小，排列越靠前，默认值为0
• 注意：和z-index不一样