dispaly:flex； flex的理解

1. 是什么

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局

采用Flex布局的元素，称为flex容器container

它的所有子元素自动成为容器成员，称为flex项目item

容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向

每根轴都有起点和终点，这对于元素的对齐非常重要

2.属性

关于 flex 常用的属性，可以划分为容器属性和容器成员属性

容器属性有：

• flex-direction：决定主轴方向（即项目的排列方向），属性有row(默认)、row-reverse、column、column-reverse

  

• flex-wrap：决定容器内项目是否可以换行，属性有nowrap(默认)、wrap、wrap-reverse

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

• justify-content：定义了项目在主轴上的对齐方式，属性有flex-start、flex-end、center、space-between、space-around、space-evenly

  

  https://static.vue-js.com/0c9abc70-9838-11eb-ab90-d9ae814b240d.png

• align-items：定义项目在交叉轴上如何对齐，属性有flex-start、flex-end、center、baseline、stretch(默认值)

• align-content ：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用，属性有flex-start、flex-end、center、space-between、space-around、staretch(默认)

  

容器成员属性如下：

• order：定义项目的排列顺序。数值越小，排列越靠前，默认为0

• flex-grow：定义项目的放大比例（容器宽度>元素总宽度时如何伸展），默认为0，即如果存在剩余空间，也不放大

• flex-shrink：定义项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小

• flex-basis：设置的是元素在主轴上的初始尺寸，所谓初始尺寸就是元素在flex-grow 和 flex-shrick 生效前的尺寸

• flex：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，

  一些属性有：

  • flex: 1 = flex: 1 1 0%

  • flex: 2 = flex: 2 1 0%

  • flex: auto = flex: 1 1 auto

  • flex: none = flex: 0 0 auto，常用于固定尺寸不伸缩

• align-self：允许单个项目与其他项目不一样的对齐方式，可覆盖 align-items属性，默认为auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch

• 3.应用场景

通过flex简单粗暴的实现元素水平垂直方向的居中，以及在两栏三栏自适应布局中通过flex完成，包括现在在移动端、小程序这边的开发