共计 3922 个字符，预计需要花费 10 分钟才能阅读完成。
1.flex 布局
布局的传统解决方案，基于盒模型，依赖 display 属性 + position 属性 + float 属性。它对于那些非凡布局十分不不便，比方，垂直居中就不容易实现。
2009 年，W3C 提出了一种新的计划 —-Flex 布局，能够简便、残缺、响应式地实现各种页面布局。目前，它曾经失去了所有浏览器的反对，这意味着，当初就能很平安地应用这项性能。
Flex 是 Flexible Box 的缩写，意为 ” 弹性布局 ”，用来为盒状模型提供最大的灵活性。
任何一个容器都能够指定为 Flex 布局。
2.flex 布局属性
容器属性
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
元素属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
3.flex 弹性盒模型
采纳 Flex 布局的元素，称为 Flex 容器（flex container），简称 ” 容器 ”。它的所有子元素主动成为容器成员，称为 Flex 我的项目（flex item），简称 ” 我的项目 ”。
对于某个元素只有申明了display: flex;，那么这个元素就成为了弹性容器，具备 flex 弹性布局的个性。
- 每个弹性容器都有两根轴：主轴和穿插轴 ，两轴之间成 90 度关系。留神： 程度的不肯定就是主轴。
- 每根轴都有 终点和起点，这对于元素的对齐十分重要。
- 弹性容器中的所有子元素称为 < 弹性元素 >，弹性元素永远沿主轴排列。
- 弹性元素也能够通过
display:flex设置为另一个弹性容器，造成嵌套关系。因而 一个元素既能够是弹性容器也能够是弹性元素。
弹性容器的两根轴十分重要，所有属性都是作用于轴的。
3.1. 主轴
flex 布局是一种 一维布局 模型，一次只能解决一个维度（一行或者一列）上的元素布局。
也就是说，flex 布局大部分的属性都是作用于主轴的，在穿插轴上很多时候只能被动地变动。
咱们能够在弹性容器上通过 flex-direction 批改主轴的方向。如果主轴方向批改了，那么：
- 穿插轴就会相应地旋转 90 度。
- 弹性元素的排列形式也会产生扭转，因为 弹性元素永远沿主轴排列。
flex-direction 属性
取值：row(默认) | row-reverse | column | column-reverse
用于管制我的项目排列方向与程序，默认 row，即横向排列，我的项目排列程序为正序 1 -2-3；row-reverse 同为横向排列，但我的项目程序为倒序 3 -2-1。
column 与 row 相同，为纵向排列，我的项目程序为正序 1 -2-3，column-reverse 同为纵向排列，我的项目程序为倒序 3 -2-1。
3.2. 沿主轴的排列解决
弹性元素永远沿主轴排列，那么如果主轴排不下，该如何解决？
通过设置 flex-wrap 属性 可使得主轴上的元素不换行、换行、反向换行。
取值：nowrap(默认) | wrap | wrap-reverse
用于管制我的项目是否换行，nowrap 示意不换行；
举个例子：比方容器宽度为 300px，容器中有 6 个宽度为 60px 的元素，nowrap 状况下，我的项目会强行等分容器宽度从而不换行，那么我的项目理论宽度也就只有 50px 了，而非咱们本人设置的 60px。
wrap 示意换行，即我的项目不会等分容器宽度，而是依据本身宽度进行排列，如果超出父容器宽度则天然换行。
wrap-reverse 同样示意换行，须要留神的是第一排会紧贴容器底部，而不是咱们设想的我的项目 6 紧贴容器顶部，成果与 wrap 相同。
3.3.flex-flow 属性
flex-flow 属性是 flex-deriction 与 flex-wrap 属性的简写汇合，默认属性为 row nowrap，即横向排列，且不换行，如果须要管制我的项目排列与换行，举荐应用此属性，而非独自写两个。
3.4.justify-content 属性
取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
用于管制我的项目在主轴的对齐形式，默认 flex-start 即左对齐，center 为居中，对应的 flex-end 为右对齐。
space-between 为左右两端对齐，即左右两侧我的项目都紧贴容器，且我的项目之间间距相等。
space-around 为我的项目之间间距为左右两侧我的项目到容器间距的 2 倍，比拟特地的布局，日常应用不太多
space-evenly 为我的项目之间间距与我的项目与容器间距相等，相当于除去我的项目宽度，平均分配了残余宽度作为我的项目左右 margin。
3.5.align-items 属性
取值：flex-start | flex-end | center | baseline | stretch(默认)
用于管制我的项目在穿插轴排列形式，默认 stretch 即如果我的项目没设置高度，或高度为 auto，则占满整个容器，上面第一张图的我的项目没设置高度，其余均为 50px。
flex-start 会让我的项目在穿插轴紧贴容器顶部，flex-end 与之相同：
center 应用最多，天然不会生疏，在
baseline 比拟非凡，它让我的项目以第一行文字的基线为参照进行排列：
留神，常理来说 justify-content 与 align-items 默认别离解决我的项目主轴，穿插轴的对齐形式，但如果咱们批改了 flex-direction 为 column，它们解决的轴向会替换，也就是 justify-content 解决穿插轴，align-items 解决主轴。
想要使一个子元素垂直程度居中，只须要设置其父元素
justify-content: center; /* 程度居中 */
align-items: center; /* 垂直居中 */3.6.align-content
取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
用于管制多行我的项目的对齐形式，如果我的项目只有一行则不会起作用，需设置 flex-wrap: wrap；默认 stretch，即在我的项目没设置高度，或高度为 auto 状况下让我的项目填满整个容器，与 align-items 相似。留神，如下演示的 12 个我的项目均没有设置高度。
flex-start，center，flex-end 与 align-i
space-around 与 justify-content 保持一致，即我的项目之间间距为高低两端我的项目与容器间距两倍。
space-evenly 同理，我的项目之间间距与我的项目到容器之间间距相等，space-between 为上
我的项目属性
介绍完容器属性，简略介绍下我的项目属性。容器属性是加在容器上的，那么我的项目属性呢，就是写在我的项目上的，就好比容器属性给 ul，我的项目属性给 li 差不多一个意思。
3.8.order
取值：默认 0，用于决定我的项目排列程序，数值越小，我的项目排列越靠前。!
3.9.flex-grow
取值：默认 0，用于决定我的项目在有残余空间的状况下是否放大，默认不放大；留神，即使设置了固定宽度，也会放大。
假如默认三个我的项目中前两个个我的项目都是 0，最初一个是 1，最初的我的项目会占满残余所有空间。
假如只有第一个我的项目默认为 0，前面两个我的项目 flex-grow 均为 1，那么后两个我的项目平分残余空间。
<img src=”images/image-20210810222901518.png” alt=”image-20210810222901518″ style=”zoom:50%;” />
假如第一个我的项目默认为 0，第二个我的项目为 flex-grow:2，最初一个我的项目为 1，则第二个我的项目在放大时所占空间是最初我的项目的两倍。
3.10.flex-shrink
取值：默认 1，用于决定我的项目在空间有余时是否放大，默认我的项目都是 1，即空间有余时大家一起等比放大；留神，即使设置了固定宽度，也会放大。
但如果某个我的项目 flex-shrink 设置为 0，则即使空间不够，本身也不放大。
上图中第二个我的项目 flex-shrink 为 0，所以本身不会放大。
3.11.flex-basis
取值：默认 auto，用于设置我的项目宽度，默认 auto 时，我的项目会放弃默认宽度，或者以 width 为本身的宽度，但如果设置了 flex-basis，权重会比 width 属性高，因而会笼罩 widtn 属性。
x div{flex-basis: 80px; width: 60px; height: 50px; color: white;}上图中先设置了 flex-basis 属性，后设置了 width 属性，但宽度仍旧以 flex-basis 属性为准。
3.12.flex
取值：默认 0 1 auto，flex 属性是 flex-grow，flex-shrink 与 flex-basis 三个属性的简写，用于定义我的项目放大，放大与宽度。
该属性有两个快捷键值，别离是 auto(1 1 auto)等分放大放大，与 none(0 0 auto)不放大不放大。
还有最罕用的 flex:1 === flex: 1 1 0px
3.13.align-self
取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，示意继承父容器的 align-items 属性。如果没父元素，则默认 stretch。
用于让个别我的项目领有与其它我的项目不同的对齐形式，各值的体现与父容器的 align-items 属性完全一致。
