flexbox
- 弹性盒子是一种用于按行或按列布局元素的一维布局方法
- 元素可以膨胀以填充额外的空间,收缩以适应更小的空间
重要概念
flex container:开启flex布局的元素
flex item: flex container里面的直接子元素
- flex item布局受flex container属性的设置来控制和布局
- flex item不区分块级和行内级元素
- flex item默认情况是包裹内容的,但可以设置宽高
通过设置display:flex/inline-flex可以成为flex container
- flex: flex container以block-level形式存在
- inlin–flex:flex-container以inline-level形式存在
flex container
flex-direction
决定主轴的方向
- row:默认值
- row-reverse:主轴反转
- column-reverse:列主轴反转
- column:列变主轴方向
flex-wrap
决定了flex container是单行还是多行
- nowrap:默认单行
- wrap:多行
- wrap-reversse:多行 从下面往上面拍
flex-flow
是flex-direction和flex-wrap的简写
flex-flow:
justify-content
决定了flex items在 main axis上的对齐方式
- flex-start:默认值 与main start对齐
- flex-end:与main end对齐
- center:居中对齐
- space-between:
- items之间距离相等,且与start,end两端对齐
- space-around:
- items之间距离相等,与start,end之间的距离是items之间距离的一半
- space-evenly
- items之间的距离相等
- items与start, end之间的距离等于items之间的距离
align-items
决定了items在cross axis上的对齐方式
- flex-start:与cross start对齐
- flex-end:与cross end对齐
- center:居中对齐
- baseline:与基准线对齐
- stretch:items在cross axis方向的size为auto时,会自动拉伸至填充flex container
- normal:(默认值)在弹性布局中与stretch一样
align-content(不常用)
绝对多行items在cross axis上的对齐方式(类似于justify-content)
flex items
order
可以设置任意整数值越小越排在前面 默认为0
align-self
特殊的元素不想遵循align-items设定好的对齐
参数跟align-items一样
flex-grow
决定flex items如何扩展拉伸(空间有多的就拉伸一下)可以看作为每个元素分空间时的权重.
- 设置为任意非负数字 默认值为0,即使有空间也不划分给各个元素.
- 只有当flex container在main axis方向上有剩余size时,flex-grow才会生效
flex-shrink
和Grow恰恰相反,空间少了就压缩,压缩时的权重.
默认值为1.只有当flex container在main axis方向上超过size时,flex-shrink才会生效
flew-basis
flex-basis和width基本是一个东西,设定一个值.
但面对单词时,flex-basis会自动扩展长度
默认值auto.
flex
flex是flex-grow, flex-shrink,flexbasis的简写属性
grow,shrink, basis
单值:
- 一个无单位数会被当做flex-grow的值
- 有效宽度的数会被当做flex-basis的值
- 关键字none, auto或initial
双值:
第一个必须为无单位数:flex-grow
第二个无单位:flex-shrink;有效宽度:flex baisis
如何处理6个元素放到两行.
每一行最大容量为4,justify-content选的space-bewtten如何解决?
此时第一行正常,第二行两个元素会分到第二行的两边,
可以考虑采取元素组的末尾加3个空span来填充