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: <'flex-direction'> || <'flex-wrap'>
• justify-content 定义沿主轴的对齐方式,有效值为:
• flex-start (默认): 从起点开始排列 flex 项目
• flex-end: 从终点开始排列 flex 项目
• st