传统的布局方法，都是使用盒子模型，使用浮动，定位，块状元素的使用，很不方便，很容易就会出现高度塌陷的问题，比如说垂直居中就很难实现。

我们先写框架

 

这是目前的效果

 flex容器（父元素）

1 flex-direction--子项目的排列方式：

row初始值：

 row-reverse：

column：（剩下的值都在垂直下方）

 column-reverse值与column正相反

2 fles-wrap（子项目多行）

nowrap（初始值，给再多盒子也会在一行显示）

wrap（多余的盒子会转移下一行）

 wrap-reverse（从下到上）

 3 justify-content水平对齐

flex-start默认值左对齐

lex-end（右对齐）

center（中间对齐）

space-between

space-around 

4 align-items … （垂直对齐）

stretch（初期値）

flex-start（会在最上方）

flex-end（最下方）

center（中间）

 baseline（以文字的底部对齐）

5 align-content多行对齐（需要加flex-wrap:wrap ）

stretch（初期値）

、

flex-start

flex-end 

 

center

space-between

space-around

标签：flex,盒子,flexbox,column,space,start,使用,wrap,对齐
来源： https://blog.csdn.net/Cat_LIKE_Mouse/article/details/119086356