「学习笔记」css - flex相关一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

概念

一、flex布局是什么

flex是flexible box的缩写，也就是弹性盒子

任何一个容器都可以变成flex布局

.box{
    display:flex;
}

行内元素也可以使用flex布局

.box{
  display:inline-flex;
}

webkit内核的浏览器，需要加-webkit-前缀

.box{   
  /*做兼容处理*/
  display:-webkit-flex;
  display:flex
}

当父元素设为flex布局后，子元素的float、clear和vertical-align属性都会失效

二、基本概念

采用flex布局的元素，称为flex容器，它的所有子元素都自动成为flex成员

容器存在两根轴线，默认情况下水平的是主轴，垂直的是交叉轴

三、容器的属性

以下6个属性设置在容器上：

属性名	作用
flex-direction	定义主轴方向
flex-wrap	当一条轴上放不下所有容器是，如何换行
flex-flow	flex-direction 和 flex-wrap的简写形式
justify-content	各项目在主轴的对齐方式
align-items	各项目在交叉轴对齐方式
align-content	容器拥有多条交叉轴时(发生换行时)，交叉轴上项目的排列方式

3.1 flex-direction属性

flex-direction 属性决定主轴的方向(即容器中每个项目的排列方向)

.box{
  flex-direction: row | row-reverse | column | column-reverse
}

它包含四个值

row(默认值)：主轴为水平方向，起点在左端
row-reverse: 主轴为水平方向，起点在右端
column: 主轴为垂直方向，起点在上沿
column-reverse: 主轴为垂直方向，起点在下沿

3.2 flex-wrap属性

默认情况下，所有项目都排列在一条轴线(主轴)上， flex-wrap属性用来定义，如果一条轴线排不下，如何换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse
}

该属性有三个值可取

（1）、no-wrap 默认值，不换行

即使容器指定了宽度，且所有容器宽度相加超过了父容器的宽度也不会换行，而是会将所有容器宽度平分父容器的宽度

像这样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper{
      width: 500px;
      height:300px;
      border:1px solid #bfa;
      display:flex;
    }
    .wrapper>.small{
      width:120px;
      height:100px;
      background:#c02c34;
      border-right:1px solid #000;
    }
  </style>
</head>
<body>
    <div class="wrapper">
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
    </div>
</body>
</html>

设置了父容器宽度为500px ，每个项目宽度120px, 宽度相加为600px, 但是父容器的 flex-wrap属性为nowrap，

实际显示会将项目进行压缩以填满整个容器

（2）、wrap: 按正常顺序换行，从上到下换行，第一行在最上面

此时遇到一个问题，假如父容器固定高度，子项目换行后，高度超出父容器，子元素会影响后面的元素的布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper{
      width: 500px;
      /* 父容器固定高度 */
      height:100px;
      border:1px solid #bfa;
      display:flex;
      /* 且设置宽度超出后换行 */
      flex-wrap:wrap;
    }
    .wrapper>.small{
      width:120px;
      /* 换行后高度会超出父元素 */
      height:100px;
      background:#c02c34;
      border-right:1px solid #000;
    }
    .box{
      width:200px;
      height:300px;
      background:#000;
      color:#fff;
    }
  </style>
</head>
<body>
    <div class="wrapper">
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
      <div class="small"></div>
    </div>
    <div class="box">
      欲买桂花同载酒，终不似，少年游
      <div style="width:100px;height:200px;background:#ccc"></div>
    </div>
</body>
</html>

会出现这样的情况：

（3）、wrap-reverse: 从下到上换行，第一行在最下面, 像这样👇🏻

3.3 flex-flow属性

flex-flow 属性是 flex-direction 属性和 flex-wrap属性的简写形式，默认值为 row nowrap

.box{
  flex-flow: row|row-reverse|column|column-reverse  nowrap|wrap|wrap-reverse
}

3.4 justify-content属性

定义项目在主轴上的对齐方式

.box{
  display:flex;
  justify-content: flex-start | flex-end | center | space-between | space-around
}

表现方式：

5个属性分别有一下含义(默认主轴为row)：

flex-start(默认值)：与主轴方向相同
flex-end: 与主轴方向相反
center: 居中
space-between: 两端对齐，项目之间的间隔都相等
space-around: 每个项目两侧的间隔相等，所以两项目之间的距离是项目拒边框距离的两倍

3.5 align-items 属性

定义项目在交叉轴上对齐方式

.box{
  align-items:flex-start | flex-end | center | baseline | stretch
}

表现方式：

