flex布局详细介绍以及盒子上下左右居中对齐实例(flex布局使用)

推荐整理分享flex布局详细介绍以及盒子上下左右居中对齐实例(flex布局使用)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:flex布局用法,flex布局总结,flex布局总结,flex布局用法,flex布局视频教程,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）