CSS Flexbox（灵活盒子）

CSS Flexbox布局模块

在Flexbox布局模块之前，有四种布局模式：

块（block），用于网页中的部分
内联（inline），用于文本
表（table），用于二维表数据
定位（position），用于元素的显式位置

Flexbox布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

浏览器支持

属性	Internet Explorer	Chrome	FireFox	Safari	Opera
属性格式
flexbox	11.0	29.0	22.0	10.0	48.0

Flexbox元素

要开始使用Flexbox模型，您需要先定义一个Flex容器。

1

2

3

上面的元素表示一个包含三个flex项目的flex容器(蓝色区域)。

<div class="flex-container">
   <div>1</div>
   <div>2</div>
   <div>3</div>
 </div>

尝试一下

父元素（容器）

通过将display属性设置为flex，Flex容器变得灵活：

.flex-container {
   display: flex;
 }

Flex容器属性有：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction属性

flex-direction属性定义容器要在哪个方向上堆叠弹性项目。

1

2

3

上面的元素表示一个包含三个flex项目的flex容器(蓝色区域)。 column值堆叠（但从顶部到底部）：

.flex-container {
   display: flex;
   flex-direction: column;
 }

尝试一下

column-reverse值堆叠（但从底部到顶部）：

.flex-container {
   display: flex;
   flex-direction: column-reverse;
 }

尝试一下

row值水平堆放（左到右）：

.flex-container {
   display: flex;
   flex-direction: row;
 }

尝试一下

row-reverse值水平堆放（但从右到左）：

.flex-container {
   display: flex;
   flex-direction: row-reverse;
 }

尝试一下

flex-wrap属性

flex-wrap属性指定flex项是否应该换行。下面的示例有12个fiex项目，以更好地展示flex-wrap属性。

1

2

3

4

5

6

7

8

9

10

11

12

上面的元素表示一个包含三个flex项目的flex容器(蓝色区域)。如果有必要使用wrap值：

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

尝试一下

nowrap值指定Flex项目将不会换行（这是默认值）：

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

尝试一下

wrap-reverse值将flex项目倒置：

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

尝试一下

flex-flow属性

flex-flow属性是用于设置flex-direction和flex-wrap属性的简写属性。

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

尝试一下

justify-content属性

justify-content属性用于对齐flex项：

1

2

3

center值中心对齐：

.flex-container {
   display: flex;
   justify-content: center;
 }

尝试一下

flex-start值从开始对齐：

.flex-container {
   display: flex;
   justify-content: flex-start;
 }

尝试一下

flex-end值在末端对齐：

.flex-container {
   display: flex;
   justify-content: flex-end;
 }

尝试一下

space-around值对齐：

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

尝试一下

space-between值对齐：

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

尝试一下

align-items属性

align-items属性用于垂直对齐Flex项。

.flex-container {
   display: flex;
   height: 200px;
   align-items: center;
 }

尝试一下

align-items: flex-start值从顶部对齐：

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

尝试一下

align-items: flex-end;值在尾部对齐：

.flex-container {
   display: flex;
   height: 200px;
   align-items: flex-end;
 }

尝试一下

align-items: stretch;值对齐：

.flex-container {
   display: flex;
   height: 200px;
   align-items: stretch;
 }

尝试一下

align-items: baseline;值对齐：注意：该示例使用不同的font-size来演示项目是否通过文本基线对齐：

.flex-container {
   display: flex;
   height: 200px;
   align-items: baseline;
 }

尝试一下

align-content属性

align-content属性用于对齐柔性线。 align-content: space-between;值：

.flex-container {
   display: flex;
   height: 600px;
   flex-wrap: wrap;
   align-content: space-between;
 }

尝试一下

align-content: space-around;值：

.flex-container {
   display: flex;
   height: 600px;
   flex-wrap: wrap;
   align-content: space-around;
 }

尝试一下

align-content: stretch;值：

.flex-container {
   display: flex;
   height: 600px;
   flex-wrap: wrap;
   align-content: stretch;
 }

