【郑州校区】CSS笔记第五天

十一、伸缩布局:控制元素对齐方式

主轴：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的兼容性问题。

更多

【郑州校区】移动web开发笔记day1

【郑州校区】移动web开发笔记day2

【郑州校区】移动web开发笔记day3

【郑州校区】移动web开发笔记day4

【郑州校区】移动web开发笔记day5

【郑州校区】Canvas笔记第一天

【郑州校区】Canvas笔记第二天

【郑州校区】CSS笔记第一天

【郑州校区】CSS笔记第二天

【郑州校区】CSS笔记第三天

【郑州校区】CSS笔记第四天

传智播客·黑马程序员郑州校区地址

河南省郑州市 高新区长椿路11号大学科技园（西区）东门8号楼三层

联系电话 0371-56061160/61/62

来校路线  地铁一号线梧桐街站A口出

楼主辛苦了