flex布局

flex布局

定义

// 为其所有直接子级开启弹性上下文

.container { display: flex; /* or inline-flex */ }

第一部分：container

1：弹性方向（flex-direction）

建立主轴，Flexbox是单向布局概念。可以将弹性项目想像为主要以水平行或垂直列布置。

// test

.container { flex-direction: row | row-reverse | column | column-reverse; }

1. row（默认）：从左往右
2. row-reverse：从右往左
3. column：从上往下
4. column-reverse：从下往上

2：柔性包装（flex-wrap）

默认情况下，所有弹性项目都尝试放入一行，可以使用flex-wrap对其进行更改。

.container{ flex-wrap: nowrap | wrap | wrap-reverse; }

1. nowrap（默认设置）：所有弹性项目都在一行上
2. wrap：flex项目从上到下包装到多行上
3. wrap-reverse：flex项目从下到上包装到多行上

3：flex-flow（用于父级flex容器元素）

flex-flow：flex-direction（弹性方向）和flex-wrap（柔性包装）属性的简写。他们共同定义了flex容器的主轴和横轴。默认值为row，nowrap。

flex-flow: <'flex-direction'> || <'flex-wrap'>

4：证明内容（justify-content）

flex-start （默认）：将项目打包到flex-direction的开头。

flex-end ：将项目包装在flex方向的末端。

center ：项目沿线居中。

space-between ：项目在行中均匀分布； 第一项位于开始行，最后一项位于结束行。

space-around ：项目在行中均匀分布，周围具有相等的空间。 请注意，从视觉上看，空间是不相等的，因为所有项目的两侧都具有相等的空间。 第一项相对于容器边缘有一个单位的空间，但是下一项之间有两个单位的空间，因为下一项具有自己的适用间距。

space-evenly ：项目被分配为使任意两个项目之间的间隔（以及边缘之间的空间）相等。

4：对齐项目（align-items）

flex-start

flex-end

center

stretch （默认）：拉伸以填充容器（仍然遵守最小宽度/最大宽度）

baseline ：项目是对齐的，例如基线是对齐的

5：对齐内容（align-content）

flex-start

flex-end

center

stretch （默认）：线拉伸以占据剩余空间

space-between ：项目均匀分布； 第一行在容器的开头，而最后一行在容器的结尾

space-around ：每行周围均匀分布

第二部分

1：弹性盒子元素顺序（order）

2：弹性成长（flex-grow）

如果所有项目的flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。 如果其中一个子项的值为2，则剩余空间将占其他子项的两倍

.item { flex-grow: <number>; /* default 0 */ }

3：弯曲收缩（flex-shrink）

4：柔性 flex（flex-shrink和flex-basis组合的简写）

// 默认值为0 1 auto 。

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

example：使用flex解决一个几乎每天都会遇到的问题

居中

// 居中

.parent { 
	display: flex; 
	height: 300px; 
} 
.child { 
	width: 100px; 
	height: 100px; 
	margin: auto;
}