flex 布局 教程笔记

flex 布局

容器属性
flex-flow ［flex-direction］［flex-wrap］

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，将占满整个容器的高度。

align-content ｜多轴线对齐方式｜

flex-start：
flex-end：
center： 与交叉轴的中点对齐
space-between：保持相等间隔两端对齐
space-around： 中间间隔两倍于两端
stretch(默认值)：轴线占满整个交叉轴。

项目属性
order 定义排序 数越小越前
flex-grow 剩余空间分配的比例关系 定义放大比列， 默认为0，为 0 时不放大
flex-shrink 定义缩小比列，默认为 1，空间不足时自动缩小；为 0 时不缩小
flex-basis 定义项目基础空间，默认auto项目本来大小
align-self 定义项目自己的对齐方式
flex [flex-grow] [flex-shrink] [flex-basis] 简写式

flex: 默认值 [0 1 auto] | [auto] (1 1 auto) | [none] (0 0 auto)

align-self:
auto 表示继承父元素的align-items，如果无父元素等同stretch
flex-start
flex-end
center
baseline
stretch

主轴方向 由 flex-direction属性确定

flex 属性 [flex-grow] [flex-shrink] [flex-basis]
basis 设置为0，分配所有空间 ，可得到每个项目宽的精准比列

flex 应用

父元素包含不定数量子元素

带图标input输入框
父元素包裹图标和输入框，display：flex
input添加属性 flex：1

子项目的排序能力 通过order和flex-direction

切换排列顺序 flex-direction