search

博客列表 >Flex布局的详解

Flex布局的详解

雪~人胖胖
雪~人胖胖原创
2020年04月15日 15:20:01480浏览

1. Flex（弹性布局）

  • flex里面的每一个子元素叫做项目，父级元素叫做flex容器。
  • 让每一个项目具有伸缩性，可以适应父级容器的大小进行动态的调整。
  • flex 是一维布局，项目任何时候只能延一个方向排列，要么水平要么垂直
  • flex 项目的排列方向称为主轴，水平和垂直两种

2. flex 布局中常用术语有哪些(三个二)

序号 简记 术语
1 二成员 容器和项目(container / item)
2 二根轴 主轴与交叉轴(main-axis / cross-axis)
3 二根线 起始线与结束线(flex-start / flex-end)

3. display属性

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

4.flex 容器属性有哪些

序号 属性 描述
1 flex-direction 设置容器中的主轴方向: 行/水平方向, 列/垂直方向
2 flex-wrap 是否允许创建多行容器,即 flex 项目一行排列不下时, 是否允许换行
3 flex-flow 简化 flex-direction, flex-wrap 属性
4 justify-content 设置 flex 项目在主轴上对齐方式
5 align-items 设置 flex 项目在交叉轴上对齐方式
6 align-content 多行容器中,项目在交叉轴上的对齐方式

