CSS3弹性

1.简介

作为一种CSS3的新的布局模式,用来解决保证页面在不同大小的屏幕与设备上可以适当显示.

2.组成

一个是父容器Flex Container,父容器通过将display设置为flex就可以使用弹性盒子

一个是子元素Flex Item

3.常用属性

3.1flex-direction

父容器属性:决定着弹性容器的子元素排列方式

3.1.1flex-direction:row

水平显示

3.1.2flex-direction:row-reverse

水平翻转显示

3.1.3flex-direction:column

垂直显示

3.1.4flex-direction:column-reverse

垂直翻转显示

3.2justify-content

父容器属性:子元素在横轴或者说X轴或者说水平方向上的对齐方式

3.2.1flex-start

位于容器水平开头

3.2.2flex-end

位于容器水平结尾

3.2.3center

位于容器水平中心

3.2.4space-between

头尾不留空,各个子元素之间留空

3.2.5space-around

头尾留空,各个子元素之间留空

3.3align-items

父容器属性:子元素在纵轴或者说Y轴或者说垂直方向上的对齐方式

3.3.1stretch

子元素拉伸适应父容器

3.3.2center

位于容器垂直中心

3.3.3flex-start

位于容器垂直开头

3.3.4flex-end

位于容器垂直结尾

3.3.5baseline

位于容器基线

查了一下,基线是这样的

第一行文字的下划线

3.4flex-wrap

父容器属性:内容超出一行范围如何折行

3.4.1nowrap

不折行,默认

3.4.2wrap

将多出来的折行到下一行

3.4.3wrap-reverse

将多出来的折行到上一行

3.5align-content

父容器属性:当子元素没有占用父容器所有可用空间时,垂直方向上的行的对齐方式,与align-items的不同是,align-items是子元素的对齐方式

3.5.1stretch

拉伸,如果剩余空间为负,则等效于flex-start

3.5.2center

3.5.3flex-start

3.5.4flex-end

3.5.5space-between

3.5.6space-around

以上属性与align-items差不多

3.6order

子元素属性:子元素排列顺序,注意,可以改变顺序!

3.7align-self

子元素属性:用于覆盖align-items,来自己设定对齐方式