父元素控制子元素的布局方案, 需要给父元素添加flex样式,
被添加的元素称为容器, 所有子元素自动成为容器成员(flex项目)
display: flex/inline-flex (对内,对外), flex对外显示为块级元素, 独占一行
子元素 float/clear/vertical-align 失效
主轴: 从第一个元素到第二个元素的方向为主轴方向,
交叉轴: 元素满一行之后换行的方向
flex-direction(盒子排列方向, 也是主轴朝向):
row(默认), 从左到右的水平方向排列
row-reverse, 从右到左与row相反
column, 从上往下排列
column-reverse, 从下往上排列与column相反flex-wrap(内部盒子换行方向, 交叉轴的朝向):
nowrap(默认), 默认单行(弹性压缩)
wrap, 多行显示, 超出换行, 类似float, 高度不塌陷, 从上往下换行
wrap-reverse, 翻转wrap排列, 从下往上换行direction和wrap合并写法:
flex-flow: row nowrap(默认)
内部子元素对齐方式
justify-content(项目在主轴对齐方式)
flex-start: (默认) 当前轴起始位置开始排列
flex-end: 当前轴起始位置对面开始排列
center: 居中排列
space-between: 将空隙均分到元素间排列, 行要有空余
space-around: 包含收尾均分, 行要有空余align-content(多行元素[列]对齐方式)
flex-start: 起点对齐
flex-end: 起点对面对齐
center: 居中展示
stretch: 均分交叉轴宽度
space-between: 均分间距
space-around: 包含收尾均分间距align-items(单行控制), 当前排列行或者列的对齐方式
stretch(默认): 内部元素没有设置高度将拉伸占满
flex-start: 内部元素顶部对齐
flex-end: 内部元素底部对齐
center: 内部元素中线对齐
baseline: 项目第一行文字基线对齐
项目元素在交叉轴上没有长度, 那么它会默认填满当前交叉轴的长度
item项目样式(设置在每个元素的样式, 用于单独控制)
order(可0可负数), 定义项目的排列顺序, 序号越小越在前面, 和元素的书写顺序无关, 默认元素order为0, 大于0, 必然在默认为0的后面
<ul>
<li>1</li>
<li style="order:1;">2</li>
<li>3</li>
</ul>
flex-grow: 单个元素的放大比例
flex-grow, 默认为0
将多余的空间按flex-grow分配
考虑当前所有元素的flex-grow的值, 按比例进行分配
flex-shrink: 单个元素的缩小比例
flex-shrink: 默认为1, 如果空间不足缩小比例, 越大收缩越多
将超出的部分按flex-shrink比例分配
注意: flex-shrink: 0表示刚体不缩小, 不支持负数
flex-basic: 长度(规定长度)
auto: 默认; content: 基于内容自动计算
flex 缩放合并写法(item复合写法)
flex-grow flex-shrink flex-basic
auto(1,1,auto) 正常的盒子(会被压缩拉伸的物体)
none(0,0,auto) 钉子户的盒子(不具有弹性的物体)
align-self 特殊对齐方式
允许单个项目拥有其他项目不一样的对齐方式, 可覆盖align-item属性
auto, 默认, 继承父元素的align-items属性
flex-start/flex-end/center/baseline/stretch
