弹性盒子(flexbox布局的优点是可以根据需要自动修改弹性容器内项目的间距和大小。)

实现弹性盒子布局： 需要借助于 display：flex

　弹性容器属性：

  1. display:flex 实现弹性布局（加给弹性容器）

  2. flex-direction 主轴 侧轴: 决定元素如何排列（主轴方向确定之后，另一个轴自然变成侧轴）

    • row（默认值）
    • row-reverse（水平反向）
    • column（垂直）
    • column-reverse（垂直反向）

  3. justify-content 定义弹性项目在主轴上的对齐方式

    • flex-start（默认值：起点对齐）
    • flex-end（终点对齐）
    • center（中点对齐）
    • space-around
    • space-between

      区别：

  • space-around:所有的弹性项目均分剩余的空间
  • space-between:首尾项目靠边,中间的项目均分剩余的空间

  1. align-items 定义弹性项目在侧轴上的对齐方式：

    • flex-start（默认值：起点对齐）
    • flex-end（终点对齐）
    • center（中点对齐）
    • stretch（默认值， 弹性项目拉伸）
    • baseline（当盒子、内容文字大小不一时基线对齐）
    • stretch 生效的条件：弹性项目没有设置高度,默认是拉伸；如果弹性项目设置高度,则显示为flex-start的效果，弹性项目使用自身的高度

  2. flex-wrap定义弹性项目换行：

    • nowrap（默认值）
    • wrap（换行）
    • wrap-reverse（反向换行）

  3. flex-flow综合属性（定义主轴和换行）

    • flex-direction（主轴方向）
    • flex-wrap（换行取值）

  4. align-content定义多行弹性项目在侧轴的对齐方式

    • flex-start（默认值：起点对齐）
    • flex-end（终点对齐）
    • center（中点对齐）
    • space-around（所有的弹性项目均分剩余的空间）
    • space-between（首尾项目靠边,中间的项目均分剩余的空间）
    • stretch（默认值，拉伸， 生效条件是弹性项目不能设置高度）

弹性项目属性

  1. align-self 定义弹性项目自身的对齐方式

    • flex-start（默认值：起点对齐）
    • flex-end（终点对齐）
    • center（中点对齐）
    • baseline
    • stratch

      区别：

  • align-items：统一控制弹性项目在侧轴上的对齐方式
  • align-self：控制元素自身对齐方式， 给弹性项目添加改属性，则会覆盖 align-items 属性

  1. order 定义弹性项目的排序（默认值为0）

    • 属性值为数字，取值可正可负；值越小越靠前，值越大越靠后

  2. margin 在弹性项目上的使用

    • 给弹性项目添加 margin 指定某个方向margin值为 auto; 则该项目会自动占有剩余的空间；多个项目添加则共同均分剩余空间
  3. flex 平均分配容器的空间
  • 步骤：
  • （1）给所有的弹性项目添加 flex：1
  • （2）指定弹性项目 flex:2;
  • （3）计算每个弹性项目的宽度：(容器的总宽度 - 弹性项目所有边框的宽度) / flex的伸展系数之和 = 每一份弹性项目的宽度
  • （4）针对 flex:2 的项目 单独计算：每一份宽度 * flex 的占比

  1. flex-shrink 前提条件是（容器的总空间<弹性项目的总宽度，没有剩余的空间，均分弹性项目的空间）

    • （1）给所有的弹性项目添加 flex-shrink：1；
    • （2）指定弹性项目 flex-shrink：2；
    • （3）计算不足的空间：
  • 弹性项目的总宽度(设置的宽度+border) - 容器的总宽度 = 不足的空间
  • 计算每一份空间 ： 不足的空间 / flex-shrink的系数之后 = 每一份不足的空间
  • 计算弹性项目的实际宽度：弹性项目设置的宽度 - 每一份不足的空间 * 弹性项目flex-shrink的占比 = 弹性项目的宽度

  1. flex-grow 前提条件是（容器的总空间>弹性项目的总宽度,有剩余的空间,均分容器的空间）

    • （1）给所有的弹性项目添加 flex-grow：1；
    • （2）指定弹性项目 flex-grow：2；
    • （3）计算不足的空间：
  • 容器的总宽度 - 弹性项目的总宽度(设置的宽度+border) = 多余的空间
  • 计算每一份空间 ： 多余的空间 / flex-grow的系数之后 = 每一份的空间
  • 计算弹性项目的实际宽度： 弹性项目设置的宽度 + 每一份的空间 * 弹性项目flex-grow的占比 = 弹性项目