css的flex布局

页面布局现目前个人认为最好用的是flex布局。

什么是flex布局---流体布局，就是像水流一样，使容器里面的多个元素按照一定的顺序从左放到右，从上放到下。反之亦然

上链接菜鸟教程的flex布局，看完这里面的内容就可以轻松上手网页的布局。

就像文中所说，任何一个容器都可以指定为Flex布局。

首先要使容器使用流布局

display:flex;/*将容器指定为流体的布局*/

flex-direction:row | row-reverse | column | column-reverse;
/*默认row横向流动（从左到右）盛放元素，（以上，从左到右|从右到左|从上到下|从下到上）。这确认的是主轴的放置方向，是水平放置还是竖直放置。这确认的是一行或一列的流体设置，无法自动换行流体布局*/

flex-wrap: nowrap | wrap | wrap-reverse;
/*设置一行或一列的流体布局超出后，发生换行或换列继续流体布局的设置，（以上，没有换行or列保持流体布局|继续上一行or列的流体布局|反向换行or列的流体布局）*/

justify-content: flex-start | flex-end | center | space-between | space-around;
/*设置主轴容器间的对齐方式，主轴水平row：（以上，左对齐|右对齐|居中对齐|两端对齐|均匀对齐）。主轴竖直column：（以上，顶对齐|底对齐|居中对齐|两端对齐|均匀对齐），反向流体布局同样亦然*/

align-items: flex-start | flex-end | center | baseline | stretch;
/*设置容器交叉轴的方向的对齐方式，所谓交叉轴就是，与主轴垂直方向的对齐方式，（以上，始端对齐|终端对齐|居中对齐|基线对齐|容器里元素在交叉轴方向撑满对齐）*/

这是几个经常使用到的流体布局属性设置，希望有所帮助。其余属性请看菜鸟教程的图文解释。

菜鸟教程很好用 的文档手册，欢迎查阅

标签：容器,flex,布局,流体,对齐,css,row
来源： https://blog.csdn.net/qq_42190134/article/details/88081491