align-items 的5个属性值分别有以下作用

flex-start: 交叉轴的起点对齐
flex-end: 交叉轴的终点对齐
center: 交叉轴的中点对齐
baseline: 每个项目第一行文字的基线对齐
stretch(默认值): 如果项目未设置高度或者设为auto，则默认高度占满整个容器

3.5 align-content 属性

align-content 属性定义了多根交叉轴上的对齐方式，如果项目只有一根交叉轴(也就是说没有换行过)，那么该属性不会起任何作用.

.box{
  align-content: flex-start | flex-end | center | space-between | space-around | stretch
}

表现形式：

align-content 的6个属性值分别有以下作用

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔是轴线与边界的两倍。
stretch（默认值）：拉伸每个项目，使他们的高度平分交叉轴所在的高度

四、项目的属性

对于项目而言，有以下6个属性：

属性	作用
order	值为整数，可以是负数，控制子项目在容器中的排列顺序
flex-grow	主轴有剩余空间时，项目如何进行拓展
flex-shrink	主轴空间不足以容纳所有项目时，项目如何缩放
flex-basis	描述flex项目占据的空间
flex	flex-grow、flex-shrink、flex-basis 三个属性的简写形式
align-self	设置当前项目在交叉轴上的对齐方式

4.1 order属性

order属性定义项目的排列顺序，默认值为0，也就是按照html书写的顺序在主轴上依次排列

.item{
    order: <integer>   /*必须是整数，默认为0， 可以为负数*/
}

表现形式如下：

4.2 flex-grow属性

flex-grow定义了当主轴上仍有剩余空间时，设置了该属性的弹性项目的拓展比例

默认值为0，即不会进行拓展

它的值必须为正数，可以是小数

.item{
  flex-grow: <number>
}

表现形式

当一行中有空余，且只有一个元素设置了flex-grow属性时

- flex-grow属性值 0 - 1 之间的小数，那么拓展的空间就是剩余空间✖️小数
- flex-grow属性值大于等于1，会独占所有剩余空间

当一行中有空余，且多个元素设置了flex-grow属性时

- 多个项目拓展系数之和<1时，可分配空间是剩余空间*拓展系数之和，

多个项目拓展系数之和 >= 1时，可分配空间就是 剩余空间

- 单个元素的拓展空间就是：

测试地址：codepen.io/us-y-l/pen/…

4.3 flex-shrink属性

flex-shrink属性定义的是：当前项目的缩放比例

即flex容器空间不足，且不换行的情况下，单个项目如何缩放

默认值为1，也就是所有项目一起收缩，如果设置为0，则不收缩，不可以设置为负值

.item{
  flex-shrink:<number>
}

flex-shrink类似于 flex-grow的反向操作，表现形式也极为相似

表现形式

假设容器宽度为400px, 里面有三个子项目，每个子项目宽度都是200px，所有子项目宽度累加为600px，那么收缩的尺寸就是超出容器部分的宽度，也就是200px

不需要考虑，几个元素设置了flex-shrink属性，没有设置的默认为1。

当需要缩放时，元素缩放后的宽度就是

测试地址：codepen.io/us-y-l/pen/…

4.4 flex-basis属性

felx-basis属性定义了在分配剩余空间之前元素的默认大小

.item{
  flex-basis: <length> | auto; 
}

该属性默认值为auto。如果有设置width则占据空间就是width，没有设置就是元素内容宽度。

如果同时设置了 flex-basis和width属性，那么会忽略掉width属性

4.5 flex属性

flex属性是 flex-grow、flex-shrink、flex-basis三个属性的简写，每个属性值之间空格相连，默认值为0 1 auto，后两个属性可不写

.item{
  flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

三种快捷定义方式：

flex默认值等同于flex:0 1 auto； (不拓展、等比收缩、宽度按项目占位来)
flex:none 等同于flex:0 0 auto； (不拓展、不收缩、宽度按项目占位来)
flex:auto 等同于flex:1 1 auto； (等比拓展、等比收缩、宽度按项目占位来)

4.6 flex-self属性

flex-self属性用来控制项目的交叉轴对齐方式

如果一个子项目上设置了flex-self属性，且其父容器设置了align-items属性，以子项目的flex-self为准

.item{
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性默认值为auto, 表示继承父容器的align-items属性。其他属性值含义与父容器的align-items属性值含义相同

参考文章：

www.zhangxinxu.com/wordpress/2…

css-tricks.com/snippets/cs…

www.ruanyifeng.com/blog/2015/0…

「学习笔记」css - flex相关

概念