页面布局之flex布局

flex布局

flex布局也叫作弹性盒子布局，可以简便、完整、响应式的实现各种页面布局，同时也支持所有的浏览器。父级元素设置css样式为：display:flex。内容的位置用justify-content来控制，常用的属性有：space-between、space-around、center、left 、right 。(注释：类名为father的盒子中写了4个类名为son的盒子)

一共有6个属性是添加给父级的，分别有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

flex-direction用来决定主轴的方向，默认值为row，所以默认横向排列。row|row-reserve|column|column-reserve。

flex-wrap来决定换行，nowrap不能换行；wrap换行，多余的自动在左下方；wrap-reserve换行，多余的自动在左上方，默认值为nowrap。

flex-flow是flex-direction和flex-wrap的简写，默认值为row nowrap。

 .father {
            width: 500px;
            height: 150px;
            display: flex;
            justify-content:left;//可更改
            background-color: #f850fa;
        }

.son {
            width: 100px;
            height: 100px;
            background-color: #ffc9e6;
        }

（1）justify-content:center;

由于子级位置不居中，遂给父级添加：align-items:center，之后都是居中显示。

（2）justify-content:left;

（3）justify-content:space-around;

（4）justify-content:space-between;

在写这些类似平均分布的样子的时候，优先考虑弹性盒子布局，适应性强。

相关的详细信息可以查询菜鸟教程（http://www.runoob.com/）

相关学习地址：阮一峰的语法日志（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$）

来源：CSDN

作者：exploringfly

链接：https://blog.csdn.net/exploringfly/article/details/79345247

标签

flex布局

页面布局

nowrap