Flex布局之父元素属性的总结

flex布局之父元素的属性

这是在学习小程序的时候，建议使用flex布局，所以就学习了flex布局，尽管之前也听说了flex布局的好处，在分析css框架的时候也经常看见过，但是却从未真正使用过。。。我是参考了CSDN里的博客写的，地址如下

CSDN：flex布局

---

所有的flex布局必须把父元素的display设置成flex,才能够使用flex布局

display:flex;

父元素下的子元素都可以称为一个item，接下来就是控制item们的方向了

flex-direction:row||column||row-reverse||column-reverse

1. row 属性 就是在一行排布
2. column 属性 就是在列排布
3. row-reverse 属性 就是和row反着干
4. column-reverse 属性 就是和 column反着干

有时候内容过多我们需要换行，就像textarea一样，文字过多就会自动换行

flex-wrap:nowrap||wrap||wrap-reverse;

1. nowarp 属性 很好理解，就是不换行了

2. wrap 属性 也很好理解，就是正常的换行

3. wrap-reverse 属性 特殊点是换行的时候第一行会跑到下面

有个属性综合上述两个属性，类似background类型的属性啦

flex-flow：<flex-direction>||<flex-wrap> 默认值是 row 和 nowrap

水平方向的item们的对齐方式

justify-content:flex-start || flex-end || center || space-between || space-around

1. flex-start 就是右对齐
2. flex-end 从右开始到左结束，所以是左对齐啦
3. center 居中对齐
4. space-between 两端对齐，item直接的间隔是相等,这个有点类似 兄弟选择器 ‘+’ 设置的水平外边距
5. space-around 每个item两侧的间隔相等。需要注意的是，这里强调的是每个item有固定的外边距，所以边框的外边距是item之间的一半。

定义在竖直方向的位置，我个认为这是最最迷人的属性了

align-items:flex-start || flex-end || center || baseline || stretch

1. flex-start item在父元素的顶部 注意是从上到下的
2. flex-end item在父元素的底部 注意是从上到下的
3. center 让你和position定位说再见的属性，让你轻松垂直居中的属性了
4. baseline item的第一行文字的基线对齐。

定义多行的垂直对齐方式，注意只有一行的时候，是不起作用的，这时候就使用 justify-content 或者align-items

 align-content:flex-start || flex-end || center || space-between || space-around || stretch

1. flex-start 属性 column是向顶部靠拢的，和align-items的flex-start 是一样的
2. flex-end 属性 column 是向底部靠拢的，和align-items的flex-end 是一样的
3. center 属性 column 向中部靠拢，和align-items的center 是一样的
4. space-between 属性 column的垂直方向的行距是相等的，两端和父元素对齐，和justify-content的space-between 类似
5. space-around 属性 column 的垂直方向的两边的行距是相等的，不会重叠，也就是行与行的边距是第一行到父元素的边距的两倍。
6. stretch 属性 column 布满整个父元素