关于前端:flex布局

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即左对齐，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-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

用于让个别我的项目领有与其它我的项目不同的对齐形式，各值的体现与父容器的align-items属性完全一致。