flexbox弹性盒子详解
FlexBox弹性盒子详解
flex-direction(伸缩容器的属性) ——改变主轴的方向
row(default)
row-reverse
column
column-reverse
flex-wrap(伸缩容器的属性)
——改变侧轴的方向
nowrap(default) 不换行
Wrap 根据尺寸换行
wrap-reverse
flex-direction和flex-wrap的缩写方式
flex-flow: flex-direction || flex-wrap
例flex-flow:row nowrap;
order(伸缩项的属性)
——改变伸缩项的位置
order:<integer> (默认为0,数值越大越靠后)
justify-content(伸缩容器的属性)
——控制伸缩项在主轴的展现方式
flex-start(default)
flex-end
center
space-between
space-around
align-items(伸缩容器的属性)
——控制伸缩项在侧轴的展现方式
stretch(default) stretch 时要去掉div的height
flex-start
flex-end
baseline
align-self(伸缩项的属性)
——控制指定伸缩项在侧轴的展现方式
stretch(default)
flex-start
flex-end
baseline
align-content(伸缩容器的属性)
——控制伸缩项所组成的行(列)在侧轴的展现方式
stretch(default)
flex-start
flex-end
center
space-between
space-around
*该属性在伸缩行(列)只有一行(列)的时候不生效
flex-grow(伸缩项的属性)
——控制伸缩项在伸缩行的伸展程度
flex-grow:<integer>
flex-shrink(伸缩项的属性)
——控制伸缩项在伸缩行的收缩程度
flex-shrink:<integer>
flex-basis(伸缩项的属性)
——定义伸缩项伸缩前的尺寸
flex-basis:auto|<length> (影响属性:width,flex-wrap:wrap;)
*设置了grow或shink的伸缩项将以这个尺寸为基准进行伸缩
flex(伸缩项)
flex-grow,shrink,basis的缩写形式
none|[<flex-grow> <flex-shrink> || <flex-basis>]
flex:none; => 0 0 auto(grow,shrink,basis)
使用flex简写形式时，如果某个属性不写，那么他们的默认值是：
flex-grow:1
flex-shrink:1
flex-basis:0
更具体解释：https://developer.mozilla.org/en-US/docs/Web/CSS/flex
本案例还是使用scss,上篇有使用介绍。
举例1：
index.html
style.scss(编辑后的css文件不展示)
效果图：
可以改变上述属性的属性值查看不同效果。
举例2：
example.html
example.scss
example.scss编译后的example.css
效果图：
屏幕小于460px时：