首页 体育 博客 图库 娱乐 视频 新闻

17.(初级)CSS弹性盒flex

2/10/2017来源:心得技巧亚博:15759

一、弹性盒子基础结构

------->弹性容器

1
------->弹性项1

2
------->弹性项2

3
------->弹性项3

二、弹性容器属性

1、设置元素变成弹性盒

display:flex;

2、flex-flow

值一:设置弹性项控制弹性项目的排列方向(行或列),值二:控制弹性项能否换行

flex-flow:row(默认)/row-reverse/column/column-reverse nowarp/warp/warp-reverse;

说明:

属性值1:

row(默认):弹性容器宽度足够时,弹性项并排显示。

column:弹性容器高度足够时,弹性项并列显示。

属性值2:

nowarp:无论浏览器多窄,都不换行。

warp:自动换行。

例如:

1、不允许换行

#flexs_box{ display: flex; display: -webkit-flex; width: 50%; height: 50%; flex-flow: row nowrap; } #flexs_box div{ width: 30%; height: 20%; }

2、 允许换行

#flexs_box{ display: flex; display: -webkit-flex; width: 50%; height: 50%; flex-flow: row wrap; } #flexs_box div{ width: 30%; height: 20%; }

3、justify-content

设置弹性项目水平对齐方式。

!弹性容器宽度/高度必须足够。

justify-content:flex-start/flex-end/center/space-between/space-around

说明:

flex-start:靠左对齐

flex-end:靠右对齐

center:居中对齐

space-between:根据宽度/高度均布均布弹性项,最左及最右不均布

space-around:完全根据宽度/高度均布均布弹性项,包括最左及最右。

4、align-items

设置所有弹性项目纵向对齐方式。

align-items:flex-start/flex-end/center/baseline/stretch(默认)

说明:

flex-start:顶对齐

flex-end:底对齐

center:纵向居中对齐

baseline:弹性项第一行对齐

stretch:顶和底对齐

5、align-content

align-content属性有效条件:

1、必须允许换行

2、弹性容器高度满足

多弹性项换行情况纵向对齐方式。

align-content:flex-start/flex-end/center/space-between/space-around/stretch

说明:

flex-start:顶对齐

flex-end:底对齐

center:纵向居中对齐

space-between:第一行弹性项顶对齐,最后一行弹性项底对齐

space-around:纵向平均分布,包括最上最下

stretch:拉伸各项弹性项,设置成相同高度

6、order

设置弹性项显示的先后顺序:order:-1/1/2....

例如:

#banner{ display: flex; display: -webkit-flex; align-items:flex-end; background: #000; color: #ffffff; padding: 20px; padding-bottom: 0px; } p{ font-size: 20px; margin: 0; } a{ color:#fff; display:inline-block; padding: 5px 10px; padding-bottom: 2px; text-decoration: none; background: #666; margin-left: 5px; border-radius: 3px 3px 0 0; } .heightlight{ background:#ccc; }

未设置margin-right: auto;

!设置margin-right: auto;意思是让浏览器把右边可用的部分利用起来。 .logo{ margin-right: auto; }

三、弹性项属性

1、align-self:

设置单个弹性项目纵向对齐方式。

flex1{

align-self:xxxx;

}

2、flex

flex:flex-grow flex-shrink flex-basic;

说明:

flex-grow:所占宽/高比例:

0:宽度为flex-basic

≥1:弹性容器减去flex-basic,剩余值按比例划宽/高

flex-shrink:弹性项宽/高变化率,值越大变化量越大

flex-basic:弹性项最小宽/高,作用控制何时换行,响应式设计中的断点。

例如: