CSS3 布局

　

1.1 列布局

　 　　CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。

1.1 伸缩布局

　　　CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

如下图，学习新的概念：

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

 

1、必要元素：

 

a、指定一个盒子为伸缩盒子 display: flex

 

b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction

 

c、明确主侧轴及方向

 

d、可互换主侧轴，也可改变方向

 

 

2、各属性详解

 

a、flex-direction调整主轴方向（默认为水平方向）

 

该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置

 

row 水平方向

 

reverse-row 反转

 

column 垂直方向

 

reverse-column 反转列

 

 

 

b、justify-content设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 

 

flex-start、 起点对齐

 

flex-end、  终点对齐

 

center、    中间对齐

space-around、 环绕

space-between  两端对齐

c、align-items调整侧轴对齐

align-items: 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 

flex-start  起点对齐

flex-end  终点对齐

center 居中 垂直居中

stretch 拉伸  设置拉伸，高度不能固定

 

d、flex-wrap控制是否换行  (控制是否换行)

flex-wrap:nowrap 不换行

    flex-wrap:wrap 换行

e、flex控制子项目的缩放比例

不指定flex 属性，则不参与分配.

f、order控制子项目的排列顺序

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值可参考示例源码

应用场景3-携程旅行