display flex 左右_前端布局神器display:flex

2009年，W3C提出了一种新的方案--Flex布局，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。

flex浏览器支持

一、Flex布局是什么？

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

.box{

display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/

display: flex; //将对象作为弹性伸缩盒显示

}

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

.box {

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

}

兼容性写法

.box {

display: flex || inline-flex;

}

二、基本概念

采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

结构示意图

容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。

main start/main end：主轴开始位置/结束位置；

cross start/cross end：交叉轴开始位置/结束位置；

main size/cross size：单个项目占据主轴/交叉轴的空间；

三、容器属性

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

flex-direction

flex-wrap

flex-flow

justify-content

align-item

align-content

flex-direction属性：决定主轴的方向(即项目的排列方向)

.box {

flex-direction: row | row-reverse | column | column-reverse;

}

row(默认)：主轴水平方向，起点在左端；

row-reverse：主轴水平方向，起点在右端；

column：主轴垂直方向，起点在上边沿；

column-reserve：主轴垂直方向，起点在下边沿。

主轴的4个方向

flex-wrap属性：定义换行情况

默认情况下，项目都排列在一条轴线上，但有可能一条轴线排不下。