⽬录
Bootstrap 布局之Flex
  概述：bootstrap 的flex 布局基于Direction 相关的两个css flex-row 和 flex-column ，flex-row 是默认样式。基于这两个样式，应⽤justify-content ，align-items 等样式进⾏⽔平，垂直⽅向的对齐。
  Direction : flex-row 和 flex-column 确定了元素排列的⽅向，实验如下：      .flex-row ：让元素⽔平排列效果如下：      .flex-column ：让元素垂直排列
      效果如下：
      当Direction 设置为 .flex-row  时
        justify-content （内容整理）：设置元素在⽔平⽅向上 (X 轴) 的分布
.justify-content-start ：靠左排列
.justify-content-end ：靠右排列
.justify-content-center ：居中排列
.justify-content-between ：中间元素平均分布
.justify-content-around ：所有元素平均分布
        效果如下：
        align-items ：设置元素在垂直⽅向的（Y 轴）定位
.align-items-start ：靠顶部排列
.align-items-end ：靠底部排列
.align-items-center ：居中排列
.align-items-baseline ：
.align-items-stretch ：垂直拉伸布满⽗容器
          效果如下：
        align-self ：单独设置某个元素的垂直定位
          效果如下：flex布局对齐方式
        flex-fill ：设置元素 ⽔平拉伸
        效果如下：
  当Direction设置为.flex-column时，以上反之。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。