十分钟学会弹性盒子:https://www.jianshu.com/p/f21b799d268a
flex布局的小教程:http://flexboxfroggy.com/
display: flex;
flex-wrap: wrap; 换行
flex-wrap: wrap-reverse; 换行但是位置是反的
主轴方向&换行复合写法
flex-flow:row wrap; 主轴方向,弹性项目换行
主轴方向
flex-direction: row; 从左到右(默认)
flex-dirction: row-reverse; 从右到左
flex-direction: column; 从上到下
flex-direction: column-reverse; 从下到上
主轴方向 高度进阶
justify-content: flex-start; 左对齐
justify-content: flex-end; 右对齐
justify-content: center; 居中
justify-content: space-between; 两端对齐
justify-content: space-around; 每个子元素间隔等分,两端留白
justify-content: space-evenly; 左右均匀分布
弹性项目交叉轴方向排布
align-items: strech 默认值没有高度会填满整个容器高度
align-items: flex-start 交叉轴的起点对齐(上面)
align-items: flex-end 交叉轴的终点对齐(底边)
align-items: center 交叉轴的中点对齐(子项中线中间)
align-items: baseline 第一行文字的基线对齐(很少用太丑)
<!-- 进阶会影响我,会失效 --!>
align-conten: stretch; 默认值。高度会分成几等分(弹性项目数量)
align-content: center; 所有子盒子会居中对齐
align-content: flex-start; 元素位于容器的开头
align-content: flex-end; 元素位于容器的结尾
align-content: space-between; 各行在弹性盒容器 平均分布
align-content: space-around; 各行在弹性盒容器平均分布,两端留白
弹性大小因子复合写法
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三属性的简写总和
flex: 1 1 auto; 简写(flex: 1;)
flex: 0 0 auto;
flex-grow:2; 扩大分成两份
flex-shrink:2; 缩小成2份
flex-basis: 20px; 单个弹性项目设置尺寸
弹性项目的排布顺序
设置子盒子的排列顺序 按照坐标系的方向,数值越大越靠近
横向,纵向都能设置,看坐标系的方向
有个小技术,两个子盒子互换位置,悬停加上这两个属性不就很轻松,不用设置平移距离 定位
order: 1;
单个弹性项目的位置设置
align-self: auto; 默认
align-self: flex-start; 顶部对齐
align-self: flex-end; 底部对齐
align-self: center; 居中对齐
align-self: baseline; 文本基线对齐
align-self: stretch; 上下对齐并填满