尝试一下

align-content: center;值对齐：

.flex-container {
   display: flex;
   height: 600px;
   flex-wrap: wrap;
   align-content: center;
 }

尝试一下

align-content: flex-start;值对齐：

.flex-container {
   display: flex;
   height: 600px;
   flex-wrap: wrap;
   align-content: flex-start;
 }

尝试一下

align-content: flex-end;值对齐：

.flex-container {
   display: flex;
   height: 600px;
   flex-wrap: wrap;
   align-content: flex-end;
 }

尝试一下

完美居中

在下面的例子中，我们将解决一个非常常见的样式问题：完美居中。解决方案：将justify-content和align-items属性设置为居中，flex项目将完美居中：

.flex-container {
   display: flex;
   height: 300px;
   justify-content: center;
   align-items: center;
 }

尝试一下

子元素（item）

Flex容器的直接子元素自动变为（flex）项。

<div class="flex-container">
   <div>1</div>
   <div>2</div>
   <div>3</div> 
   <div>4</div>
 </div>

尝试一下

flex项属性有：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order属性

order属性指定flex item的顺序。代码中的第一个flex项不必显示为布局中的第一个项。order值必须是数字，默认值为0。

<div class="flex-container">
   <div style="order: 3">1</div>
   <div style="order: 2">2</div>
   <div style="order: 4">3</div> 
   <div style="order: 1">4</div>
 </div>

尝试一下

flex-grow属性

flex-grow属性指定弹性项目相对于其他弹性项目的增长量。该值必须是数字，默认值为0。

<div class="flex-container">
   <div style="flex-grow: 1">1</div>
   <div style="flex-grow: 1">2</div>
   <div style="flex-grow: 8">3</div> 
 </div>

尝试一下

flex-shrink属性

flex-shrink属性指定Flex项目相对于其他Flex项目收缩的程度。

<div class="flex-container">
   <div>1</div>
   <div>2</div>
   <div style="flex-shrink: 0">3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
   <div>7</div>
   <div>8</div>
   <div>9</div>
   <div>10</div>
 </div>

尝试一下

flex-basis属性

flex-basis属性指定弹性项的初始长度。

<div class="flex-container">
   <div>1</div>
   <div>2</div>
   <div style="flex-basis: 200px">3</div>
   <div>4</div>
 </div>

尝试一下

flex属性

flex属性是flex-grow，flex-shrink和flex-basis属性的速记属性。

<div class="flex-container">
   <div>1</div>
   <div>2</div>
   <div style="flex: 0 0 200px">3</div>
   <div>4</div>
 </div>

尝试一下

align-self属性

align-self属性指定灵活容器内所选项的对齐方式。align-self属性将覆盖容器align-items属性设置的默认对齐方式。

<div class="flex-container">
   <div>1</div>
   <div>2</div>
   <div style="align-self: center">3</div>
   <div>4</div>
 </div>

尝试一下

<div class="flex-container">
   <div>1</div>
   <div style="align-self: flex-start">2</div>
   <div style="align-self: flex-end">3</div>
   <div>4</div>
 </div>

尝试一下

flex应用场景

使用Flex Box制作响应式网站和图库非常方便

CSS Flexbox属性

下表列出了flexbox使用的CSS属性：

属性	描述
display	指定用于HTML元素的框的类型
flex-direction	指定flex容器中可伸缩项目的方向
justify-content	当项目不使用主轴上的所有可用空间时，水平对齐flex项目
align-items	当项目不使用横轴上的所有可用空间时，垂直对齐flex项目
flex-wrap	指定是否应该包装flex项(如果在一行上没有足够的空间容纳它们)
align-content	修改flex-wrap属性的行为。它类似于对齐项，但是它不是对齐flex项，而是对齐flex行
flex-flow	flex-direction和flex-wrap的简写属性
order	指定一个flex项相对于同一容器内其他flex项的顺序
align-self	用于flex项目。覆盖容器的align-items属性
flex	flex-growth、flex-shrink和flex-base属性的简写属性