>[danger] 弹性布局 --- 使用display: flex; 标签 为 (伸缩容器), 每个子元素为 (伸缩项目), 子元素的浮动 / vertical-align失效 >[info]父元素内: * flex-direction 项目排列方向 * flex-wrap 一条线排列不下, 如何换行 * flex-flow 是上面2个属性的复合写法ß * justify-content 在主轴对齐方式 * align-items 交叉轴方向(与主轴对立那个)对齐方式 * align-content 多根交叉轴方向对齐方式(一般flex-wrap配合用), 值与justify-content相等 --- * flex-direction的值: * row（默认值）：主轴水平方向，起点左端 * row-reverse：主轴水平方向，起点右端 * column：主轴垂直方向，起点上端 * column-reverse：主轴垂直方向，起点下端 * flex-wrap的值: * nowrap: 不换行 * wrap: 换行 (第一行在上方) * wrap-reverse: 换行 (第一行在下方) * justify-content的值: (主轴) * flex-start: 排列方向起点对齐 * flex-end: 排列方向终点对齐 * center: 居中 * space-between: 两端对齐, 元素之间有空隙 * space-around: 项目用空隙环绕, 元素之间是端的二倍空隙 * align-items的值: * flex-start：交叉轴的起点对齐 * flex-end：交叉轴的终点对齐 * center：交叉轴的中点对齐 * baseline: 元素的第一行文字的基线对齐 * stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度 >[info]子元素内: * flex 弹性元素如何伸长或缩短, 适应flex容器中的可用空间 * flex-grow 有剩余空间的时候，分配给元素的比例 * flex-shrink 空间不足的时候，元素缩小的比例, 如果给0, 则不缩小 (用的少) * flex-basis 分配空间之前，元素占据主轴的空间, 默认值auto, 项目原本大小 * order 按照数值(默认0), 由小到大, 根据父级指定排列方向, 正向排列 * align-self 单独设置排列方式覆盖继承的, 默认继承于父级align-items ---- * flex: 复合写法: flex-grow flex-shrink flex-basis * 表格如下 | flex 值 | 相当于flex-grow, flex-shrink, flex-basis 对应的值 | | --- | --- | | flex: 1 | flex: 1 1 0 | | flex: 100px| flex: 1 1 100px | |flex: 默认值 | flex: 0 1 auto| |flex: auto | flex: 1 1 auto| |flex: none | flex: 0 0 auto | * flex-grow: 有剩余空间的时候，分配给元素的比例 * 例1: 三个flex-grow: 1(等同三个flex: 1)效果 * 例2: 中间的flex-grow值2, 左右都为1, 效果: * 例3: 中间的flex的值: 2, 左右的flex值1 效果 > 讲解上面图片, 分配空间步骤 --- 例2: flex-basis: 默认auto; 元素本身的大小 so, 剩余的空间 = 父级宽度 - 元素本身大小 * 3(个span) 剩余空间分4份, 左右为1份, 中间的2份, 每个span还得算上原本的大小 例3: flex-basis: 看上面表格为0, 所以不考虑自身大小, 直接把父级宽度 / 3, 每个人分配 * order: 按照数值(默认0), 由小到大, 根据父级指定排列方向, 正向排列  --- >[danger] 最忠诚的建议 --- 建议优先使用flex复合写法, 会自己推断3个属性的值