弹性盒模型浅读

1.什么是弹性盒模型

flexbox是一种一维的布局模型，它给弹性盒子的直系子元素提供了强大的空间分布和对齐能力。

2.主要特性

（1）弹性盒子有两根轴线----主轴和交叉轴。主轴由flex-direction定义，交叉轴垂直于它。

• 主轴
  主轴由flex-direction定义。默认值为row。

• 交叉轴
  与主轴垂直。

• 起始线。影响着flex子元素的排列方向。
  主轴取默认值时，水平方向，并且，起始线在左边，终止线在右边。flex子元素从主轴左边开始向右边排列。

• 若将弹性盒子设置direction: rtl;，起始线在右边，终止线在左边。
  两个方面的影响：一个是子元素会从右向左排布。另一个是影响justify-content的flex-start,flex-end。

（2）Flex容器
我们把一个容器的 display 属性值改为 flex 或者 inline-flex。 完成这一步之后，容器中的直系子元素就会变为 flex 元素。所有CSS属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：

• 元素排列为一行 (flex-direction 属性的初始值是 row)。
• 元素从主轴的起始线开始。
• 元素不会在主维度方向拉伸，但是可以缩小。（因为flex默认值为flex:0 1 auto）
• 元素被拉伸来填充交叉轴大小。（因为align-items初始值为stretch，拉伸）
• flex-basis 属性为 auto。（这时候，flex元素的宽度由其内容多少决定）
• flex-wrap 属性为 nowrap。（flex元素宽度之和超出flex容器的话，会溢出）

（3）flex-wrap实现多行flex容器
为了实现多行效果，为属性flex-wrap添加属性值wrap。 在项目太大而无法全部显示在一行，会换行显示。
（4）flex元素上的属性。
为了更好地控制 flex 元素，有三个属性可以作用于它们：flex-grow、flex-shrink、flex-basis。这几个 flex 属性的作用其实就是改变了 flex 容器中的布局空白的行为。

• flex-basis
  如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸。这就解释了：我们给只要给Flex元素的父元素声明 display: flex ，所有子元素就会排成一行，且自动分配小大以充分展示元素的内容。
• flex-shrink
  在计算flex元素收缩的大小时，它的最小尺寸会被考虑进去，就是说实际上flex-shrink属性可能会和flex-grow属性表现的不一致。
• flex属性的简写。
  Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。

3.元素间的对齐和空间分配

（1）设置在flex容器上的属性。

• align-items
  align-items 属性可以使元素在交叉轴方向对齐。这个属性的初始值为stretch，这就是为什么flex元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满flex容器 —— 最高的元素定义了容器的高度。 如果不设置该值，那么flex子元素的高度，受其height属性值的影响。

• justify-content
  justify-content属性用来使元素在主轴方向上对齐。注意：direction属性设置在弹性容器上的影响。

• align-content
  如果有一个折行的多条 flex 项目的 flex 容器，使用 align-content 来控制每行之间空间的分配。

（2）设置在flex项目（即flex元素）上的属性。

• align-self。控制交叉轴（纵轴）上的单个 flex 项目的对齐。
  align-items 属性是给所有 flex 项目统一设置 align-self 的对齐属性。这意味着你能给单个 flex 项目明确地声明 align-self 属性。align-self 拥有 align-itmes 的所有属性值，另外还有一个 auto 能重置自身的值为 align-items 定义的值。

4. 使用自动的外边距在主轴上对齐

我们想要处理个别弹性项目在主轴上的对齐，但是没有 justify-items 属性或者 justify-self 属性可用，因为弹性项目会被当成一个组来对齐。然而，我们可以使用自动的外边距来处理一些个别弹性项目或者一组弹性项目想和其他弹性项目分离开的对齐情况。

• 一个常见的案例是导航栏，一些重要项目右对齐，而一组其它主要项目左对齐。
  将需要对齐的项目的 margin-left 属性设置成 auto。**自动的外边距会占据全部的多余的空间——在一个块上设置自动的左右外边距可以使它居中。**两边尽可能占据多的空间，块就被置于中间位置了。
  

5.flex-basis属性

• 若值为auto，则浏览器会检测flex元素是否设置了width，若果设置了，则初始尺寸即为width的值。
• 若没有设置width值，则auto解析为其内容的大小。
• 若设置为0，则浏览器会完全忽略flex元素的大小。

6.弹性盒子用例

（1）导航栏。
（2）元素居中。
（3）绝对底部。