2021-08-02 弹性盒

怪异盒
box-sizing用来设置盒模型的解析规则的

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

border-box(按怪异盒模型的规则解析)
为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

弹性盒子
display:flex/inline-flex设置为弹性盒（父元素添加）

说明：flex： 将对象作为弹性伸缩盒显示
inline-flex：将对象作为内联块级弹性伸缩盒显

flex-direction (主轴排列方向)

说明： 顺序指定了弹性子元素在父容器中的位置
　　　 row 默认横向一行内排列
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从下往上排，最后一项排在最上面

justify-content(主轴对齐方式)

说明：
内容对齐（justify-content）属性应用在弹性容器上，控制伸缩项目在伸缩容器中的主轴（main axis）对齐方式
■ flex-start默认值，主轴顶端对齐
■ flex-end主轴末端对齐
■ center主轴居中对齐
■ space-between在主轴两端对齐，中间自动分配
■ space-around在主轴自动分配空白空间
■ space-evenly平均分配空白空间

align-items（侧轴对齐方式）

说明：
侧轴对齐方式：控制伸缩项目在伸缩容器中的侧轴对齐方式
flex-start：弹性盒子元素在伸缩容器里延侧轴顶端对齐。
flex-end：弹性盒子元素在伸缩容器里延侧轴末端对齐。
center：弹性盒子元素在伸缩容器里延侧轴居中对齐。
baseline：弹性盒子元素在伸缩容器里延侧轴基线对齐。
stretch：默认值。项目未设置侧轴的尺寸时拉伸成容器的侧轴尺寸。

flex-wrap

说明：
该属性控制伸缩容器当内容超出容器的尺寸时是否换行，同时侧轴的方向决定了新行堆叠的方向。
nowrap：不换行
wrap：换行
wrap-reverse：反转换行排列。
align-content（行与行之间对齐方式）
说明：
当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式；
■ flex-start行和行在侧轴顶端对齐，没有行间距
■ flex-end行和行在侧轴顶端对末端对齐，没有行间距
■ center行和行在侧轴居中对齐，没有行间距
■ space-between行和行两端对齐，中间自动分配侧轴剩余空间。
■ space-around行和行自动分配侧轴剩余空间。
■ stretch 默认值。行和行补强制拉伸以适应容器侧轴的长度。
■ space-evenly平均分配空白空间

align-self（加给子元素）

说明：
align-self 属性规定灵活容器内被选中项目的侧轴对齐方式。
注意：align-self 属性可重写灵活容器的 align-items 属性。
auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则 为 “stretch”。
Stretch 元素被拉伸以适应容器侧轴的尺寸。
Center 元素位于容器侧轴的中心。
flex-start 元素位于容器的侧轴顶端。
flex-end 元素位于容器侧轴的末端。
flex三个子属性介绍

flex-grow

定义项目的放大比例，默认为0，即如果存在剩余空间也不放大

flex-shrink

定义了项目的收缩比例，默认为1，即如果空间不足该项目将缩小。负值对该属性无效。
收缩量的计算方式：（元素宽度收缩比例/元素收比例 相加）*溢出宽度

flex-basis

项目的主轴方向的长度

flex（flex-grow，flex-shrink、flex-basis）

说明：
复合属性。
设置或检索弹性盒模型对象的子元素如何分配剩余空间。
缩写「flex: 1」, 则其计算值为「1 1 %」
缩写「flex: auto」, 则其计算值为「1 1 auto」
flex: none」, 则其计算值为「0 0 auto」
flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值
order
说明：
控制伸缩项目的显示的顺序，数字越大越往后排，默认为0，支持负数，没有单位的整数值。

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

display:box

说明：
(必须加前缀)设置弹性盒
使用如下属性，必须在父代设置display:box;