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,来自己设定对齐方式