CSS3引入的布局模式Flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度，高度，以最佳方式填充可用空间。Flex容器使用Flex项目可以自动放大与收缩，用来填补可用的空闲空间。
TB2qVpodVXXXXXLXpXXXXXXXXXX_!!2406102577.png
主轴：Flex容器的主轴主要用来配置Flex项目。他不一定是水平的，这主要取决于fle-direction属性。
主轴起点，主轴终点：Flex项目的配置从容器的主轴起点边开始，往主轴终点边结束。
主轴长度：Flex项目在主轴方向的宽度或高度就是项目的主轴长度，Flex项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。
侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
侧轴起点，侧轴终点：伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
侧轴长度：Flex项目在侧轴方向的宽度或高度就是项目的侧轴长度，Flex项目的侧轴长度属性是widht或height属性，由哪一个对着主轴方向决定。
Flex容器属性
1.display
- 要改变元素的模式为伸缩容器，需要使用display属性
display : flex | inline-flex
版本表格
| 规范版本 | 属性名称 | 块伸缩容器 | 内联伸缩容器 |
|---|---|---|---|
| 标准版 | display | flex | inline-flex |
| 混合版 | display | flexbox | inline-flexbox |
| 最老版 | display | box | inline-box |
Title
flex 块级伸缩容器
1
2
3
inline-flex 内联伸缩容器
1
2
3
image.png
- 块级伸缩容器与内联级伸缩容器类似，默认都是从左往右排列，唯一不同的是块级伸缩容器独占一行，而内联级伸缩容器随着内容改变。
Flex容器不是块容器，因此有些设计用来控制块布局的属性在伸缩布局中不适用。浮动无法影响伸缩容器，而且伸缩容器的margin与其内容的margin不会重叠。如果内联伸缩容器设置了浮动，元素将会以块级伸缩容器显示。
2.flex-direction
- 定义Flex项目在Flex容器中放置的方向
flex-direction : row | row-reverse | column | column-reverse - row:默认值，如果书写方式是ltr，那么Flex项目从左向右排列；如果书写方式是rtl，那么Flex项目从右向左排列。
- row-reverse:如果书写方式是ltr，那么Flex项目从右向左排列；如果书写方式是rtl，那么Flex项目从左向右排列。
- column:和row类似，方向从上到下排列。
- column-reverse:和row-reverse类似，方向从下到上排列。
| 版本 | 属性名称 | 水平方向 | 水平反方向 | 垂直方向 | 垂直反方向 |
|---|---|---|---|---|---|
| 标准版本 | flex-direction | row | row-reverse | column | column-reverse |
| 混合版本 | flex-direction | row | row-reverse | column | column-reverse |
| 老版本 | box-orient / box-direction | horizontal/normal | horizontal/normal | vertical/normal | vertical/reverse |
Title
flex-direction:row
1
2
3
flex-direction:row-reverse
1
2
3
flex-direction:row
1
2
3
flex-direction:row-reverse
1
2
3
image.png
3.flex-wrap
- 默认情况下，Flex项目都尽可能在一行显示，你可以根据flex-wrap的属性值来改变，让Flex项目多行显示。
- 因为默认值nowrap不准换行，伸缩容器容纳不下伸缩项目时，各伸缩项目会根据默认的收缩比例进行缩小以适应伸缩容器的宽度
flex-wrap:nowrap | wrap | wrap-reverse- nowrap:默认值，单行显示，如果书写方式是ltr，Flex项目从左往右排列；如果书写方式是trl，Flex项目从右往左排列。
- wrap:多行显示，如果书写方式是ltr，Flex项目从左往右排列；如果书写方式是trl，Flex项目从右往左排列。
- wrap-reverse:多行显示，如果书写方式是ltr，Flex项目从右往左排列；如果书写方式是trl，Flex项目从左往右排列。
Title
flex-wrap:wrap
1
2
3
4
5
6
7
8
9
10
11
12
13
flex-wrap:nowrap
1
2
3
4
5
6
7
8
9
10
11
12
13
flex-wrap:wrap-reverse
1
2
3
4
5
6
7
8
9
10
11
12
13
image.png
4.flex-flow
- 这是flex-direction和flex-wrap两个属性的缩写，默认值是：row nowrap
flex-flow :flex-direction || flex-wrap
5.justify-content
- 用来设置伸缩项目在主轴上的对齐方式。指定如何在伸缩项目之间分布伸缩容器额外空间。当一行上的所有伸缩项目不能伸缩或可伸缩但是已达到最大长度时，这一属性才会对伸缩容器额外空间进行分配。当伸缩项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。
justify-content : flex-start | flex-end | center | space-between | space-around- flex-start:默认值，伸缩项目向一行的起始位置靠齐。伸缩容器沿着布局轴方向的所有额外空间都被置于布局轴的末尾。
- flex-end:和flex-start相反，伸缩项目向一行的结束位置靠齐。伸缩容器沿着布局轴方向的所有额外空间都被置于布局轴的开始。
- center:伸缩项目向一行的中间位置靠齐。伸缩容器的所有额外空间平均分布在第一伸缩项目前面和最后一个伸缩项目的后面。
- space-between:伸缩项目会平均分布在行里。伸缩容器的所有额外空间平均分布在所有伸缩项目之间，但是在第一个伸缩项目之前和最后一个伸缩项目之后不分配空间，也就是说，第一个伸缩项目靠齐开始位置，最后一个伸缩项目靠齐结束位置。
- space-around:伸缩项目会品均分布在行里。伸缩容器的所有额外空间品均分布在所有伸缩项目之间，但是第一个伸缩项目之前与最后一个伸缩项目之后只分配其他位置得到额外空间的一半。
Title
justify-content:flex-start
1
2
3
4
5
justify-content:flex-end
1
2
3
4
5
justify-content:center
1
2
3
4
5
justify-content:space-between
1
2
3
4
5
justify-content:space-around
1
2
3
4
5
image.png
6.align-items(管理侧轴)
- align-items属性和justify-content同样是用来管理伸缩容器额外空间，不同的是，justify-content是用来管理伸缩容器主轴方向的额外空间，而align-items是用来管理伸缩容器侧轴方向的额外空间。
align-items : flex-start | flex-end |center | baseline | stretch- flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
- flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
- center:伸缩项目的外边距盒在该行的侧轴上居中放置。
- baseline:如果伸缩项目的行内轴与侧轴为同一条，则该值和flex-start等效。其它情况下，该值将参与基线对齐。所有参与该对齐方式的伸缩项目将按下列方式排列：首先将这些伸缩项目的基线进行对齐，随后其中基线至侧轴起点边的外边距距离最长的那个项目将紧靠住该行在侧轴起点的边。
- stretch:如果侧轴长度属性的值为auto，则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。
Title
align-items:flex-start
1
2
3
4
5
align-itmes:flex-end
1
2
3
4
5
align-items:center
1
2
3
4
5
align-items:baseline
1
2
3
4
5
align-items:stretch
1
2
3
4
5
image.png
7.align-content(管理侧轴)
- 是伸缩项目占多行时在侧轴方向的对齐属性，这个属性将对每一行起作用而不是每个伸缩项目。
align-content : flex-start | flex-end | center | space-between | space-around | stretch- flex-start:各行向伸缩容器的起点位置堆叠。
- flex-end:各行向伸缩容器的结束位置堆叠。
- center:各行向伸缩容器的中间位置堆叠。
- space-between:各行在伸缩容器中平均分布。
- space-around:各行在伸缩容器中品均分布，在两边各有一半空间。
- stretch:默认值，各行将会伸展以占用额外空间。
Title
align-content:flex-start
1
2
3
4
5
6
7
8
9
10
align-content:flex-end
1
2
3
4
5
6
7
8
9
10
align-content:center
1
2
3
4
5
6
7
8
9
10
align-content:space-between
1
2
3
4
5
6
7
8
9
10
align-content:space-around
1
2
3
4
5
6
7
8
9
10
align-content:stretch
1
2
3
4
5
6
7
8
9
10
image.png
Flex项目属性
1.order
- 默认情况下，Flex项目是按照文档流的结构顺序排列，在Flexbox模型中，可以通过order属性来改变伸缩项目出现在文档中的顺序
order :; - number可以是负值，Flexbox容器将根据各项目中order值的大小进行排列
| 规范版本 | 属性名 | 属性值 |
|---|---|---|
| 标准版本 | order | |
| 混合版本 | flex-order | |
| 老版本 | flex-order |
Title
order:number
1
2
3
4
5
6
7
image.png
2.flex-grow
- 定义一个Flex项目的扩大比例 并且会撑满一行
flex-grow :; - 默认值为0，不能取负值，没有单位
Title
flex-grow:number
1
2
3
4
5
6
7
image.png
如果伸缩项目的flex-grow设置为1，每个伸缩项目将设置一个大小相等的额外空间。如果给其中一个伸缩项目设置flex-grow设置为2，这个伸缩项目所占的额外空间是其他伸缩项目所占额外空间的2倍。
也可以这样理解，把上例各项目的flex-grow值加起来等于4，就是把额外空间分成4份，比例为1的占1份，比例为2的占2份。
3.flex-shrink
- 定义一个Flex项目的缩小比例
flex-shrink:- 默认值为1；
试过了但是没看到效果 有可能浏览器不支持 下图没有效果 不建议使用
image.png
4.flex-basis
- 定义了Flex项目在分配Flex容器剩余空间之前的一个默认尺寸。
flex-basis:| auto
flex-basis类似于width，用来设置flex-basis长度并指定伸缩基准值，也就是根据可伸缩比例计算出额外空间的分布之前，伸缩项目主轴长度的起始数值。
如果设置为0，内容不在考虑周围额外空间。如果设置为auto，额外空间会基于flex-grow值做分布。如下所示：
image.png
Title
flex-basis:number
1
2
3
4
5
6
image.png
5.flex
- flex是flex-grow，flex-shrink，flex-basis三个属性的缩写。第二个和第三个参数是可选值。默认值是0 1 auto。
flex: none | [? || ] - 也可以这样用：(感觉跟 flex-grow 用法一样)
Title
flex:number
1
2
3
4
5
6
image.png
6.align-self
- 用来在单独的伸缩项目上覆写默认的对齐方式。
align-self:auto | flex-start | flex-end | center | baseline | stretch- align-self的值与align-items一样。
Title
align-self:align-start
1
2
3
4
5
6
align-self:flex-end
1
2
3
4
5
6
align-self:center
1
2
3
4
5
6
align-self:baseline
1
2
3
4
5
6
align-self:stretch
1
2
3
4
5
6
-
效果
image.png