网页美工设计

网页设计中flex布局垂直水平居中

编辑：时间：2018-01-02 08:25:58

　　flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。是CSS3 中一个新的布局模式，为了现代网络中更为复杂的网页需求而设计。

　　Flexbox 已经被浏览器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ ，firefox18+已经支持了本文中所描述的 Flexbox。

　　学会使用flexbox

　　要为元素设置flexbox布局，只需将display属性值设置为flex。

　　#container {

　　display: flex;

　　}

　　flexbox的默认为一个块级元素，如果需要定义为一个行内级的元素，同理：

　　#container {

　　display: inline-flex;

　　}

　　flexbox由伸缩容器和伸缩项目组成。通过设置元素的display属性为flex或者inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。而每一个被设置为flex的容器，它的内部元素都将变成一个flex项目，即是一个伸缩项目。简单的说，flex 定义了伸缩容器内伸缩项目该如何布局。

　　回到正题，利用flexbox实现多块状元素的水平居中，只需要将父级容器的Css设置如下：

　　#container{

　　justify-content:center;

　　display:flex;

　　}

　　使用flex布局，无需绝对定位等改变布局的操作，可以轻松实现元素的水平垂直居中。

　　核心代码如下：

　　#container{

　　display:flex;

　　justify-content:center;

　　align-items: center;

　　}

　　#center{

　　}

　　代码还是相当的整洁的，在Flex布局中，作用对象是子元素与及父元素，所以在这里我们不妨把body当作一个正常的标签使用，虽然很少这样用，但是为了说明body标签也是很接地气的，所以本例中使用了body标签作为box的父元素。

　　现在我们来分析下代码，在Flex有两个东西，一个是Flex容器(子项目父元素)，另一个是子项目(Flex容器子元素)。如果不给.box添加样式，一个h1标签占一行，也就是页面会显示三行文字“flex弹性布局justify-content属性实现元素水平居中”。如果我们给.box添加了 display: flex;那么三个h1标签就妥妥地在一行里排列了，相当于浮动，只不过他不会因为超出了.box的宽度而换行，他总是会在一行内显示。

　　由于弹性容器.box添加了 display:flex; 属性，子项目默认是水平排列的，所以给.box追加一个 flex-direction:column 属性来让子项目垂直排列。此时垂直方向作为主轴，所以我们可以使用一个 justify-content:center 来让所有子项目在垂直方向上居中。为了让h1标签内的文字也水平居中，我们也给了h1一个dislay:flex;以及 justify-content:center，由于h1是默认的水平排列，所以 justify-content:center 就可以让文字在水平方向上居中。

<< 上一篇：网页设计flex布局浏览器兼容解决方案

>> 下一篇：网站制作的网页页面该如何设计

推荐资讯