4.display flex布局

2018-07-15 本文已影响15人 yaoyao妖妖

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
flex设置居中：
使用 flex 布局首先要设置父容器 display: flex，然后再设置 justify-content: center 实现水平居中，最后设置 align-items: center 实现垂直居中。

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

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

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

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

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

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

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

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

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

子容器更多属性
注： 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