flex弹性布局最全介绍

1. 父元素id为flex,子元素class为items

        

#flex {

  width: 100%;

  height: 100%;

  display: flex;

  padding:15px;

  padding-top: 200px;

  border: 1px solid red;

  box-sizing: border-box;

}

#flex .items {

  width: 18%;

  border: 1px solid blue;

  height: 200px;

}

效果如下图

2. flex-direction 在flex容器里的所有的block元素的流动方向

row 默认，从左到右
column 从上到下
row-reverse 从右到左
column-reverse 从上到下

父元素添加 flex-direction: row;

父元素添加flex-direction:row-reverse

父元素添加flex-direction:column

父元素添加flex-direction:column-reverse

3. flex-wrap 控制如果当前行的位置不足时，是否换行，默认是不换行，会一直在一行中挤压，会改变在该行元素的宽度，将其排在一行之中

nowrap 不换行

wrap 换行，空间不足，就向下另起一行。

wrap-reverse 换行，与wrap不同的是，这个是向当前行的上面另起一行。

注意：flex-direction和flex-wrap经常一起使用所有有个缩写属性flex-flow:flex-direction flex-wrap。

父元素添加flex-flow:row nowrap;

父元素添加flex-flow:row wrap;

父元素添加flex-flow:row wrap-reverse;

4. justify-content

主轴的对齐方式，元素在容器中的对齐方式，与左对齐，右对齐，居中对齐类似

取值：

flex-start 靠近主轴的开始方向，如果从左到右就靠左，相反就靠右。

flex-end 靠近主轴的结束方向，如果从左到右就靠右，相反就靠左。

center 居中，在主轴的中间

space-between 空隙在两者之间，分散开来，两边分别到主轴的开始和结束位置。

space-around 空隙是在元素周围，每个元素主轴方向两边都有相同空隙，相邻的空隙不合并。

space-evenly 空隙平均分配，然后将元素进行分隔，空隙份数=元素个数+1

父元素添加justify-content: flex-start;

父元素添加justify-content: flex-end;

父元素添加justify-content: center;

父元素添加justify-content: space-between;

父元素添加justify-content: space-around;

父元素添加justify-content: space-evenly;

5. align-items

控制次轴对齐方式，如果主轴为横轴，次轴就为纵轴；主轴为纵轴，次轴就为横轴。如果元素的高度或宽度不一致时，就需要通过控制次轴来调整想要的对齐方式。对单行内容进行操作。当设置高度的元素少于等于1个时，默认为stretch；当设置高度的元素大于1个，则设置高度的与其它的按照flex-start对齐。

取值：

flex-start 每个元素的顶端与次轴开始的位置对齐

flex-end 每个元素的末端与次轴结束的位置对齐

center 每个元素的中间与次轴开始到结束的中间对齐

stretch 将所有的元素的高度或宽度变得都为父元素的高度或宽度来对齐（如果元素设置高度或宽度就会失效，只有当没有设置高度或宽度，因为自身里面的内容导致的高度或宽度不同的，会使其它元素都变成内容最多的元素的高度或宽度）

baseline 将每个元素的基线（每种字体都有各自的基线）与次轴开始到结束的中间对齐

父元素添加align-items:flex-start

父元素添加align-items:flex-end

父元素添加align-items:center;

父元素添加align-items:stretch ;

父元素添加align-items:baseline ;

6.align-content

当有多排的时候的对齐方式，很少用到。默认为样式与stretch一致

父元素添加 flex-wrap: wrap; align-content: flex-start;父元素顶部

父元素添加 flex-wrap: wrap; align-content: flex-end;父元素底部

父元素添加 flex-wrap: wrap; align-content: center;父元素中间

父元素添加 flex-wrap: wrap; align-content: stretch;

父元素添加 flex-wrap: wrap; align-content: space-between;

父元素添加 flex-wrap: wrap; align-content: space-around;

7. 对容器里面的元素进行操作的属性：

order

决定元素的排列顺序（如果设置了，就可能不按照书写顺序排列了）。默认都为0，可以设置order的数值，最小的在前面，大的去后面。可以为赋值，都按照数字本身的大小排列。

flex-grow

当元素不设置宽度（高度）时，默认是内容的宽度（高度），如果想要将剩余的空间分配到每个元素上面，就可以通过设置flex-grow来实现按需分配。

#flex .items:nth-child(1) {

  height: 50px;

  flex-grow: 1;

}

#flex .items:nth-child(2) {

  height: 10px;

  flex-grow: 2;

}

#flex .items:nth-child(3) {

  height: 20px;

  flex-grow: 2;

}

#flex .items:nth-child(4) {

  height: 50px;

  flex-grow: 1;

}

按照上图所示：
就将剩余的空间分为6份，item1占1份（flex-gtow:1）,item2占2份（flex-gtow:2）,item3占2份（flex-gtow:2），item4占1份（flex-gtow:1）

flex-shrink

控制如何变瘦，当我们不允许换行时，即flex-wrap:nowrap，这时空间不时，那个元素的空间进行挤压和挤压的比例是由flex-shrink来控制的，默认都为1。当值为0时，该元素不进行挤压。值越大，变瘦的速度越快。

flex-basis

控制基准宽度的，默认值为auto。取值和width、height相同

mdn上的解释: flex-basis指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。 当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级.

flex：flex-grow flex-shrink flex-basis

简写属性，可以将flex-grow、flex-shrink、flex-basis这三个用一个来表示。使用缩写时，要不三个都写，要不只写flex-grow，要不就写flex-grow和flex-basis，其它写法无效。

align-self

当我在容器中设置了里面的元素的次轴的对齐方式（align-items）时，想要让其中一个不按照这个对齐方式，就可以在这个元素里加上align-self，设置它自己的对齐方式。

取值：

flex-start

flex-end