导读

• Flexbox背景
• 父子元素属性
• 基础概念（重点）
• 弹性容器属性（重点）
• 弹性项目属性（重点）

一、谈谈你对flex布局的认识？

1.是什么？：flex布局是C3的一个布局模型。它包含父元素和子元素两套属性。
2.为什么？：flex布局是为了多屏幕而设计的。它在应对多屏幕布局方面更加灵活，所有的子元素都是参照主侧轴布局。
3.怎么办？：flex布局是一种一维布局(单向布局)，适合用于局部组件布局，不适合做页面框架布局。是目前移动端的主流布局模型。

Flexbox背景起源

• 2017年10月，w3c推荐使用Flexbox模块写布局。
• 在此之前，我们的布局模型有三种：
  • 流动布局
  • 浮动布局
  • 定位布局

以上三种布局的共同点是：基于元素方向

• 元素块：自上而下
• 行内元素：自左而右
• 在布局的时候，父级元素对子元素几乎没有什么掌控力，这句话的意思是说，在布局方面，父子元素之间的关系不够紧密。

flexbox的目的

为各种显示设备和屏幕尺寸提供一种更高效的布局方式，来处理元素的布局以及元素之间的空间。

核心思想
赋予父元素一种超能力，让父元素具有改变子元素的能力：

• 改变子元素的尺寸
• 改变子元素的位置
• 改变子元素的排序
• 改变子元素的尺寸

flex.png

• 弹性容器属性
• 弹性项目属性

弹性容器 - 被设置了display：flex的元素成为弹性容器、弹性容器对子元素有掌控力。
弹性项目 - 弹性容器的子元素被称为弹性项目，弹性项目受到父元素的控制。

主轴 - 弹性项目排列的轴，多个弹性项目从主轴起点向主轴终点排列。
垂直轴 - 垂直于主轴的轴就是垂直轴。多行弹性项目沿垂直轴排列。

主轴起点 - 多个弹性项目沿主轴分布的起始点。
主轴终点 - 多个弹性项目沿主轴分布的终点。

垂直轴起点 - 多行弹性项目沿垂直轴分布的起始点。
垂直轴终点 - 多行弹性项目沿垂直轴分布的终点。

父子元素属性

父元素属性

子元素属性

1. display

17.png

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

语法

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

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

2. flex-wrap

定义：
flex-wrap用于定义折行方式。

16.png

语法

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

• nowrap：不换行。所有弹性项目都将在一行上。默认值。
• wrap：向垂直轴终点方向换行。弹性项目根据弹性容器的宽度自动换行。
• wrap-reverse：向垂直轴起点方向换行。弹性项目根据弹性容器的宽度自动换行。（换行。弹性项目向垂直轴起点方向换行。）

3. flex-direction

15.png

定义
用于设置弹性盒模型的主轴方向。主轴方向就是元素的排列方式。(设置主轴方向)

语法

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

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

4. justify-content

14.png

定义
用于设置弹性项目沿主轴的排列方式。
注意！：它是给多行设置的，如果你要给单行设置的话必须把换行(flex-wrap：wrap)开启

语法

.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

13.png

定义
align-items用设置弹性项目(子元素)沿行内垂直轴的排列方式。

语法

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

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

6. align-content （对齐内容）

align-content属性等同于垂直轴版的justify-content属性

12.png

定义
设置弹性项目(子元素)沿垂直轴的排列方式。

语法

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

normal：
flex-start: 默认值。 弹性项目从垂直轴起点向终点排列。
flex-end：弹性项目从垂直轴终点向垂直轴起点排列。（顺序不变）
center ：弹性项目沿垂直轴居中排列。
stretch :弹性项目拉伸高度以适应弹性容器。
space-between : 弹性项目从垂直轴起点到终点均匀分布。
space-around： 把空白平均分配到弹性项目两侧。
space-evenly：把空白平均分配到弹性项目之间。（任意两个弹性项目之间的空白是相等的）

7. gap属性

11.png

定义
设置子元素之间的间距

gap属性用控制弹性项目之间的空白大小。注意：该属性仅控制非边缘弹性项目。（不控制第一个和最后一个弹性项目）

语法

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

8. flex-flow属性

是flex-direction和flex-wrap属性的简写形式。

.box{
  flex-flow: row wrap ;
}

弹性项目属性（被设置为弹性弹性布局的子元素属性）

1. order属性

定义
设置指定子元素排列顺序

置或检索弹性盒模型对象的子元素出现的顺序
越大的越在后越小的越在前

19.png

格式

.box{
  order:1,2,3,4,5......;
}

2. flex-grow属性

定义
设置指定子元素的增长量

设置项目的空白分布空间

18.png

格式

.box{
  flex-grow:1,2,3,4,5......;
}

3. flex-shrink属性

定义
设置指定子元素的收缩量

这定义了弹性项目在必要时缩小的能力。

20.png

格式

.box1{ 
  flex-shrink: 1;
}

4. flex-basis属性

定义
设置指定子元素的主轴初始尺寸

• flex-basis 属性用于设置或检索弹性盒伸缩基准值。

• 也可以说是分长度的大小

  
  
  21.png

格式

.box{
  flex-basis: number|auto|initial|inherit;
}

• number：一个长度单位或者一个百分比，规定灵活项目的初始长度。
• auto：默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
• initial：设置该属性为它的默认值。
• inherit：从父元素继承该属性。

5. align-self属性

定义
设置指定子元素覆盖align-items的值

align-self 属性指定弹性容器内所选项目的对齐方式。

22.png

格式

.box{
  align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
}

6. flex复合属性

定义
是grow | shrink| basis 的复合写法
格式

.box{
      flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
}

box-sizing

值：

• border-box：设置它，你设置的宽或高就从边框开始计算，设置的边框或内边距都从你开始设置的宽或高值分配，剩下值的就是内容区的宽或高

• content-box：就是从内容区计算，但是它的宽度不和边框、内边距平分，
  只相加。把内容区的宽高和你设置的宽高加起来。