记录学习 flex 布局
基本概念
flex 布局也被称为弹性布局, 定义容器的规则而尽可能不操作子元素, 通过父容器设置 flex 属性来控制子元素的排布方式.
flex 布局的核心是父容器的 display: flex 属性和子元素的 flex 属性,
具有 display: flex 的元素称为 flex 容器, 子元素称为 flex 项.
采用 flex 布局的元素, 称为 flex 容器 (flex container) 简称 “容器”. 它的所有子元素自动成为容器成员, 称为 flex 项目 (flex item) 简称 “项目”.
主轴 交叉轴
flex 布局支持横向和纵向, 把 flex 延伸的方向称为 “主轴”, 把跟它垂直的方向称为 “交叉轴”, flex 项中的 width 和 height 就会称为交叉轴尺寸或者主轴尺寸
默认主轴是水平方向
左上角是起点
容器 (父元素) 属性
flex-direction
定义主轴方向
.container {
display: flex;
flex-direction: row / column;
}
justify-content
定义了子元素在主轴方向的 前, 后, 和 居中 的对齐方式
align-items
定义子元素在交叉轴 前, 后, 和 居中 的对齐方式
flex-wrap
超出容器轴线长度后, 是否换行
align-content
定义了 多行项目 (多行子元素) 在交叉轴的对齐方式
项目 (子元素) 属性
order
根据其数值定义元素的排序
align-self
允许项目自身有单独的交叉轴对齐方式, 让项目覆盖 (override) 容器的 align-items 值
flex
是 flex-grow, flex-shrink, flex-basis 三个子元素属性的简写.
默认值 0, 1, auto
flex-grow
按照容器剩余空间的比例, 放大元素, 填充容器 (放大子元素, 填充父元素)
flex-shrink
按被挤压空间的比例缩小元素
flex-basis
元素初始大小, 默认 auto, 根据主轴长度分配, 简写和分开设置可能效果不一致, 建议使用简写
