search

博客列表 >CSS - flex布局（弹性布局）详解

CSS - flex布局（弹性布局）详解

晴天
晴天原创
2020年04月10日 18:06:451542浏览

1.flex可以做什么

  • 让容器里的每一个项目具有伸缩性，可以适应父级容器的大小进行动态的调整。

  • flex里面的每一个子元素叫做项目，父级元素叫做flex容器

  • 其实就是一个父元素一个子元素

2.flex 基本概念

  • flex是 flexible box 的缩写，意为弹性布局

  • flex 2009年出现，浏览器兼容性非常好

  • 块级元素垂直居中非常麻烦，而flex可以轻松解决。

  • 元素大小在容器中自动伸缩，适应容器的变化，非常适合响应式布局

3.flex项目的布局方向

  • 一个物体在应平面中要么垂直排列，要么水平排列，flex借鉴了这个思想

  • flex 是一维布局，项目任何时候只能延一个方向排列，要么水平要么垂直

  • flex 项目的排列方向称为主轴，水平和垂直两种

  • 与主轴垂直的叫做交叉轴，也成为‘副轴’‘侧轴’

  • 交叉轴始终与主轴垂直

4.flex 布局中的常用术语

简记 术语
二成员 容器和项目（container/item）
二根轴 主轴和交叉轴（main-axis/cross-axis）
二根线 起始线和终止线（flex-start/flex-end）

5.flex 容器与项目

5.1 display属性

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

5.2 flex容器与项目特征

容器/项目 默认行为
容器主轴 水平方向
项目排列 沿主轴起始线方向排列
项目类型 自动转换为行内块级元素，不管之前是什么类型
项目主轴空间不足时 自动收缩项目尺寸以适应空间变化，不会换行显示
项目主轴存在未分配空间时 项目保持自身大小，不会放大并充满空间

创建一个项目容器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>flex</title>
  7.     <style>
  8.       /* 创建容器 */
  9.       .container {
  10.         display: flex; /* 设置为flex属性 */
  11.         width: 300px;
  12.         height: 150px;
  13.       }
  14.       .item {
  15.         width: 100px;
  16.         height: 50px;
  17.         background-color: lightgreen;
  18.         font-size: 1.5rem;
  19.         text-align: center;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <div class="container">
  25.       <div class="item">1</div>
  26.       <div class="item">2</div>
  27.       <div class="item">3</div>
  28.       <div class="item">4</div>
  29.     </div>
  30.   </body>
  31. </html>

6.flex 容器属性

属性 描述
flex-direction 设置容器的主轴方向（水平/垂直）
flex-wrap flex项目一行排列不下时，是否允许换行
flex-flow 简化flex-direction、flex-wrap 属性
justify-content 设置flex项目在主轴上的对齐方式
align-items 设置flex项目在交叉轴上的对齐方式
align-content 多行容器中，项目在交叉轴上的对齐方式

6.1 flex-direction 主轴方向

属性值 描述
row默认值 水平方向：起始线居中项目从左到右显示
row-reverse 水平方向：起始线居右，项目从右向左显示
column 垂直方向：起始线居上，项目从上向下显示
column-reverse 垂直方向：起始线居下，项目从下向上显示

a.

  1.       .container {
  2.         width: 300px;
  3.         height: 150px;
  4.         display: flex; /* 设置为flex属性 */
  5.         flex-direction: row; /*默认 项目从左向右显示*/
  6.       }

b.

  1.  .container {
  2.         width: 300px;
  3.         height: 150px;
  4.         display: flex; /* 设置为flex属性 */
  5.         flex-direction: row-reverse; /*默认 项目从右向左显示*/
  6.       }

c.

  1. .container {
  2.         width: 300px;
  3.         height: 150px;
  4.         display: flex; /* 设置为flex属性 */
  5.         flex-direction: column; /*默认 项目从上向下显示*/
  6.       }

d.

  1. .container {
  2.         width: 300px;
  3.         height: 150px;
  4.         display: flex; /* 设置为flex属性 */
  5.         flex-direction: column-reverse; /*默认 项目从下向上显示*/
  6.       }

6.2 flex-wrap 是否允许换行

属性值 描述
nowrap默认值 项目不换行，宽度不够自行缩减每个项目的宽度
wrap 项目换行：多行容器第一行在上方
wrap-reverse 项目换行：多行容器第一行在下方

a.

  1. .container {
  2.         width: 300px;
  3.         height: 150px;
  4.         display: flex; /* 设置为flex属性 */
  5.         flex-wrap: nowrap; /*默认不换行*/
  6.       }

b.

  1. .container {
  2.         width: 300px;
  3.         height: 150px;
  4.         display: flex; /* 设置为flex属性 */
  5.         flex-wrap: wrap; /*换行*/
  6.       }

c.

  1. .container {
  2.         width: 300px;
  3.         height: 150px;
  4.         display: flex; /* 设置为flex属性 */
  5.         flex-wrap: wrap-reverse; /*换行 且 第一行在下方*/
  6.       }

6.3 flex-flow简化flex-direction、flex-wrap 属性

  1. .container {
  2.         width: 300px;
  3.         height: 150px;
  4.         display: flex; /* 设置为flex属性 */
  5.         flex-flow: row-reverse wrap; /*设置主轴方向从右往左且支持换行*/
  6.       }

6.4 justify-content设置flex项目在主轴上的对齐方式

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

属性值 描述
flex-start 默认 所有项目与主轴起始线对齐
flex-end 所有项目与主轴终止线对齐
center 所有项目与主轴中线对齐：居中对齐
space-between 两端对齐：剩余空间在头尾项目之外的项目间平均分配
space-around 分散对齐：剩余空间在每个项目两侧平均分配
space-evenly 平均对齐：剩余空间在每个项目之间平均分配

a.flex-start 所有项目与主轴起始线对齐

  1. .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         justify-content: flex-start; /*默认值  与主轴起始线对齐*/
  4.       }

