十一、伸缩布局:控制元素对齐方式
主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向
侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的
方向:默认主轴从左向右,侧轴默认从上到下
主轴和侧轴并不是固定不变的,通过flex-direction可以互换。
1、必要元素:
a、指定一个盒子为伸缩盒子 display: flex(父元素)
b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
c、明确主侧轴及方向
2、各属性详解
a、flex-direction调整主轴方向(默认为水平方向)
row、column、row-reverse行倒序排列、column-reverse列倒序排列
b、justify-content调整主轴对齐
flex-start、flex-end、center、space-between、 space-around
c、align-items调整侧轴对齐
flex-start、flex-end、center、flex-stretch、space-between、 space-around
d、flex-wrap控制是否换行
nowrap、wrap
e、align-content堆栈(由flex-wrap:wrap产生的独立行)对齐
flex-start 、flex-end、center
space-around 行平均分布、space-between 两端对齐、space-streach 拉伸对齐
f、flex-flow是flex-direction、flex-wrap的简写形式
g、flex控制子元素的缩放比例,分配的是剩余空间(独立属性)
h、order控制子元素的排列顺序
十二、多列布局
-webkit-columns-width 定义每列的宽度
-webkit-count 定义列数
-webkit-column-gap 定义两栏之间的间距uii
属性:length 长度 = column-rule-length
style 样式 = column-rule-style
color 颜色 = column-rule-color
-webkit-column-rule 设置列之间的分割线
-webkit-column-span 定义跨列显示 默认1,all 横跨所有列
-webkit-column-fill 定义列的高度是否统一,auto,balance 统一设置成内容最多的那一列的高度
十三、web字体
@font-face 指定自定义字体
font-family 给自定义字体起名字
src : url () 引入字体文件
十四、兼容性
通过http://caniuse.com/ 可查询CSS3各特性的支持程度,一般兼容性处理的常见方法是为属性添加私有前缀,如不能解决,应避免使用,无需刻意去处理CSS3的兼容性问题。