CSS笔记 - 弹性盒

13. 弹性盒

• flex弹性盒是css中的一种布局手段，主要用来代替浮动来完成页面的布局。flex可以让元素随页面大小的改变而改变

13.1 弹性容器

• 使用display来设置弹性容器：
  • flex 设置为块级弹性容器
  • inline-flex 设置为行内的弹性容器

主轴

• 弹性元素的排列方向称为主轴

• 常用属性：

  • flex-direction 设置容器中弹性元素的排列方式

    • row 默认值，弹性元素在容器中自左向右水平排列
    • row-reverse 弹性元素在容器中自右向左水平排列
    • column 弹性元素自上向下纵向排列
    • column-reverse 弹性元素自下向上纵向排列

  • flex-wrap 设置弹性元素是否在弹性容器中自动换行

    • nowrap 默认值，元素不会自动换行
    • wrap 元素沿着辅轴方向自动换行

  • flex-flow 可以同时设置flex-direction 和flex-wrap

  • justify-content 设置如何分配主轴上的（空白）空间

    • flex-start 元素沿着主轴的起始边开始排列
    • flex-end 元素沿着主轴的终边开始排列
    • center 元素居中排列
    • space-around 空白分布到元素两侧
    • space-between 空白均匀分布到元素中间
    • space-evenly 空白分布到元素的单侧

辅轴

• 与主轴方向垂直的方向称为辅轴

• 常用属性：

  • align-items 设置元素在辅轴上如何对齐
    • stretch 默认值，将元素的长度设置为相同的值
    • flex-start 元素不会拉伸，沿着辅轴的起始边对齐
    • flex-end 沿着辅轴的终边对齐
    • center 居中对齐
    • baseline 基线对齐
  • align-content 如何分配辅轴上的（空白）空间
    • flex-start 元素沿着辅轴的起始边开始排列
    • flex-end 元素沿着辅轴的终边开始排列
    • center 元素居中排列
    • space-around 空白分布到元素两侧
    • space-between 空白均匀分布到元素中间
    • space-evenly 空白分布到元素的单侧

弹性居中

justify-content: center;
align-items: center;

13.2 弹性元素

• 弹性容器的子元素就是弹性元素，弹性元素同时也可以是弹性容器
• 常用属性：
  • flex-grow 指定弹性元素的伸展系数，默认为0
    • 当父元素有多余空间是，子元素根据系数按比例分配空间
  • flex-shrink 指定弹性元素的收缩系数，默认值为1
    • 当父元素内空间不足以容纳所有子元素时，子元素根据系数按比例分配空间
  • order 设置弹性元素的排列顺序