欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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布局