HTML入门第十一天之一天学会弹性盒子

弹性盒子

display: flex

变成弹性盒子

• flex-direction: 主轴方向

  • row水平向右
  • row-reverse水平向左
  • column竖直向下
  • column-reverse竖直向上

• flex-wrap换行

  • :nowrap不换行
  • wrap换行
  • wrap-reverse向反方向换行

• justify-content

  • 定义了项目在主轴上的对齐方式

    • flex-start（默认值）：开始对齐

    • flex-end：结束方向对齐

    • center

      • 居中

    • space-between

      • 两端对齐项目之间的间隔都相等空白在项目的中间

    • space-around

      • 每个项目两侧的间隔相等。空白在项目中间两边所以，项目之间的间隔比项目与边框的间隔大一倍

    • space-evenly

      • 每个项目两侧的间隔相等。空白在项目中间两边所以，项目之间的间隔比项目与边框的间隔一样大

• align-items

  • 交叉轴的对齐结果

    • flex-start（默认值）：开始对齐

    • flex-end：结束方向对齐

    • center

      • 居中

    • baseline

      • 基线对齐

        • 及其中的文本对齐

    • stretch

      • 若项目未设置位置将占满整个容器

• align-content

  • 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

    • flex-start

      • 与交叉轴的起点对齐

    • flex-end

      • 与交叉轴的终点对齐

    • center

      • 与交叉轴的中点对齐

    • space-between：

      • 与交叉轴两端对齐，轴线之间的间隔平均分布

    • space-around

      • 每个项目两侧的间隔相等。空白在项目中间两边所以，项目之间的间隔比项目与边框的间隔大一倍

    • stretch

      • 默认轴线占满整个交叉轴

• order

  • 定义了项目的顺序

    • 默认为0值越大越往后

• flex-grow

  • 定义项目的放大

    • 默认为o

      • 不放大

    • 所有项目的flex-grow属性都为1，则它们将等分剩余空间。

    • 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

• flex-shrink

  • 定义项目的缩小

    • 默认为1

      • 当空间不足时项目将缩小

    • 为0时

      • 不缩小

• flex-basis

  • 项目在主轴上的大小

• Flex

  • flex-grow

  • flex-shrink

  • flex-basis

  • none

    • 0 0

      • 不放大也不缩小

  • auto

    • 1 1

      • 自动放大和缩小

• align-self

  • 允许单个项目和其他项目排列顺序不一致

    • 可覆盖align-items属性。

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效