Flexbox 灵活方框模型详解

导读

• Flexbox的来历
• 基础概念（重点）
• 弹性容器属性（重点）
• 弹性项目属性（重点）
• 应用场景

Flexbox的来历

2017年10月，W3C推荐使用Flexbox模块写布局。在此之前，我们的布局模型有三种：流动布局、浮动布局、定位布局。
以上三种布局中，父元素对子元素几乎没有什么掌控力，父子元素之间的关系不够紧密。随着移动互联网时代的到来，传统布局在多种显示设备和尺寸上显得不够灵活，我们需要一种更高效的布局方式，来处理元素的布局以及元素之间的空间的分配。“弹性盒模型”应用而生。

核心思想
弹性盒模型的核心思想是赋予父元素一种超能力，让父元素对子元素拥有掌控力：

• 控制子元素的尺寸
• 控制子元素的位置
• 控制子元素的排序
• 控制子元素之间的空白

基础概念

弹性盒模型 - 弹性盒模型它指是一套css属性规则，而不是一个css属性。具体来讲，分为两组属性: 弹性容器属性 和 弹性项目属性
弹性容器 - 被设置了display:flex的元素成为弹性容器。弹性容器对子元素拥有掌控力。
弹性项目 - 弹性容器内的子元素被称为弹性项目。弹性项目受到父元素的控制。
主轴 - 弹性项目的主要排列方向。
垂直轴 - 垂直于主轴的轴, 垂直轴是弹性项目的次要排列方向。
主轴起点 - 弹性项目沿主轴排列的起始点。
主轴终点 - 弹性项目沿主轴排列的终点。
垂直轴起点 - 弹性项目沿垂直轴排列的起始点。
垂直轴终点 - 弹性项目沿垂直轴排列的终点。

父元素属性

1. display

定义
Display属性用于定义弹性容器。

语法

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

• flex : 定义块级弹性容器
• inline-flex: 定义行内弹性容器

2. flex-direction

定义
flex-direction用于创建主轴，弹性项目主要沿主轴方向排列。

语法

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

• row: 默认值。把主轴设为水平轴,弹性项目从左向右水平排列。
• row-reverse：把主轴设为水平轴。弹性项目从右向左水平排列。
• column：把主轴设为纵轴。弹性项目从上向下垂直排列。
• column-reverse：把主轴设为纵轴，弹性项目从下向上垂直排列。

3. flex-wrap

定义
flex-wrap用于定义弹性项目是否换行及换行方式。

语法

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

• nowrap: 默认值。不换行。所有弹性项目显示在一行内。
• wrap: 换行。弹性项目向垂直轴终点方向换行。
• wrap-reverse: 换行。弹性项目向垂直轴起点方向换行。

4. justify-content

定义
justify-content用于定义弹性项目沿主轴的排列方式。

语法

.container{
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
}

• flex-start: 默认值。弹性项目向主轴起点堆积。
• flex-end：弹性项目向主轴终点堆积。
• center : 弹性项目向主轴中心堆积。
• space-between：空白均匀分布在任意两个弹性项目之间。（第一个弹性项目在主轴起点，最后一个弹性项目在主轴终点）
• space-around：空白均匀分布在每个弹性项目两侧。
• space-evenly： 空白平均分布在任意两个弹性项目之间。（包括首尾弹性项目）

5. align-items

定义
align-items 用于定义弹性项目沿垂直轴的行内排列方式。

语法

.container{
  align-items: flex-start | flex-end | center | stretch | baseline
}

• stretch ： 默认值，拉伸弹性项目的高度，填充弹性容器的高。
• flex-start: 让弹性项目在当前行内向垂直轴起点堆积。
• flex-end: 让弹性项目在当前行内向垂直轴终点堆积。
• center：让弹性项目在当前行内向垂直轴中点堆积。
• baseline: 让弹性项目在当前行内向对齐到基线。

6. align-content

定义
align-content用于定义弹性项目沿垂直轴的排列方式。

语法

.container{
  align-content: normal | flex-start | flex-end | center | stretch | space-between | space-around |space-evenly；
}

• normal: 弹性项目被堆积在它们的默认位置，就好像没有设置 align-content 值一样。
• flex-start: 默认值。弹性项目向垂直轴起点堆积。
• flex-end：弹性项目向垂直轴终点堆积。
• center : 弹性项目向垂直轴中心堆积。
• space-between：空白均匀分布在任意两个弹性项目之间。（第一个弹性项目在垂直轴起点，最后一个弹性项目在垂直轴终点）
• space-around：空白均匀分布在每个弹性项目两侧。
• space-evenly： 空白平均分布在任意两个弹性项目之间。（包括首尾弹性项目）

注意：该属性只对多行弹性容器生效，即flex-wrap 设置为 wrap 或 wrap-reverse。单行弹性容器无效，即 flex-wrap 设置为no-wrap。

7. gap属性

定义
gap属性用控制弹性项目之间的空白大小。

语法

.container{
  gap:  10px；/*单行：控制水平间距*/
  gap:  10px；/*单行：控制水平和垂直间距*/
  gap: 10px 20px; /* 水平间距 垂直间距*/
}

注意：1. 该属性仅控制非边缘弹性项目。（不控制第一个和最后一个弹性项目） 2.只有当该空白变得足够小时，间距才会生效。

子元素属性

1. order属性

2. flex-grow属性

3. flex-shrink属性

4. flex-basis属性

5. align-item属性

6. flex属性

简写形式	完整形式
默认值	flex : 0 1 auto;
flex : 1	flex : 1 1 0%;
flex: auto	flex : 1 1 auto;
flex : none	flex: 0 0 auto;
flex : 0%	flex : 1 1 0%;
flex : 2 3	flex : 2 3 0%;
flex : 2 3px	flex : 2 1 3px;