将容器指定为Flex布局
display:flex ——>d-flex
display:-webkit-flex /*Safari*/
*float clear vertical-align失效
行内元素
display:inline-flex ->d-inline-flex ||.d-sm-flex
六个容器上的属性
*flex-direction 项目排列方向
*flex-wrap 换行方式
*flex-flow 上面两个的缩写
*justify-content 横向对齐方式
*align-items 单行的垂直对齐方式
*align-content 多行的对齐方式
flex-direction 决定项目的排列方向
*row 从左向右 ->flex-row
*row-reverse 从右向左 ->flex-row-reverse
*column 从上到下 ->flex-column
*column-reverse 从下到上 ->flex-column-reverse
当为竖向对齐时 下margin自动 ->mb-auto
<div class="d-flex align-items-start flex-column" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
上margin自动 -> mt-auto
flex-wrap 换行方式
*nowrap 不换行 ->flex-nowrap
*wrap 顺序换行 ->flex-wrap
*wrap-reverse 换行之后的在上方
flex-flow 上面两个的缩写
justify-content 横向对齐方式
*flex-start 左对齐 ->justify-content-start
*flex-end 右对齐 ->justify-content-end
*center 居中 ->justify-content-center
*space-between 两端对齐 项目间隔相等 ->justify-content-between
*space-around 两端留出空白 项目之间的间隔比两端的空白大一倍 justify-content-around
*当justify-content为默认左对齐时 可以使用自动margin
*mr-auto 自动将右margin填满 将自身右边的元素挤到旁边去
<div class="d-flex">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
*ml-auto
align-items 垂直对齐方式
*stretch 占满容器 ->align-items-stretch
*flex-start 上方对齐
*flex-end 下方对齐
*center 居中对齐
*baseline 第一行文字对齐
align-content
*stretch 轴线占满真个交叉轴
*flex-start 交叉轴的起点 -> align-content-start
*flex-start 交叉轴的终点
*center 交叉轴的中点
*space-between 交叉轴的两端对齐 轴线间隔平均分布
*space-around 两端留出空白 项目之间的间隔比两端的空白大一倍
六个项目上的属性
*order 排列顺序
*flex-grow 放大比例
*flex-shrink 缩小比例
*flex-basis 横向空间
*flex 上面三个简称
*align-self 垂直对齐的属性
order 项目的排列顺序
*默认为0 数值越大 越往后排 ->order-3
flex-grow 项目放大比例
*默认为零
*2比1 的空间大一倍
flex-shrink 缩小比例
默认为1 空间不足会缩小
0 空间不足不会缩小
flex-basis 项目占据横向的空间
*auto
*length 长度 多少px
flex 上面三个的简称
*0 1 auto
*auto (1 1 auto)
*none (0 0 auto)
align-self 单个元素垂直对齐的属性
可继承align-items
单独设置时 单独生效
*stretch 占满容器 align-self-stretch
*flex-start 上方对齐
*flex-end 下方对齐
*center 居中对齐
*baseline 第一行文字对齐