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时：