search

博客列表 >flex容器中的主轴方向与项目换行缩写、主轴，交叉轴和多行容器交叉轴项目对齐以及以及flex属性的缩写和案例

flex容器中的主轴方向与项目换行缩写、主轴，交叉轴和多行容器交叉轴项目对齐以及以及flex属性的缩写和案例

雷斯提亚
雷斯提亚原创
2020年04月12日 03:04:532558浏览

flex

1. flex容器与项目

1.1.  display属性（共2种）

序号属性值描述备注
1flex;创建 flex 块级容器内部子元素自动成为 flex 项目
2inline-flex;创建 flex 行内容器内部子元素自动成为 flex 项目

1.2.  flex 容器与项目特征

序号容器/项目默认行为
1容器主轴水平方向
2项目排列沿主轴起始线排列(当前起始线居左)
3项目类型自动转换”行内块级”元素,不管之前是什么类型
4容器主轴空间不足时项目自动收缩尺寸以适应空间变化,不会换行显示
5容器主轴存在未分配空间时项目保持自身大小不会放大并充满空间
例：
<head>    <style>        .dome{            width: 300px;            height: 200px;            display: flex;        }    </style></head><body>    <div class="dome">        <div class="item">1</div>        <div class="item">2</div>        <div class="item">3</div>    </div></body>

2. flex 容器主轴方向：

flex-direction属性：

序号属性值描述
1row默认值主轴水平: 起始线居中,项目从左到右显示
2row-reverse主轴水平:起始线居右, 项目从右向左显示
3column主轴垂直: 起始线居上,项目从上向下显示
4column-reverse主轴垂直: 起始线居下,项目从下向上显示
例：
    <style>        .dome{            width: 300px;            height: 200px;            display: flex;            flex-direction: row-reverse;        }        .item {        width: 100px;        height: 50px;        background-color:red;        font-size: 3rem;      }    </style>

    <style>        .dome{            width: 300px;            height: 200px;            display: flex;            flex-direction: column-reverse;        }        .item {        width: 100px;        height: 50px;        background-color:red;        font-size: 3rem;      }    </style>

3. flex 容器主轴项目换行

3.1 flex-warp属性：

序号属性值描述
1nowrap默认值项目不换行: 单行容器
2wrap项目换行: 多行容器,第一行在上方
3wrap-reverse项目换行: 多行容器,第一行在下方
例：

  • 项目不换行：


    1.  <style>

    2.      .dome{

    3.          width: 300px;

    4.          height: 200px;

    5.          display: flex;

    6.          flex-wrap: nowrap;

    7.      }

    8.      .item {

    9.      width: 150px;

    10.      height: 50px;

    11.      background-color:red;

    12.      font-size: 3rem;

    13.    }

    14.  </style>

  • 项目换行（上）


    1.  <style>

    2.      .dome{

    3.          width: 300px;

    4.          height: 200px;

    5.          display: flex;

    6.          flex-wrap: wrap;

    7.      }

    8.      .item {

    9.      width: 150px;

    10.      height: 50px;

    11.      background-color:red;

    12.      font-size: 3rem;

    13.    }

    14.  </style>

  • 项目换行（下）


    1.  <style>

    2.      .dome{

    3.          width: 300px;

    4.          height: 200px;

    5.          display: flex;

    6.          flex-wrap: wrap-reverse;

    7.      }

    8.      .item {

    9.      width: 150px;

    10.      height: 50px;

    11.      background-color:red;

    12.      font-size: 3rem;

    13.    }

    14.  </style>

3.2 简写：

  • （1）flex-flow是属性flex-direction和flex-wrap的简写

  • （2）语法：flex-flow: flex-direction flex-warp

  • （3）row nowarp为默认值

例：
    <style>        .dome{            width: 300px;            height: 200px;            display: flex;            flex-flow: row-reverse wrap;        }        .item {        width: 150px;        height: 50px;        background-color:red;        font-size: 3rem;      }    </style>

4. flex 容器主轴与项目对齐

justify-content属性

序号属性值描述
1flex-start默认所有项目与主轴起始线对齐
2flex-end所有项目与主轴终止线对齐
3center所有项目与主轴中间线对齐: 居中对齐
4space-between两端对齐: 剩余空间在头尾项目之外的项目间平均分配
5space-around分散对齐: 剩余空间在每个项目二侧平均分配
6space-evenly平均对齐: 剩余空间在每个项目之间平均分配
注：当容器中主轴方向上存在剩余空间时, 该属性才有意义
例：

  • 终止线对齐：


    1.  <style>

    2.      .dome{

    3.          width: 400px;

    4.          height: 200px;

    5.          display: flex;

    6.          justify-content: flex-end;

    7.      }

    8.      .item {

    9.      width: 100px;

    10.      height: 50px;

    11.      background-color:red;

    12.      font-size: 3rem;

    13.    }

    14. </style>

  • 居中对齐：


    1.   .dome{

    2.          width: 400px;

    3.          height: 200px;

    4.          display: flex;

    5.          justify-content: center;

    7.      }

  • 两端对齐：


    1. .dome{

    2.          width: 400px;

    3.          height: 200px;

    4.          display: flex;

    5.          justify-content: space-between;

    6.      }

  • 分散对齐：


    1.    .dome{

    2.          width: 400px;

    3.          height: 200px;

    4.          display: flex;

    5.          justify-content: space-around;

    6.      }

  • 平均对齐：


    1.  .dome{

    2.          width: 400px;

    3.          height: 200px;

    4.          display: flex;

    5.          justify-content: space-evenly;

    6.      }

5. flex容器交叉轴项目对齐

align-items属性：

序号属性值描述
1flex-start默认与交叉轴起始线对齐
2flex-end与交叉轴终止线对齐
3center与交叉轴中间线对齐: 居中对齐
例：
     .dome{            width: 400px;            height: 200px;            display: flex;            align-items: flex-end;        }

  • 居中对齐：


    1.   .dome{

    2.          width: 400px;

    3.          height: 200px;

    4.          display: flex;

    5.          align-items: center;

    6.      }

6. flex 多行容器交叉轴项目对齐

6.1. align-content属性：

序号属性值描述
1stretch默认项目拉伸占据整个交叉轴
1flex-start所有项目与交叉轴起始线(顶部)对齐
2flex-end所有项目与交叉轴终止线对齐
3center所有项目与交叉轴中间线对齐: 居中对齐
4space-between两端对齐: 剩余空间在头尾项目之外的项目间平均分配
5space-around分散对齐: 剩余空间在每个项目二侧平均分配
6space-evenly平均对齐: 剩余空间在每个项目之间平均分配
注：

  • （1）该属性仅适用于多行容器

  • （2）多行容器中, 交叉轴会有多个项目, 剩余空间在项目之间分配才有意义

例：
    <style>        .dome{            width: 200px;            height: 200px;            display: flex;            flex-wrap: wrap;            align-content: flex-end;        }

    .dome{            width: 200px;            height: 200px;            display: flex;            flex-wrap: wrap;            align-content: space-around;        }

6.2. align-self属性：

序号属性值描述
1auto默认值继承 align-items 属性值
2flex-start与交叉轴起始线对齐
3flex-end与交叉轴终止线对齐
4center与交叉轴中间线对齐: 居中对齐
5stretch在交叉轴方向上拉伸
6baseline与基线对齐(与内容相关用得极少)
注：

  • 该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式

      .item:first-of-type{          height: initial;          align-self: stretch;      }      .item:nth-of-type(2){          align-self: flex-end;      }      .item:last-of-type{          align-self: center;      }

7. 项目放大因子

flex-grow属性：

  • （1）在容器主轴上存在剩余空间时, flex-grow才有意义

  • （2）该属性的值,称为放大因子

序号属性值描述
10默认值不放大,保持初始值
2initial设置默认值,与0等效
3n放大因子: 正数
例：
   <style>        .dome{            width: 300px;            height: 200px;            display: flex;            /* flex-wrap: wrap; */        }        .item {        width: 50px;        height: 50px;        background-color:red;        font-size: 3rem;      }      .item:first-of-type{          flex-grow: 1;      }      .item:nth-of-type(2){       background-color: lawngreen;       flex-grow: 2;      }      .item:last-of-type{        background-color: lightseagreen;        flex-grow: 3;      }    </style>

计算公式：

  • 300-（50）*3=150

  • 150/（1+2+3）=25

  • 则：第一个元素为：50=25=75px

  • 第二个元素为：50+25*2=100px

  • 第三个元素为：50+25*3=125px

8. flex 项目收缩因子

flex-shrink属性

序号属性值描述
11默认值允许项目收缩
2initial设置初始默认值,与 1 等效
30禁止收缩,保持原始尺寸
4n收缩因子: 正数
注：

  • 当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义

例：
    <style>        .dome{            width: 300px;            height: 200px;            display: flex;            flex-flow: row nowrap;        }        .item {        width: 150px;        height: 50px;        background-color:red;        font-size: 3rem;      }      .item:first-of-type{          flex-shrink: 1;      }      .item:nth-of-type(2){        background-color: lawngreen;        flex-shrink: 2;      }      .item:last-of-type{        background-color: lightseagreen;        flex-shrink: 3;      }    </style>

计算公式：

  • 三个元素共：150*3=450px

  • 算出应该收缩的大小：450-300=150px

  • 算出每一个收缩倍数所要收缩的大小：150/（1+2+3）=25px

  • 则：第一个元素的宽度应该是：150-25*1=125px

  • 第二个元素的宽度应该是：150-25*2=100px

  • 第三个元素的宽度应该是：150-25*3=75px

9. flex 项目计算尺寸

flex-basis属性

序号属性值描述
1auto默认值: 项目原来的大小
2px像素
3%百分比
注：

  • （1）在分配多余空间之前,项目占据的主轴空间

  • （2）浏览器根据这个属性，计算主轴是否有多余空间

  • （3）该属性会覆盖项目原始大小(width/height)

  • （4）该属性会被项目的min-width/min-height值覆盖

  • 即：优先级: 项目大小 < flex-basis < min-width/max-height

例：
    <style>        .dome{            width: 300px;            height: 200px;            display: flex;            flex-flow: row nowrap;        }        .item {        width: 50px;        height: 50px;        background-color:red;        font-size: 3rem;      }      .item:first-of-type{          flex-basis: 100px;      }      .item:nth-of-type(2){        background-color: lawngreen;        flex-basis: 30%;      }      .item:last-of-type{        background-color: lightseagreen;      }    </style>

10. flex 项目缩放的简写

  • 语法：flex: flex-grow flex-shrink flex-basis

三值语法：

序号属性值描述
1第一个值: 整数 (0/1)flex-grow
2第二个值: 整数(0/1)flex-shrink
3第三个值: 有效宽度flex-basis

双值语法：

序号属性值描述
1第一个值: 整数flex-grow
3第二个值: 有效宽度flex-basis

单值语法：

序号属性值描述
1整数flex-grow
2有效宽度flex-basis
3关键字initial / auto / none
序号案例描述
1flex: 1flex: 1 1 auto
2flex: 180pxflex: 1 1 180px
3initialflex: 0 1 auto
4autoflex: 1 1 auto
5noneflex: 0 0 auto
例：

三值语法：

      .item:first-of-type{      flex: 0 1 100px      }

二值语法：

      .item:first-of-type{      flex: 0 150px      }

总结：

  • （1）display:flex创建flex 块级容器而display:inline-flex创建flex 行内容器

  • （2）flex-flow是属性flex-direction和flex-wrap的简写。语法为： flex-flow: flex-direction flex-wrap

  • （3）justify-content属性仅当容器中主轴方向上存在剩余空间时, 该属性才有意义

  • （4）align-items属性仅适用于单行容器，且当容器中交叉轴方向上存在剩余空间时, 该属性才有意义

  • （5）align-content属性仅适用于多行容器，且剩余空间在项目之间分配才有意义

  • （6）align-self属性可以覆盖容器的align-items，用于自定义某个元素的对齐方式

  • （7）flex属性可以对扩大，收缩和项目计算尺寸进行简化。语法为：flex: flex-grow flex-shrink flex-basis

  • （8）当flex属性只有两个属性值时，语法为：flex: flex-grow flex-basis

  • （9）当flex属性只有一个属性值时，若是0/1，则为flex-grow;若为有效宽度是，则为flex-basis

上一条：简单了解PHP文件上传相关知识下一条：CSS之flex整体布局及使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多