flex布局学习整理

一.开启flex布局

在父元素中设置display:flex就可以愉快的使用flex布局了。

二.弹性盒子中常用的属性

属性	描述
flex-direction	元素的排列方式
justify-content	元素在主轴（横轴）方向上的对齐方式
align-items	元素在侧轴（交叉轴）方向上的对齐方式
flex-wrap	元素超出父容器时是否换行
align-content	修改 flex-wrap 属性的行为，类似align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

三.各属性详解

1.flex-direction 元素的排列方式 (定义在父容器)

排列方式也决定了主轴或者交叉轴，如果元素是水平排列的，那么主轴就是水平方向的这条轴(类似于X轴)，这时交叉轴就是垂直方向的(Y轴)，反之亦然。

语法：flex-direction: row(默认) | row-reverse | column | column-reverse

flex-direction: row(默认) 水平向右

flex-direction：row-reverse 反向排列（水平向左）

flex-direction：colum 竖向排列（垂直向下）

flex-direction：colum-reverse 反向竖向排列（垂直向上）

2.justify-content 元素在主轴上的对齐方式

语法：justify-content: flex-start(默认值) | flex-end | center | space-between | space-around

justify-conten：flex-start(默认值) 沿着主轴开始的位置对齐

justify-conten：flex-end 在主轴结束位置对齐

justify-conten：space-between

这里把上面设置的margin值去掉了

justify-content: space-around 让元素两边都有相等的空间

justify-content: center 居中对齐

再来一张W3C的图直观感受一下

3.align-items 元素在侧轴(交叉轴)上的对齐方式

语法：align-items: stretch(默认值)| flex-start | flex-end | center | baseline

align-items: stretch(默认值，只有在没有设置高度时才有效)

让子盒子的高度拉伸显示（默认值）,只有当当盒子内的子元素没有高度时,才会默认拉伸

align-items: flex-start 侧轴开始位置对齐

align-items: flex-end 侧轴结束位置对齐

align-items: center 侧轴居中对齐

4.flex-wrap 子元素超出父容器时是否换行

在flex布局中，默认是单行显示的，如果子元素的宽度之和超出了父元素的宽度，默认会压缩显示，如果需要设置子元素换行显示，需在父元素身上使用属性 flex-wrap

了解其中两个即可

属性	描述
nowrap	不换行(默认值)
wrap	换行

5.flex-flow (flex-direction 和 flex-wrap 的简写)
如：让元素竖向排列，必要时换行,可以简写为flex-flow: column wrap;

6.align-content 多行侧轴对齐方式

语法align-content: flex-start | flex-end | center | space-between | space-around | stretch，取值效果可参考align-items的取值效果，基本一样

之前align-items只是针对于单行的侧轴对齐方式，如果超出一行使用这个属性就无效了。

比如页面中有10个像刚才的红色div,我们想让让它们在主轴和侧轴的开始方向对齐(可理解为屏幕左上角)

		flex-direction: row; /*排列方向(默认值)*/
        justify-content: flex-start;/*主轴开始方向对齐(默认值)*/
        align-items: flex-start;/*在侧轴开始方向对齐*/
        flex-wrap: wrap;/*换行*/

用align-items：flex-start的话会显示这样

这显然不是我们想要的效果，把align-items：flex-start换成align-content: flex-start;就达到我们想要的效果了

7.order属性(设置在子元素身上)

设置弹性盒子中子元素的排列顺序，数值越小，排列靠前，默认都是0

刚才的红色div正常显示如下图

在它们身上分别加上order属性，效果如图

8.align-self(设置在子元素身上)

单个子元素侧轴对齐方式(和align-items取值一样)

我们在刚才的基础上分别在div加上align-self这个属性，效果如下图

9.flex 可理解为份数

按照份数分配父元素主轴（宽度）的剩余空间