b.flex-end所有项目与主轴终止线对齐

  1. .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         justify-content: flex-end; /*设置与终止线对齐*/
  4.       }

c.center所有项目与主轴中线对齐：居中对齐

  1. .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         justify-content: center;  /*居中对齐*/
  4.       }

d.space-between两端对齐：剩余空间在头尾项目之外的项目间平均分配

  1. .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         justify-content: space-between; /*除头尾项目之外的项目之间平均分配*/
  4.       }

e.space-around分散对齐：剩余空间在每个项目两侧平均分配

  1. .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         justify-content: space-around; /*每个项目两边平均分配*/
  4.       }

f.space-evenly平均对齐：剩余空间在每个项目之间平均分配

  1. .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         justify-content: space-evenly; /*在每个项目之间平均分配*/
  4.       }

6.5align-items设置flex项目在交叉轴上的对齐方式

该属性仅适用于单行容器，禁止换行的容器
当容器的交叉轴方向存在剩余空间时，该属性才有意义

属性值 描述
flex-start 默认 与交叉轴起始线对齐
flex-end 与交叉轴终止线对齐
center 与交叉轴中间线对齐

a.flex-start 与交叉轴起始线对齐

  1. .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         align-items: flex-start;
  4.       }

b.flex-end 与交叉轴终止线对齐

  1. .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         align-items: flex-end;
  4.       }

c.center与交叉轴中间线对齐

  1. .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         align-items: center;
  4.       }

6.6align-content多行容器中，项目在交叉轴上的对齐方式

该属性仅适用于多行容器，允许换行的容器

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

属性值 描述
stretch 默认 项目拉伸占据整个交叉轴
flex-start 所有项目与交叉轴起始线对齐
flex-end 所有项目与交叉轴终止线对齐
center 所有项目与交叉轴中间线对齐
space-between 两端对齐:剩余空间再有为项目之外的项目间对齐
sapce-around 分散对齐：剩余空间在每个项目两侧平均分配
space-evenly 平均对齐：剩余空间在每个项目之间平均分配

a.stretch 默认|项目拉伸占据整个交叉轴

当项目没有设置高度时生效

  1.    .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         flex-flow: row wrap;
  4.         align-content: stretch; /*默认值*/
  5.       }
  7.  .item {
  8.         width: 50px;
  9.         /* height: 50px; */ /*不设置高度*/
  10.         background-color: lightgreen;
  11.         font-size: 1.5rem;
  12.         text-align: center;
  13.       }

