flex布局——速记
文章目录
flex 简介
概念：采用flex布局的元素，称为flex容器，他的所有子元素自动称为容器成员，call flex项目（flex item)。详细请参考MDN参考文档
主轴&交叉轴（侧轴）
具体如下图
容器的属性
flex-direction：定义主轴的方向
row(默认值)：主轴为水平方向，起点在左
row-reverse：---------------------------------右
colum：主轴为垂直方向，起点在上
colum-reverse:------------------------下
flex-warp :定义轴线占满时是否换行
nowarp(默认)：不换
warp:换，超出的显示在轴线下方
warp-reverse:-------------------上方
flex-flow:flex-direction和flex-warp 的合并简写形式
row nowarp(默认值)
justify-content:定义子元素在主轴上的对齐方式
flex-start:(默认值） 左对齐
flex-end:---------------右对齐
center:-----------------居中
space-between：将多余空间在子元素间平分，两端不留白
space-around:将多余空间在元素和两端间平分，两端间距为元素间间距一半
space-evenly:两端 元素间间距都相
align-content：定义多根轴线的对齐方式，只有一根时该属性无效
stretch(默认值）:轴线占满整个交叉轴
flex-start:交叉轴 起点对齐
flex-end:-----------终点
center:--------------中心
space-between:两端对齐，轴线间间隔平均分配
space-around:每根轴线两侧间隔相等，轴线间间隔比轴线与边框大一倍
align-items ：定义元素在交叉轴上如何对齐
stretch(默认值)：若元素为设置高度和auto ,默认占满容器高度
flex-start: 交叉轴 起点对齐
flex-end:------------终点
center:--------------中心
baseline:元素第一行文字对齐
元素的属性
order :定义元素的排列顺序，递增排序，默认0
flex-grow:定义元素的放大比例 默认 0，即存在剩余空间也不放大
都为1 则等分剩余空间
flex-shrink:定义元素的缩小比例 默认1 即空间不足 ，该元素将缩小
都为1 ，空间不足时，都等比例缩小
一个为0 其他为1 ，不足时 0 不缩小
flex-basis:定义在分配多余空间之前 元素占据的主轴空间
默认auto 即项目原本大小
可设置成xxx px 固定大小
flex : lex-grow、flex-shrink、flex-basis 的简写
默认 0 1 auto 后2个可选
align-self: 允许单个元素与其他元素有不一样的对齐方式，可覆盖 align-items 属性
默认 auto 表示继承父的align-items 属性
可能写得不是很完整，只是做项目时需要使用，在此小计一下，后面再详细补充，若有不对，还望指教o_0