4.display flex布局

flex基础

1. 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

2. flex设置居中：
   使用 flex 布局首先要设置父容器 display: flex，然后再设置 justify-content: center 实现水平居中，最后设置 align-items: center 实现垂直居中。

#dad{
    display: flex;
    justify-content:center;
    align-items:center
}

flex详解

屏幕快照 2018-07-15 18.58.10.png

屏幕快照 2018-07-15 18.40.53.png

屏幕快照 2018-07-15 18.41.01.png

1. 父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。

2. 父容器

• justify-content 设置子容器沿主轴排列方式
  1.位置排列： flex-start flex-end center
  2.分布排列 ： sapce-between sapce-around

• align-items 设置子容器如何沿交叉轴排列
  1.位置排列： flex-start flex-end center
  2.基线排列 ：baseline
  3.拉伸排列 ：stretch

2.子容器

• flex 子容器在主轴上如何伸缩
  子容器是有弹性的（flex 即弹性），它们会自动填充剩余空间，子容器的伸缩比例由 flex 属性确定。

flex 的值可以是无单位数字（如：1, 2, 3），也可以是有单位数字（如：15px，30px，60px），还可以是 none 关键字。子容器会按照 flex 定义的尺寸比例自动伸缩，如果取值为 none 则不伸缩。

虽然 flex 是多个属性的缩写，允许 1 – 3 个值连用，但通常用 1 个值就可以满足需求

屏幕快照 2018-07-15 18.51.26.png

• align-self 单独设置子容器如何沿交叉轴排列
  
  

  屏幕快照 2018-07-15 18.53.22.png

3. 父容器更多属性

flex-direction ：设置轴的方向

向右：flex-direction: row
向下 ：flex-direction: column
向左：flex-direction: row-reverse
向上：flex-direction: column-reverse

flex-wrap ：设置换行方式
nowrap：不换行
wrap：换行
wrap-reverse：逆序换行，是指沿着交叉轴的反方向换行。

flex-flow ：轴向与换行组合设置

align-content ：多行沿交叉轴对齐，当子容器多行排列时，设置行与行之间的对齐方式。
1.位置排列： flex-start flex-end center
2.分布排列 ： sapce-between sapce-around
3.拉伸排列 ：stretch

3. 子容器更多属性
   注： flex-basis flex-grow flex-shrink 简写为flex
   flex-basis ：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
   flex-grow 属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

屏幕快照 2018-07-15 19.25.19.png

flex-shrink 属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

屏幕快照 2018-07-15 19.25.28.png

4. order : 设置排列顺序：改变子容器的排列顺序，覆盖 HTML 代码中的顺序，默认值为 0，
可以为负值，数值越小排列越靠前。

flex58-47.png

总结记录：https://blog.csdn.net/xiaoyan_2015/article/details/75620201
https://www.cnblogs.com/lynnmn/p/6262941.html
https://blog.csdn.net/u013451157/article/details/79011679
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes