关于CSS3中弹性盒模型布局的问题

关于CSS3中弹性和模型模块中弹性容器和弹性项目属性的总结

针对弹性“容器”

• 将容器设置为弹性容器
  使用display属性设置弹性容器
  display:flex; /* 将容器设置为弹性容器后，其中所有的子代标签将成为弹性项目 */

---

• flex-direction属性
  确定容器中项目的排列方式

  • flex-direction:row; /* 默认，各个弹性项目根据其在HTML中的顺序并排显示 */
  • flex-direction:row-reverse; /* 各个弹性项目根据其在HTML中的逆序并排显示 */
  • flex-direction:column; /* 各个弹性项目根据其在HTML中的顺序垂直显示 */
  • flex-direction:column-reverse; /* 各个弹性项目根据其在HTML的逆序垂直显示 */

• flex-wrap属性（以下以元素横排为例）
  确定容器中项目是否换行

  • flex-wrap:nowrap; /* 默认，不管弹性容器有多窄，总是在一行里显示所有弹性项目 */
  • flex-wrap:wrap; /* 当弹性容器不足以容纳弹性项目时，换行显示多余的弹性项目 */
  • flex-wrap:wrap-reverse; /* 类似于wrap，但是优先换行前面的弹性项目 */

flex-direction和flex-wrap属性可合写为flex-flow属性

---

• justify-content属性
  确定容器中项目的水平对齐方式
  • justify-content:flex-start; /* 默认，弹性项目向第一个项目靠拢并排显示 */
  • justify-content:flex-end; /* 弹性项目向最后一个项目靠拢并排显示 */
  • justify-content:center; /* 弹性项目显示在容器中间 */
  • justify-content:space-between; /* 两边的弹性项目向两边靠拢，其余项目均匀显示 */
  • justify-content:space-around; /* 所有弹性项目均匀显示 */

---

• align-items属性
  确定容器中项目的垂直对齐方式
  • align-items:flex-start; /* 把各个弹性项目的上边和容器的上边对齐 */
  • align-items:flx-end; /* 把各个弹性项目的下边和容器的下边对齐 */
  • align-items: center; /* 把各个弹性项目的纵向中心线和容器的纵向中心线对齐 */
  • align-items: baseline; /* 按各个弹性项目的第一个元素的基线对齐 */
  • align-items: stretch; /* 默认，拉伸高度较小的弹性项目，强制所有弹性项目高度统一 */

---

• align-content属性
  设置显示为多行的弹性项目在弹性容器中纵向堆叠的方式，当且仅当弹性容器允许换行（flex-wrap的属性值不为nowrap）且弹性容器的高度大于各行高度之和（保证有足够的纵向堆叠空间）时该属性才起作用。
  • align-content:flex-start; /* 所有弹性项目尽量堆叠在容器上方 */
  • align-content:flex-end; /* 所有弹性项目尽量堆叠在容器下方 */
  • align-content:center; /* 所有行之整体的纵向中心线和容器的纵向中心线对齐 */
  • align-content: space-between; /* 上下项目行分别在容器上下放，其余项目行均匀分布 */
  • align-content: space-around; /* 所有容器行均匀分布 */
  • align-content:stretch; /* 默认，拉伸各行高度，使每行高度相同 */

---

---

针对弹性项目

• order属性
  用于强制更改弹性项目在弹性容器中HTML源代码内的位置。该属性的值是一个整数值，作用效果类似于z-index。
• align-self属性
  类似于弹性容器的align-item属性，不过其作用范围仅限为该弹性项目，可以用该属性覆盖弹性容器针对所有弹性项目设置的align-item属性。
• flex属性
  这是针对弹性项目最大的难点。
  flex属性是flex-grow、flex-shrink、flex-basis三个属性的缩写（属性值书写时也应按照这个顺序）。
  其中flex-basis属性确定弹性项目的基准宽度，以拟人化的说法，即这个弹性项目“想要”多大的宽度。
  在不允许换行的前提下，弹性项目不一定正好填充整个弹性容器，可能不足，也可能溢出。
  1.当弹性项目的宽度不足以填满弹性容器时，多余的空间由各个项目的flex-grow属性确定。计算方式为延申的宽度=该项目flex-grow的值/各个项目flex-grow属性值之和。
  2. 当弹性项目的宽度溢出弹性容器时，各个项目缩窄的宽度由flex-shrink属性确定，计算方式与flex-grow类似。
  注意，项目最小缩窄到它能缩窄的宽度，剩余溢出宽度由剩余项目按flex-shrink属性比例分配。
  如果允许换行，则每一行的宽度由该行的flex-grow属性比例分配。