Flex 布局

一劳永逸的搞定 flex 布局 - 掘金

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

.box{
    display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
    display: flex; //将对象作为弹性伸缩盒显示
}

当然，行内元素也可以使用Flex布局。

.box {
    display: inline-flex; //将对象作为内联块级弹性伸缩盒显示
}

兼容性写法

.box {
    display: flex || inline-flex;
}

设置在容器上的属性有6种。

• flex-direction
• flex-wrap
• flex-flow
• justify-content  （设定元素周围的空间和第一个起始元素的位置）
• align-item（设定元素上，中，下 布局）
• align-content

元素居中的标准写法：

display: flex;

justify-content: center

align-item: center