弹性盒模型笔记（Reset257）

笔记搬运工 🏃‍♂️🏃‍♂️🏃‍♂️
写于 2020.11.1 — 2020.11.3 【P314 - P319】

一、弹性盒的概念

1、弹性盒子是CSS3的一种新的布局模式。

2、CSS3弹性盒(FlexibleBox或flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

3、引入弹性盒布局模型的目的是提供一种 更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

4、弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置display属性的值为flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

二、弹性盒的主轴和侧轴

… 画得有点丑，但…还能看 😅

1、主轴( mainaxis) ：伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局。小心，它不一定是水平的；这主要取决于“justif-content"属性

2、主轴起点 (main-start) 和主轴终点 (main-end) 伸缩项目放置在伸缩容器内从主轴起点 (main-start) 向主轴终点 (main-start) 方向。

3、主轴尺寸(main size) ：伸缩项目在主轴方向的宽度或高度就是主轴的尺寸。伸缩项目主要的大小属性要么是宽度，要么是高度属性，由哪一个对着主轴方向决定。

注意：主轴和侧轴的位置包括起点终点是可以转换的（可以实现让盒子横向排列并且不会高度坍塌）

三、弹性盒的一些属性

由于flexbox是一个整体模块，而不是单一的一个属性，它涉及到了很多东西，包括它的整个属性集。它们之中有一些是在父容器上设置，而有一些则是在子容器上设置。

1、在父容器上的属性

（1）display: flex / inline-flex；

• 说明:弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。
• flex：将对象作为弹性伸缩盒显示。
• inline-flex：将对象作为内联块级弹性伸缩盒显示。（不常用）

（2）flex-direction

• 说明：属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。
• row
  flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。(就是一般的正常情况，内部元素水平排列）
• row-reverse
  表现和row相同，但是置换了主轴起点和主轴终点
• column
  flex容器的主轴和侧轴互换，内部元素变成垂直排列，主轴起点与主轴终点和书写模式的前后点相同
• column-reverse
  表现和column相同，但是置换了主轴起点和主轴终点

（3）flex-wrap

• 说明：设置或检索伸缩盒对象的子元素超出父容器时是否换行，弹性盒默认不换行，溢出会自己适当压缩。
• nowrap：当子元素溢出父容器时不换行，并且会自动调整内部元素的尺寸去适应父元素（默认值）
• wrap：当子元素溢出父容器时自动换行。
• wrap-reverse：反转wrap排列，即反向换行

（4）justify-content

• 说明：定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。
• flex-start：从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。(左对齐)
• flex-end：从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。（右对齐）
• center：伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。（居中）
• space-between：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。（贴紧容器壁）
• space-around：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。（均匀分布其中）MDN还有更多属性

记住：弹性盒里面没有左右的概念，只有轴的起点终点

（5）align-items

• 说明：设置或检索弹性盒子元素在侧轴方向上的对齐方式。
• flex-start：弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度)。
• baseline：将与文字基线对齐;
• stretch：如果未设置宽高，那么将元素默认拉伸为父元素高度。（默认值）

align-items 这个属性其实我感觉有点像不同高度元素之间设置 vertical-align 属性 🤔🤔🤔， 可以这么去记

（6）align-content

• 说明:用于修改flex-wrap属性的行为。类似于justify-content，但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
• flex-start：各行向弹性盒容器的起始位置堆叠。
• flex-end：各行向弹性盒容器的结束位置堆叠。
• center：各行向弹性盒容器的中间位置堆叠。
• space-between：各行在弹性盒容器中平均分布。
• space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
• stretch：各行将会伸展以占用剩余的空间。（默认值）

align-content 这个属性像是在设置行与行之间在侧轴上的对齐方式 🤗

2、在内部元素上的属性

（1）flex-grow （默认值是0）

• 该属性的分配是直接按比例分多出的空间。
  （2）flex-shrink（默认值是1，改成0之后会溢出）
• 该属性分配溢出空间还要计算加权。

（3）flex-basis：设置或检索弹性盒伸缩基准值

• auto：默认值，由内容决定
• length：用长度值定义宽度，不允许负值
• percentage：百分比定义宽度

（4）flex：设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

• 语法: flex:none | [ flex-grow ] | [ flex-shrink ] | [ flex-basis ];
• 说明:复合属性。设置或检索伸缩盒对象的子元素如何分配空间。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
• flex用于合并指定flex-grow和flex -shrink和flex-basis属性，默认值为01 auto。
• 如果缩写flex:1,则其计算值为: 1 1 0，auto等价于1 1auto，none等 价于00 auto。（可以用来做分栏结构）

总结：

• [ flex-grow]：定义弹性盒子元素的扩展比率。
• [ flex-shrink]：定义弹性盒子元素的收缩比率。
• [ flex-basis]：定义弹性盒子元素的默认基准值。
• 经常用 flex:1 来做三栏布局。

（5）order：属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。

（6）align-self：对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items 的值。即在侧轴方向上的对齐方式。属性值和align-items 相似。