在上一篇文章里我已经初步介绍了flex布局（其实只是谈了下容器和轴的概念），今天我想在这篇文章中介绍一下flex布局的具体实现方式和属性。
1，具体实现方式
flex布局的具体实现方式可以说非常直接和简单，只要你有一个父元素做容器和然后再有几个你想要排版的子元素做项目，最后在将父元素的display属性设置为flex即可实现，下面我将给出一个简单的例子：
<style>
.parent{
width:600px;
height:600px;
border:2px solid #000;
display:flex;
}
.child{
width:200px;
height:200px;
border:2px solid #000;
margin:20px;
}
</style>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
上面这样就可以实现一个最基本的flex布局的例子了，但这个例子其实没什么卵用，只是给个例子而已（毕竟什么属性都没设置，会变成什么样我也不知道啊）。
2，容器属性
flex布局中容器相关的属性为一下6个：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- item-align
- content-aligh
1）flex-direction 主轴方向
这个属性就很直白，字面意思，用来定义主轴的方向（其实我局的flex布局中使用的各种属性都挺直白的，简直良心！），这一属性有一下几个值：
- row //默认值。水平方向，从左到右
- row-reverse //水平方向，从右到左
- column //垂直方向，从上到下
- column-reverse //垂直方向，从下到上
一如既往的直白，只要看懂单词应该就能看懂系列（学这个我可是学会了好几个单词）。
2）flex-wrap 换行方式
这个属性决定了项目在容器内占满一行后的换行方式。分为以下几个属性：
- nowrap //默认值。不换行
- wrap //换行，第一行在上方
- wrap-reverse //换行，第一行在下方
关于这个属性，我觉得也很容易理解（如果有看过图文结合的那种文章相信大家能够手到擒来），这里我就稍微讲一下wrap和wrap-reverse的区别。wrap第一行在上方其实就是我们正常书写习惯中那种换行方式，从左到右，从上到下；而wrap-reverse中的第一行在下就是换行向上走，和书写习惯对照就是从左到右，从下到上。
3）flex-flow 项目排序方式
这个属性其实就是上面两个属性的结合，你懂我意思吧？说白了就是这个属性有两个值，一个来自flex-dircetion一个来自flex-wrap，你就看自己的需要自己组合就好了。
4）justify-content 主轴对齐方式
这个属性就如上面所说决定了主轴的对齐方式。就是在主轴的方向上，一行内（这里我用行可能不太严谨，主轴也有可能是垂直方向，那就是列了，但我确实想不到别的合适的形容方式，但大家能理解就行）项目如何去摆放。具体值有一下几个：
- flex-start //默认值。靠向main-start对齐（上一篇文章有写，我相信你懂得）
- flex-end //靠向main-start对齐
- center //居中对齐
- space-between //两端对齐，项目之间的距离相等
- space-around //每个项目直接的间距相等（因此项目之间的间距是项目与容器边界间距的两倍）
5）align-items 交叉轴对齐方式
类似于上一个属性，但这个属性的基准换成了交叉轴。这里我就直接说具体的值了，这和上面的也有一些出入：
- flex-start //靠向cross-start对齐
- flex-end //靠向cross-end对齐
- center //居中对齐
- baseline //以项目文本的第一行为基准对齐
- stretch //默认值。如果项目未设置高度（看主轴方向，有时候交叉轴是水平的，那就是宽度了）或为auto，占满容器高度（宽度）
这一属性大体上是和上面那个相同的，主要是后面两个值存在区别需要记忆一下。
6）align-content 双轴对齐方式
这个属性就是上面两种对齐方式的结合，但只有一个值，即两种轴上用同一种对齐方式。取值为justify-content的5种加上一个stretch（这个是默认值哦）。
本来我想今天结束这个问题的，但写着写着发现这个内容还是很复杂的一个问题，本着每天消化总结反思一点的想法，我今天就先写到这里了，最后剩下一个点就是容器的属性，我就明天再写了，同时在对这个内容做一个总结
网友评论