×
  • 的CSS Flexbox–完整的初学者指南

  • Flex容器属性

    课程清单

    在本课程中,让我列出可以在flex容器中应用的所有属性。

    • 显示 : display: flex this is what defines a flex container and its mandatory to work with flexbox.
    • 弯曲方向 :

      弹性方向: 行反向 定义伸缩项目在容器中的放置方向。

      描述
      默认值。柔性项目水平显示,连续
      行反向 与行相同,但顺序相反
      柔性项目垂直显示为一列
      列反转 与列相同,但顺序相反
      初始 将此属性设置为其默认值。
      继承 从其父元素继承此属性。
    • 弹性包装 :

      柔性包装: 包 用于控制容器内物品的包装。

      描述
      Nowrap 默认值。指定不包装柔性物品
      指定必要时将包装柔性物品
      绕回 指定如果需要,弹性项目将以相反顺序包装
      初始 将此属性设置为其默认值。
      继承 从其父元素继承此属性。
    • 弹性流 :

      flex-flow: 行反向 包 its a shorthand for the combination of 弹性方向 and flax-wrap

      描述
      弹性方向 可能的值:

      行反向

      列反转

      初始

      继承

      默认值为“行”。

      指定弹性项目的方向

      柔性包装 可能的值:

      Nowrap

      绕回

      初始

      继承

      默认值为“ Nowrap ”。

      指定是否应包装柔性物品

      初始 将此属性设置为其默认值。
      继承 从其父元素继承此属性。
    • 证明内容合理 :

      justify-content: 中央 它定义了物品沿主轴的对齐方式。

      描述
      弹性启动 默认值。物品位于容器的开头
      柔性端 物品位于容器的末端
      中央 物品位于容器的中央
      间隔 项目在行与行之间留有间隔
      周围空间 项目在行之前,行之间和行之间留有空间
      初始 将此属性设置为其默认值。
      继承 从其父元素继承此属性。
    • 对齐项目 :

      align-items: 中央 它定义了弹性项目如何沿横轴布置。

      描述
      伸展 默认。物品被拉伸以适合容器
      中央 物品位于容器的中央
      弹性启动 物品位于容器的开头
      柔性端 物品位于容器的末端
      基线 物品位于容器的基线
      初始 将此属性设置为其默认值。
      继承 从其父元素继承此属性。
    • 对齐内容 :

      align-content: 中央 它定义了弹性项目如何沿横轴布置。

      描述
      伸展 默认值。线拉伸以占据剩余空间
      中央 线朝向伸缩容器的中心打包
      弹性启动 行被打包到flex容器的开始
      柔性端 行被打包到伸缩容器的末端
      间隔 线均匀分布在flex容器中
      周围空间 线均匀分布在flex容器中,两端各占一半
      初始 将此属性设置为其默认值。
      继承 从其父元素继承此属性。
    flex容器属性

  • 启用通知    不用了,谢谢