b.flex-start|所有项目与交叉轴起始线对齐

  1. .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         flex-flow: row wrap;
  4.         align-content: flex-start;
  5.       }

c.flex-end|所有项目与交叉轴终止线对齐

  1. .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         flex-flow: row wrap;
  4.         align-content: flex-end;
  5.       }

d.center|所有项目与交叉轴中间线对齐

  1.  .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         flex-flow: row wrap;
  4.         align-content: center;
  5.       }

e.space-between|两端对齐:剩余空间再有为项目之外的项目间对齐

  1.  .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         flex-flow: row wrap;
  4.         align-content: space-between;
  5.       }

f.sapce-around|分散对齐：剩余空间在每个项目两侧平均分配

  1. .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         flex-flow: row wrap;
  4.         align-content: space-around;
  5.       }

g.space-evenly|平均对齐：剩余空间在每个项目之间平均分配

  1.   .container {
  2.         display: flex; /* 设置为flex属性 */
  3.         flex-flow: row wrap;
  4.         align-content: space-evenly;
  5.       }

7.flex 项目属性

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

7.1flex-basis|项目宽度：项目分配主轴剩余空间之前，项目所占的主轴空间宽度

在分配空间之前，项目占据的主轴空间
浏览器根据这个属性计算主轴是否有多余空间
该属性会覆盖项目原始大小（width``height）
该属性会被项目的max-width``min-width值覆盖

属性 描述
auto 默认值，项目原来的大小
px 像素
% 百分比

优先级：项目大小 < flex-basis < min-width/height
当值设为auto当前值等于width值

7.2flex-grow|项目宽度扩展：将主轴上的剩余空间按比例分配给指定项目

项目放大因子
在容器主轴上存在剩余空间时，flex-grow才有意义
该属性的值，称为放大因子

属性值 描述
0默认 不放大保持初始值
initial 设置默认值，与0等效
n 放大因子：正数 
  1.       /* 创建容器 */
  2.       .container {
  3.         width: 300px;
  4.         height: 200px;
  5.         display: flex; /* 设置为flex属性 */
  6.       }
  7.       .item {
  8.         width: 50px;
  9.         height: 50px;
  10.         background-color: lightgreen;
  11.         font-size: 1.5rem;
  12.       }
  13.       /* 给第一个项目设置初始值，不放大允许缩小 */
  14.       .item:first-of-type {
  15.         flex-grow: initial;
  16.         background-color: khaki;
  17.       }
  18.       /* 给第二个项目设置3 */
  19.       .item:nth-of-type(2) {
  20.         flex-grow: 3;
  21.         background-color: lawngreen;
  22.       }
  23.       /* 给最后一个项目设置2 */
  24.       .item:last-of-type {
  25.         flex-grow: 2;
  26.         background-color: lightblue;
  27.       }
  29.       /* 开始计算
  30.       当前容器宽度为300，每个项目宽度为50 总宽度150
  31.       剩余150宽度进行分配
  32.       第二个项目得 3 份  第三个得 2 份 共计5份
  33.       150/5=30
  34.       第二个项目宽度为  50 + （3*30）=140
  35.       第三个项目宽度为  50 + （2*30）=110 */

7.3flex-shrink|项目宽度收缩：将项目多处空间按比例在项目间缩减

项目收缩因子
当容器主轴空间不足且禁止换行时，flex-shrink才有意义
该属性值称为收缩因子

属性值 描述
1默认值 允许项目收缩
initial 设置初始默认值，与1等效
0 禁止收缩
n 收缩因子：正数

初始效果

  1.   /* 创建容器 */
  2.       .container {
  3.         width: 180px; /*容器宽度180*/
  4.         height: 200px;
  5.         display: flex; /* 设置为flex属性 */
  6.         flex-flow: row nowrap;
  7.       }
  8.       .item {
  9.         width: 150px;
  10.         height: 50px;
  11.         background-color: lightgreen;
  12.         font-size: 1.5rem;
  13.         flex-shrink: 0; /*禁止收缩*/
  14.       }

当前容器只有这么大，项目被撑出去了

使用后效果

  1.        /* 创建容器 */
  2.         .container {
  3.           width: 180px; /*容器宽度180*/
  4.           height: 200px;
  5.           display: flex; /* 设置为flex属性 */
  6.           flex-flow: row nowrap;
  7.         }
  8.         .item {
  9.           width: 100px;
  10.           height: 50px;
  11.           background-color: lightgreen;
  12.           font-size: 1.5rem;
  13.           flex-shrink: 0; /*禁止收缩*/
  14.         }
  15.         /* 给第一个项目设置1 */
  16.         .item:first-of-type {
  17.           background-color: khaki;
  18.           flex-shrink: 1;
  19.         }
  20.         /* 给第二个项目设置3 */
  21.         .item:nth-of-type(2) {
  22.           background-color: lawngreen;
  23.           flex-shrink: 3;
  24.         }
  25.         /* 给最后一个项目设置2 */
  26.         .item:last-of-type {
  27.           background-color: lightblue;
  28.           flex-shrink: 2;
  29.         }
  31.       /* 开始计算
  32.       当期容器总宽度180
  33.       当前项目总宽度100*3=300
  34.       当前多出宽度300-180=120
  35.       项目收缩份数 1+3+2=6
  36.       每份 120*6=20
  37.       第一个项目收缩20 宽度变成80
  38.       第二个项目收缩3*20=60 宽度变成40
  39.       第三个项目收缩2*20=40 宽度变成60 */

效果图

7.4flex|上面三个属性的简化缩写，flex:flex-grow flex-shrink flex-basis;

7.4.1三值语法

属性值 描述
第一个值：整数 flex-grow
第二个值：整数 flex-shink
第三个值：有效宽度 flex-basis

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

7.4.2双值语法

属性值 描述
第一个值：整数 flex-grow
第二个值：有效宽度 flex-basis

举例

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

7.4.3 单值语法

属性值 描述
整数 flex-grow
有效宽度 flex-basis
关键字 initial;auto;none

举例

案例 描述
flex:1 flex:1 1 auto
flex:180px flex:1 1 180px
initial flex:0 1 auto
auto flex:1 1 auto
none flex:0 0 auto

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

7.5align-self|单独定义某个项目在交叉轴的对齐方式

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

属性 属性值
auto 默认值 继承align-items属性
flex-start 与交叉轴起始线对齐
flex-end 与交叉轴终止线对齐
center 与交叉轴中间线对齐
stretch 在交叉轴方向上拉伸
baseline 与基线对齐（与内容相关用的极少）

a.auto 默认值|继承align-items属性
无变化

b.

  1.   /* 设置第一个项目拉伸 */
  2.       /* 注意拉伸必须没有绝对高度 */
  3.       .item:first-of-type {
  4.         height: inherit; /*高度跟随父级*/
  5.         align-self: stretch; /*交叉轴拉伸*/
  6.         background-color: khaki;
  7.       }
  8.       /* 设置第二个项目与交叉轴起始线对齐 */
  9.       .item:nth-of-type(2) {
  10.         align-self: flex-start;
  11.         background-color: saddlebrown;
  12.       }
  14.       /*设置第三个项目与交叉轴终止线对齐*/
  15.       .item:nth-of-type(3) {
  16.         align-self: flex-end;
  17.         background-color: sandybrown;
  18.       }
  20.       /*设置第四个项目与中间线对齐*/
  21.       .item:nth-of-type(4) {
  22.         align-self: center;
  23.         background-color: skyblue;
  24.       }
  25.       /*设置最后一个项目与基线对齐*/
  26.       .item:last-of-type {
  27.         align-self: baseline;
  28.         background-color: tomato;
  29.       }

7.6oeder|自定义项目在主轴上的排列顺序，默认为0，书写顺序，值越小位置越靠前

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

a. 给第一个项目设置顺序1

  1. .item:first-of-type {
  2.         order: 1;
  3.       }

b.给第三个项目设置顺序2

  1. .item:nth-of-type(3) {
  2.         order: 2;
  3.       }

8.总结

flex共有12大属性，其中6个容器属性6个项目属性。

六个容器属性：
flex-direction flex-wrap flex-flow justify-content align-items align-content

可以不用前两个 直接用flex-flow进行缩写

6个项目属性：

flex-basis flex-grow flex-shrink flex align-self oeder

可以不用前三个属性，直接用flex进行缩写

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

相关文章

查看更多