设置flex布局

  1.     <style>
  2.       .container {
  3.         height: 150px;
  4.         border: 1px solid;
  5.         width: 200px;
  6.         display: flex;
  8.       }
  9.       .container > div {
  10.         width: 60px;
  11.         height: 50px;
  12.         border: 1px solid;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <div class="container">
  18.       <div>项目1</div>
  19.       <div>项目2</div>
  20.       <div>项目3</div>
  21.       <div>项目4</div>
  22.     </div>
  23.   </body>

图例

4.1. flex-direction属性

序号 属性值 描述
1 row默认值 主轴水平: 起始线居中,项目从左到右显示
2 row-reverse 主轴水平:起始线居右, 项目从右向左显示
3 column 主轴垂直: 起始线居上,项目从上向下显示
4 column-reverse 主轴垂直: 起始线居下,项目从下向上显示

4.2. flex-wrap属性

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

横向换行

  1.    .container {
  2.         height: 150px;
  3.         border: 1px solid;
  4.         width: 200px;
  5.         display: flex;
  6.         flex-direction: row;
  7.         flex-wrap: wrap;
  8.       }

图例

column-reverse+不换行

  1.    .container {
  2.         height: 150px;
  3.         border: 1px solid;
  4.         width: 200px;
  5.         display: flex;
  6.         flex-direction: column-reverse;
  7.         flex-wrap: nowrap;
  8.       }

图例

4.3 flex-flow属性

  • flex-flow是属性flex-direction和flex-wrap的简写
  • 语法: flex-flow: flex-direction flex-wrap
属性值 描述
row nowrap默认值 主轴水平, 项目不换行

4.4. justify-content属性

当容器中主轴方向上存在剩余空间时, 该属性才有意义

序号 属性值 描述
1 flex-start默认 所有项目与主轴起始线对齐
2 flex-end 所有项目与主轴终止线对齐
3 center 所有项目与主轴中间线对齐: 居中对齐
4 space-between 两端对齐: 剩余空间在头尾项目之外的项目间平均分配
5 space-around 分散对齐: 剩余空间在每个项目二侧平均分配
6 space-evenly 平均对齐: 剩余空间在每个项目之间平均分配 
  1.     <style>
  2.       .container {
  3.         height: 150px;
  4.         border: 1px solid;
  5.         width: 400px;
  6.         display: flex;
  7.         flex-direction: row;
  8.         flex-wrap: nowrap;
  9.         justify-content: space-evenly;
  10.       }
  11.       .container > div {
  12.         width: 60px;
  13.         height: 50px;
  14.         border: 1px solid;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <div class="container">
  20.       <div>项目1</div>
  21.       <div>项目2</div>
  22.       <div>项目3</div>
  23.       <div>项目4</div>
  24.     </div>
  25.   </body>

图例：平均对齐

4.5 align-items属性

  • 该属性仅适用于: 单行容器
  • 当容器中交叉轴方向上存在剩余空间时, 该属性才有意义
序号 属性值 描述
1 flex-start默认 与交叉轴起始线对齐
2 flex-end 与交叉轴终止线对齐
3 center 与交叉轴中间线对齐: 居中对齐 
  1.   .container {
  2.         height: 150px;
  3.         border: 1px solid;
  4.         width: 400px;
  5.         display: flex;
  6.         flex-direction: row;
  7.         flex-wrap: nowrap;
  8.         justify-content: space-evenly;
  9.         align-items: center;
  10.       }

图例：居中对齐

4.6align-content属性

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

提示: 多行容器中通过设置flex-wrap: wrap | wrap-reverse实现

  1.   .container {
  2.         height: 150px;
  3.         border: 1px solid;
  4.         width: 400px;
  5.         display: flex;
  6.         flex-flow: row wrap;
  7.         align-content: center;
  8.       }

图例：居中对齐

5. flex 项目属性有哪些

序号 属性 描述
1 flex-basis 项目宽度: 项目分配主轴剩余空间之前, 项目所占据的主轴空间宽度
2 flex-grow 项目的宽度扩展: 将主轴上的剩余空间按比例分配给指定项目
3 flex-shrink 项目的宽度收缩: 将项目上多出空间按比例在项目间进行缩减
4 flex 是上面三个属性的简化缩写: flex: flex-grow flex-shrink flex-basis
5 align-self 单独自定义某个项目在交叉轴上的对齐方式
6 order 自定义项目在主轴上的排列顺序,默认为 0,书写顺序,值越小位置越靠前

5.1 flex-basis属性

  • 在分配多余空间之前,项目占据的主轴空间
  • 浏览器根据这个属性，计算主轴是否有多余空间
  • 该属性会覆盖项目原始大小(width/height)
  • 该属性会被项目的min-width/min-height值覆盖
序号 属性值 描述
1 auto 默认值: 项目原来的大小
2 px 像素
3 % 百分比

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

  1.     .container > div {
  2.         box-sizing: border-box;
  3.         width: 60px;
  4.         height: 50px;
  5.         border: 1px solid;
  6.         flex-basis: 80px;
  7.       }

图例

5.2flex-grow属性

  • 在容器主轴上存在剩余空间时, flex-grow才有意义
  • 该属性的值,称为放大因子, 常见的属性值如下:
序号 属性值 描述
1 0默认值 不放大,保持初始值
2 initial 设置默认值,与0等效
3 n 放大因子: 正数 
  1.    <style>
  2.       .container {
  3.         height: 100px;
  4.         border: 1px solid;
  5.         width: 270px;
  6.         display: flex;
  7.         flex-flow: row nowrap;
  8.       }
  9.       .container > div {
  10.         box-sizing: border-box;
  11.         width: 50px;
  12.         height: 50px;
  13.         border: 1px solid;
  14.       }
  15.       .container > div:first-of-type {
  16.         flex-grow: 1;
  17.       }
  18.       .container > div:nth-of-type(2) {
  19.         flex-grow: 2;
  20.       }
  21.       .container > div:nth-of-type(3) {
  22.        /* (270px - 3*50px)=120px 剩余的width
  23.         120px/（1+2+3）=20px 每一份因子分得的空间
  24.         第三个div的总大小就是50px+3*20px=110px */
  25.         flex-grow: 3;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div class="container">
  31.       <div>项目1</div>
  32.       <div>项目2</div>
  33.       <div>项目3</div>
  34.     </div>
  35.   </body>

图例

5.3flex-shrink属性

  • 当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义
  • 该属性的值,称为收缩因子, 常见的属性值如下:
序号 属性值 描述
1 1默认值 允许项目收缩
2 initial 设置初始默认值,与 1 等效
3 0 禁止收缩,保持原始尺寸
4 n 收缩因子: 正数 
  1.       .container {
  2.         height: 100px;
  3.         border: 1px solid;
  4.         width: 250px;
  5.         display: flex;
  6.         flex-flow: row nowrap;
  7.       }
  8.       .container > div {
  9.         box-sizing: border-box;
  10.         width: 90px;
  11.         height: 50px;
  12.         border: 1px solid;
  13.       }
  14.       .container > div:first-of-type {
  15.         flex-shrink: 1;
  16.       }
  17.       .container > div:nth-of-type(2) {
  18.         flex-shrink: 2;
  19.       }
  20.       .container > div:nth-of-type(3) {
  21.         flex-shrink: 3;
  22.       }

计算方式与放大相同
图例

5.4align-self属性

  • 该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式
序号 属性值 描述
1 auto默认值 继承 align-items 属性值
2 flex-start 与交叉轴起始线对齐
3 flex-end 与交叉轴终止线对齐
4 center 与交叉轴中间线对齐: 居中对齐
5 stretch 在交叉轴方向上拉伸
6 baseline 与基线对齐(与内容相关用得极少) 
  1.    .container > div:last-of-type {
  2.         align-self: center;
  3.       }

图例

5.5 flex 项目缩放的简写

5.5.1flex属性

  • 项目放大,缩小与计算尺寸,对于项目非常重要,也很常用
  • 每次都要写这三个属性,非常的麻烦,且没有必要
  • flex属性,可以将以上三个属性进行简化:
  • 语法: flex: flex-grow flex-shrink flex-basis

5.5.2三值语法

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

举例:

序号 案例 描述
1 flex: 0 1 auto 默认值: 不放大,可收缩, 初始宽度
2 flex: 1 1 auto 项目自动放大或收缩适应容器
3 flex: 0 0 100px 按计算大小填充到容器中

5.5.3双值语法

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

举例:

案例 描述
flex: 0 180px 禁止放大,按计算大小填充到容器中

5.5.4单值语法

序号 属性值 描述
1 整数 flex-grow
2 有效宽度 flex-basis
3 关键字 `initial auto none`

举例:

序号 案例 描述
1 flex: 1 flex: 1 1 auto
2 flex: 180px flex: 1 1 180px
3 initial flex: 0 1 auto
4 auto flex: 1 1 auto
5 none flex: 0 0 auto

推荐使用flex, 就像推荐使用flex-grow设置主轴与换行一样

5.6 order的用法

默认值为0 值越小越靠前，值越大越靠后 顺序支持负数

  1.   <style>
  2.       .container {
  3.         height: 100px;
  4.         border: 1px solid;
  5.         width: 250px;
  6.         display: flex;
  7.         flex-flow: row nowrap;
  8.       }
  9.       .container > div {
  10.         box-sizing: border-box;
  11.         width: 90px;
  12.         height: 50px;
  13.         border: 1px solid;
  14.       }
  15.       .container > div:first-of-type {
  16.         order: 1;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <div class="container">
  22.       <div>项目1</div>
  23.       <div>项目2</div>
  24.       <div>项目3</div>
  25.     </div>
  26.   </body>

图例

总结

flex共有12大属性，其中6个容器属性6个项目属性，其中flex-direction和flex-wrap可以用flex-flow缩写，flex-grow,flex-shrink,flex-basis可以用flex缩写，东西有点多要花点时间记忆。

上一条：php中文网移动端首页布局实例（flex布局，包括字体图标的引用）下一条：JavaScript 常用对象
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多