flex布局总结（flex布局详细介绍以及盒子上下左右居中对齐实例）

flex布局属性

flex-direction

属性定义容器在哪个方向上堆叠

row 水平方向    
    
    
    ，从左到右（默认）

row-reverse 水平方向（从右到左）

column 垂直方向（从上到下）

column-reverse 垂直方向（从下到上）

flex-wrap

属性定义是否换行

nowrap不换行（默认）

wrap-revevrse 以相反的顺序换行

wrap换行

justify-content

属性用于水平方向对齐方式

flex-start 容器开头对齐（默认）

center 水平居中

flex-end 在容器末端对齐

space-around 每个item 左右方向的margin相等    
    
    
。两个item中间的间距会比较大

space-between 最左    
    
    
、最右item贴合左侧或右侧边框


     


     


     


，item与item之间间距相等

align-items

属性用于垂直对齐flex

center 垂直方向居中对齐

flex-start 将flex在容器顶部对齐

flex-end 在容器底部对齐

stretch 拉伸flex填充容器

baseline 使flex基线对齐

align-content

属性用于对齐弹性线

stretch 值拉伸弹性线以占据剩余空间（默认）

space- between 值显示的弹性之间有相等的间距

space-around 值显示弹性在其之前
 




 




 




，之间和之后带有空格

center 值在容器中间显示弹性线

flex-start 值在容器开头显示弹性线

flex-end 值在容器的末尾显示弹性线

实例：盒子上下左右居中 （react）

<div className=father> <div className=son>哈哈哈</div> </div> .father{ display: flex; height: 300px; justify-content: center; align-items: center; .son{ color:red } }