css flex 弹性布局详解

可以发现，设置为可以换行以后，子元素宽度变为100%屏幕宽了；这就像一个弹性盒子塞到了比自己小的盒子中，弹性盒子自动收缩了自己的宽度。

如果这样写：

.box{
display: -webkit-flex;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap-reverse; //换行，第一行在下方。
}

flex-flow

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

flex-flow：row wrap === flex-direction:row; flex-wrap: wrap

代码又改一下：

.box{
display: -webkit-flex;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap-reverse;
}
 可以写成
.box{
display: -webkit-flex;
display: flex;
flex-flow:row-veverse wrap-reverse
}

justify-content

它有五个值，其中如果把 item 比做word文档的文字的话, flex-star 可以看做是左对齐， flex-end： 右对齐； flex-center： 居中；

重点介绍值 space-around:平分内容空余空间，每个项目两侧的间隔相等;
设空余空间为 area，有子元素 k个，每个子元素等于增加了多少margin？==> area/2k

本例子：

.item{
width:200px;
}
.box{
display: -webkit-flex;
display: flex;
justify-content: space-around;
}

值得注意的是，项目之间的间隔比项目与边框的间隔大一倍。

space-between：两端对齐，项目之间的间隔都相等。不给

align-items

align 字样基本就知道它是针对 垂直方向的了；

.box{
display: -webkit-flex;
display: flex;
justify-content: space-between;
height: 1760px;
align-items: center;
 }

记得给父加一个高度；这样子可以看出元素垂直居中了

其他的相似的属性就不再一一写了

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

看 baseline属性: 项目的第一行文字的基线对齐。