CSS3基础 -- 弹性盒子模型

弹性盒子模型

弹性盒子作用

• 使用弹性盒子，我们可以轻松创建自适应浏览器窗口的流动布局和自适应字体大小的弹性布局。

弹性盒子特点

当我们对一个元素定义它的display属性是flex或inline-flex时，这个元素就会变成一个弹性盒子，会具有弹性盒子特点。

• 当子元素宽度之和小于父元素宽度时，所有子元素最终的宽度就是定义的宽度。
• 当子元素宽度之和大于父元素宽度时，子元素会按照比例来划分。

弹性布局的基本概念

flex容器和flex items

• 采用弹性布局的元素，称为flex容器。
• flex容器的子元素自动成为flex items。

主轴和交叉轴

• 主轴

  • 主轴是水平的。

  • flex items沿着主轴的方向排列。

  • 主轴开始位置是和flex container的交叉点，称为main start。

    • 默认情况，mainstart是主轴和flex container在左边的交叉点。

  • 主轴结束位置是和flex container的交叉点，称为main end。

    • 默认情况，mainend是主轴和flex container在右边的交叉点。

• 交叉轴

  • 交叉轴是垂直的。

  • 交叉轴的开始位置是和flex container的交叉点，称为cross start。

    • 默认情况，cross start是顶部的交叉点。

  • 交叉轴的结束位置是和flex container的交叉点，称为cross end。

    • 默认情况，cross end是底部的交叉点。

弹性盒子的10个属性

flex-grow

• 定义弹性盒子的子元素的放大比例。（只有在弹性盒子子元素宽度之和小于弹性盒子宽度时才会生效）。

  • flex-grow: 数值;

  • flex-grow属性取值的默认值是0，当取值是0的时候，表示不索取父元素的剩余空间，当取值大于0，那么表示索取父元素的剩余空间。

  • 一个例子，父元素下有2个元素A和B，其中父元素宽400px，A宽100px，B宽200px，那么父元素的剩余空间是100px。

    • 如果A和B的flex-grow属性都是0，那么父元素的剩余空间是100px。
    • 如果A的flex-grow属性值是a，B的flex-grow属性是b，那么A的宽变为100 + 100 * a/(a+b)，B的宽变为200 + 100 * b/(a+b)。

flex-shrink

• 定义弹性盒子的子元素的缩小比例。（只有在弹性盒子子元素宽度之和大于弹性盒子宽度时生效）。

  • flex-shrink属性定义当所有子元素宽度之和大于弹性盒子宽度之和时，子元素如何缩小自己的宽度。

    • flex-shrink: 数值;

    • flex-shrink属性取值是一个数值，默认值是1，当flex-shrink属性取值是0时，表示子元素不缩小。

    • 一个例子，弹性盒子元素下有2个子元素，A和B，其中，父元素宽400px，A元素宽200px，B元素宽300px，那么A和B元素之和超出父元素宽度为100px。

      • 如果把A的flex-shrink属性设置为a，B的flex-shrink属性设置为b，那么A的宽度是200 - 200 * (200 * a)/(200 * a + 300 * b)。

flex-basis

• 定义子元素的宽度。

  • flex-basis的作用和width一样，但是在弹性盒子中flex-basis的语义更好。

    • 如果一个子元素同时设置flex-basis属性和width属性，那么flex-basis属性会覆盖width属性。

      • flex-basis属性有2个属性值

        • auto
        • 长度值，单位可以是px、em、百分比。

flex

• flex-grow、flex-shrink、flex-basis的复合属性。

  • flex: grow shrink basis;

    • flex属性的默认值是 0 1 auto。

flex-direction

• 定义弹性盒子子元素的排列方向。（flex-direction属性定义在弹性盒子元素上）。

  • flex-direction: 取值;

    • flex-direction属性有4个取值

      • row（默认值）

        • 横向排列

      • row-reverse

        • 横向反向排列

      • column

        • 纵向排列

      • column-reverse

        • 纵向反向排列

  • 换句话就是定义弹性盒子中的子元素是横着排还是竖着排。

  • flex-direction实际上定义的是flex容器的主轴方向。

flex-wrap

• 定义弹性盒子子元素是单行显示还是多行显示。

  • flex-wrap: 取值;

  • flex-wrap属性的3个取值

    • nowrap（默认值）

      • 单行显示。

    • wrap

      • 多行显示（换行显示）。

    • wrap-reverse

      • 多行显示，但是是反方向的。

        • 把wrap的结果整个倒过来。

flex-flow

• flex-direction、flex-wrap的复合属性。

  • 我们可以使用flex-flow属性来同时设置flex-direction属性和flex-wrap属性。
  • flex-flow: direction wrap;
  • flex-flow属性的默认值是row nowrap。

order

• 定义弹性盒子的子元素的排列顺序。

  • order属性的取值是一个正整数。

    • 越小的order，将会排在前面。

  • order: 取值;

justify-content

• 定义弹性盒子的子元素在主轴上的对齐方式。

  • justify-content: 取值;

  • justify-content 属性有5个属性值

    • flex-start（默认值）

      • 所有flex items靠主轴起点对齐。

    • center

      • 所有子元素靠主轴中点对齐。

    • flex-end

      • 所有子元素靠主轴终点对齐。

    • space-between

      • 所有子元素平均分布。

    • space-around

      • 所有子元素平均分布，但两边留有一定的间距。

align-items

• 定义弹性盒子的子元素在交叉轴上的对齐方式。

  • align-items: 取值;

  • align-items属性的5种取值。

    • flex-start（默认值）

      • 所有子元素在cross start处。

    • center

      • 所有子元素在交叉轴中点。

    • flex-end

      • 所有子元素在cross end处。

    • baseline

      • 所有子元素在弹性盒子基线处。

    • stretch

      • 拉伸子元素以适应弹性盒子高度。

XMind: ZEN - Trial Version