挺早就接触了css的flex布局，深入使用也就是在近期移动端开发。老来多健忘，只能自己梳理一下知识点，当做温故知新吧。
，请原谅小白的才疏学浅，写的不到位的地方请指正。
flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间。也就是说当某个div使用了flex后，div也就成为了flex容器，
里面的子项即使使用float，vertical-align、clear这些属性也是无法生效的，到这里其实还是一头雾水。那么我们先来看一下flex的6个属性。
1、flex-direction，顾名思义，direction就是方向的意思。使用flex后，容器默认会有两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
ps：我个人理解是X轴和Y轴，这样方便自己记忆，下面就使用X（水平轴）和Y（交叉轴）来说明。
那么知道容器存在X轴Y轴以后，再回到这个属性上来理解就容易多了，首先可以是X轴的排列方向，也就是通俗的左对齐和右对齐，然后是Y轴的纵对齐，看下面列出来的值就简单明了了
首先row就是默认的左对齐，紧接着的row-reverse就是反向了，也就是右对齐。然后column就是纵对齐了，最后一个属性也是反向了。如果还不明白就看下面几张图
2、flex-wrap，css中看到wrap都跟行有关，那么其实也就是换不换行了，属性值默认是不换行，也就是nowrap。设置flex-wrap：wrap就是换行了。
flex-wrap：wrap-reverse就不用再说了吧，就是反过来，wrap换行开始是第一行在上，reverse就是最后一行在上面了。
3、flex-flow，该属性可以将刚才上面的两个属性串联起来，例如flex-flow：row-rever wrap。比较简单就不写那么详细了
4、justify-content，很明显就是容器内容的对齐属性了。不过在内容对齐时，得先看flex-direction的值是关于哪条轴对齐了。
flex-start：在主轴上由左或者上开始排列；
flex-end：在主轴上由右或者下开始排列；
center：在主轴上居中排列 ；
space-between：在主轴上左右两端或者上下两端开始排列
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
前面3个比较容易懂，后面两个值是什么意思呢，无图言吊，直接上图
space-between值就是两边对齐后，剩下的空间平均分配，space-around其实也就是每个子项都有着相同的margin-left和margin-right。
5、align-items，该属性有5个值： flex-start ，flex-end ， center ， baseline ， stretch。
很容易与下面记录的第6个属性align-content混淆，先来简单的区分一下：align-content是使用时是针对于多行内容下，而align-items是单行或者多行内容都可以使用，这样一分就清晰很多了。现在来看一下几个属性值的demo图
6、align-content，该属性有5个值： flex-start ，flex-end ， center ， space-between，space-around， stretch。详情看下面demo图
两个月没记录学习内容了，发生了太多事，这一年带走了太多东西。大家天冷记得添衣，共勉。
莫问闲愁都几许
一川烟草
满城飞絮
梅子黄时雨
原文地址：https://www.cnblogs.com/xzhan/p/10031691.html