CSS Flexbox（弹性盒子）

CSS Flexbox（弹性盒子）

参考文档：

• Flex 布局教程：语法篇
• Flex 布局教程：实例篇

本文内容来自于CSS Flexbox Layout

基本概念

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

在使用flexbox属性之前，需要定义一个flex container，可以使用display来定义，值有两种flex或者inline-flex

默认情况下，flex items会在main axis上水平的从左到右排列
默认情况下，flex items会拉伸来填满flex container的高度。

例如，有如下的布局：

	
Item 1
	
Item 2
	
Item 3
	
Item 4
	
Item 5
	
Item 6

未加弹性盒子时，布局情况如下：

当添加如下css样式：

.container {
  display:flex;
}

布局情况如下：

现在再添加上高度：

.container {
  display:flex;
  height: 300px;
}

效果如下：

如果display:inline-flex，是内联显示。

.container {
  display:inline-flex;
  height: 300px;
}

所以：

• display: flex;创建的是一个块级的flex container
• display: inline-flex;创建的是一个inline的flex container

控制Flex Items的方向
有些flexbox的属性是只能应用到flex container上的，另有一些是只能应用到flex items上的。

flex-direction只能应用于flex container，其默认值为row，可以使用row-reverse来反转方向

当flex-direction:row;时：

当flex-direction:row-reverse;时：

当flex-direction: column;时：

Flex Items换行
使用flex-wrap 来换行，flex-wrap 只能应用于flex containers。
flex containers会在单独的一行来布局flex items，叫做flex line
即使内容溢出了，flex containers还是会在*flex line**上来布局所有的flex items

所以当添加上flex-wrap:wrap;后，在较小的屏幕上显示如下：

分配Flex Container中的空间

justify-content来控制flex Items的位置和对齐方式。

justify-content只能应用于flex containers。默认值为flex-start，在每一行的start放置items

当设置为justify-content: flex-end;

设置为justify-content: center;

设置justify-content: space-between;，每个item之间有相同的space

而设置为justify-content: space-around;，其距离flex container的两边也是同等的距离

当把item的margin设为auto时，它将会占有其它的空间，并把flex items推向其它的位置

如下：

.container {
  display:flex;
  flex-wrap:wrap;
  justify-content: space-around;
}

.item-1 {
  margin-right: auto;
}

效果如下：

改变Flex Items的顺序
order属性只能用于Flex Items，所有的Flex Items默认值都为0。

如下，设置item-6的order为-1

.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.item-6 {
  order: -1;
}

显示效果如下：

Growing Flex Items
flex-grow 只能被应用于flex items。
flex-grow决定了item在flex container 中占据多大的位置
flex-grow为1的话会占据一行的所有空间。flex-grow的值越高，the more an item grows relative to the other items。

如下：

.container {
	display: flex;
	flex-wrap: wrap;
}

.item {
  flex-grow:1;
}

.item-3 {
  flex-grow:2;
}

效果如下：

使用flex-basis和flex

flex 和 flex-basis 只能被应用于flex items
flex-basis指定了flex item的initial main size。
You set the initial size you want the flex items to be, then flexbox evenly distributes the free space according that size.

例如，如下设置flex-basis: 200px

.item {
  flex-grow:1;
  flex-basis: 200px;
}

但是还是会均匀的分布，只有在item的size小于200px的时候，才换行。

flex 是 flex-grow, flex-basis 和flex-shrink的缩写，后面的两个是可选的。

在Cross Axis上对齐Flex Items
align-items只能应用于flex containers，会应用到flex containers中的所有flex items，如下：

.container {
	display: flex;
	flex-wrap: wrap;
  height: 450px;
  align-items:flex-start;
}

.item-1 {
  flex: 1;
}

.item-2 {
  flex: 2;
}

效果如下：

align-self只能应用于 flex items
如下：

.container {
	display: flex;
	flex-wrap: wrap;
  height: 450px;
}

.item-1 {
  flex: 1;
  align-self:flex-start;
}

.item-2 {
  flex: 2;
}

垂直和水平居中
使用flexbox有三种方式来居中

.container {
  justify-content: center;
  align-items: center;
}

或者

.container {
  justify-content: center;
}
.item {
  align-self: center;
}

或者

.item {
  margin: auto;
}

Flexbox实际运用

在这里可以看到Flexbox的浏览器支持情况Flexbox - latest browser support

一个元素既可以作为flex item，也可以作为flex container

Building a Navigation Bar with Flexbox

参考Building a Navigation Bar with Flexbox

给.main-header的justify-content: space-between; ，则site name在header的左边，导航菜单则会在右边。

.main-header {
  justify-content: space-between; 
}

Creating a Three Column Layout with Flexbox

参考Creating a Three Column Layout with Flexbox创建3列布局

Use the flex-basis property to set the initial size you want the column items to be.

Aligning Items to the Bottom of a Column

参考Aligning Items to the Bottom of a Column

A margin value of auto has an effect on flex item alignment because it absorbs any extra space around a flex item and pushes other flex items into different positions.

Creating a Sticky Footer with Flexbox

参考Creating a Sticky Footer with Flexbox固定在底部的footer

把body作为一个flex container，它所有的直接子元素会在一条线上水平显示。
设置flex-direction为column则会垂直显示
1vh is equal to 1/100th or 1% of the viewport height

代码为：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.row {
  flex: 1;
}

或者：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-footer {
  margin-top: auto;
} 

参考

• A Complete Guide to Flexbox
• Flex 布局教程：语法篇