目录

• Flexbox背景起源
• 基础概念（重点）
• 弹性容器属性（重点）
• 弹性项目属性（重点）

Flexbox背景起源

2017年10月，W3C推荐使用Flexbox模块写布局。
在此之前，我们的布局模型有三种：

• 流动布局
• 浮动布局
• 定位布局

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

• 块元素：自上而下
• 行内元素：自左而右

在布局的时候：父元素对子元素几乎没有什么掌控力，这句话的意思是说，在局部方面，父子元素之间的关系不够紧密。
Flexbox的目的
为各种显示设置和屏幕尺寸提供一种更高效的局部方式，来处理元素的布局以及元素之间的空间 。
核心思想
赋予父元素一种超能力，让父元素具有改变子元素的能力：

• 改变子元素的尺寸
• 改变子元素的位置
• 改变子元素的排序
• 改变子元素之间的空白

什么是flex布局

flex布局是C3的一个布局模型。它包含父元素属性和子元素两套属性，是目前移动端布局的主流布局模型。

优点：flex布局是为多屏幕设计的。它在应对多屏幕布局方面更加灵活，所有的子元素都是参照主侧轴布局的。

缺点：flex布局属于一维布局（单向），适合用于局部组件。不适合做页面框架。

基础概念

弹性盒模型示意图.png

弹性盒模型 - 弹性盒模型它指的是一套CSS属性规则，而不是一个css属性。具体来讲，分为两组属性

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

弹性容器 - 被设置了display:flex的元素成为弹性容器。
弹性项目 - 弹性容器的子元素被称为弹性项目。弹性项目受到父元素的控制。
主轴 - 弹性项目排列的轴，多个弹性项目从主轴起点向主轴终点排列。
垂直轴 - 垂直于主轴的轴就是垂直轴。多行弹性项目沿垂直轴排列。
主轴起点 - 多个弹性项目沿主轴分布的起始点。
主轴终点 - 多个弹性项目沿主轴分布的终点。
垂直轴起点 - 多个弹性项目沿垂直轴分布的起始点。
垂直轴终点 - 多个弹性项目沿垂直轴分布的终点。

1.display

container.jpg.png

定义
Display属性用于定义弹性容器。
语法：

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

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

2.flex-wrap

flex-wrap.png

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

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

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

3.flex-direction

flex-direction.png

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

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

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

4.justify-content

justify-content.png

定义：
用于设置弹性项目的排列方式。
语法

.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.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.png

定义
设置弹性项目沿垂直轴的分布方式/对齐方式
语法

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

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

注释：align-content属性等同于垂轴版的justify-content属性

注意：如果不开启flex-wrap:wrap，align-content属性时没有效果的

7. gap 属性

gap.png

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

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

弹性项目属性

order

定义

设置弹性盒项目对象元素的顺序

语法

order:number |initial | inherit;

属性值

flex-grow

定义

规定flex-grow项在flex容器中分配剩余空间的相对比例。

语法

flex-grow:number |initial | inherit

属性值

flex-shrink

定义

flex元素仅在默认宽度之和大于容器的时候才会发生收缩。

语法

flex-shrink:number | initial | inherit

属性值

flex-basis

定义

设置弹性项目主轴的初始长度

语法

flex-basis:number|auto|initial|inherit;

属性值

align-self

定义

覆盖Align-items的值
语法

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

属性值

flex

属性值（7个）

• flex-grow：数字flex:0
• flex-shrink：数字flex:0 1
• flex-basis：
  • 长度值flex 0 1 auto
    • auto：自动获取width或height的值。
    • 如果没有设置width或height那么等于元素的内容宽。
  • px % vw vh em rem 任何尺寸值
    • flex:0 1 2rem
• auto：等同于1 1 auto
• initial：等同于0 1 auto
• none：等同于0 0 auto
• inherit：继承父元素