css的flex布局
程序员文章站
2022-03-02 18:05:37
...
页面布局现目前个人认为最好用的是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;
/*设置容器交叉轴的方向的对齐方式,所谓交叉轴就是,与主轴垂直方向的对齐方式,(以上,始端对齐|终端对齐|居中对齐|基线对齐|容器里元素在交叉轴方向撑满对齐)*/
这是几个经常使用到的流体布局属性设置,希望有所帮助。其余属性请看菜鸟教程的图文解释。
菜鸟教程很好用 的文档手册,欢迎查阅
上一篇: css flex
下一篇: css 的flex布局