14.Flexbox 速查表 & 在容器中适配图像

文章预览

Flexbox 速查表 容器 display: flex 或 display: inline-flex : 为该元素的直接子元素创建一个 flex 上下文(或内联 flex 上下文) flex-direction 决定容器的主轴和交叉轴,有效值为: row (默认): 水平方向,与书写方向一致(英语为从左到右) row-reverse : 水平方向,与书写方向相反(英语为从右到左) column : 垂直方向,从上到下 column-reverse : 垂直方向,从下到上 flex-wrap 决定 flex 项目是否尝试适应一行,有效值为: nowrap (默认): 所有 flex 项目都在一行上 wrap : flex 项目将换行到多行,从上到下 wrap-reverse : flex 项目将换行到多行,从下到上 flex-flow : flex-direction 和 flex-wrap 的简写 正式语法: flex-flow: || justify-content 定义沿主轴的对齐方式,有效值为: flex-start (默认): 从起点开始排列 flex 项目 flex-end : 从终点开始排列 flex 项目 start : 从起点开始排列项目 end : 从终点开始排列项目 left : 从左 ………………………………