HTML学习笔记（三）

弹性布局

1.弹性布局简介

弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。

学习弹性布局之前一定要了解的两个概念：

① 容器： 需要添加弹性布局的父元素；

② 项目： 弹性布局容器中的每一个子元素，称为项目；

需要了解两个基本方向：

① 主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；

② 交叉轴： 与主轴垂直的另一方向，称为交叉轴。

2.弹性布局如何去使用

在父元素中设置display：flex/inline-flex属性，则容器的内容将以弹性布局的方式呈现；

注：flex:将对象作为弹性伸缩盒显示

inline-flex:将对象作为内联伸缩盒展示

3.flex容器的属性

flex-direction属性

flex-direction：设置主轴方向，
				默认row（从左到右）为主轴方向
				column:从上到下
				row -reserve从右到左
				column -reserve从下到上

flex-wrap 属性

flex-wrap:指定弹性盒子的子元素换行方式
			nowrap（默认值）弹性容器为单行，该情况下弹性子项可能会溢出容器
			wrap ：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
			wrap-reverse ：与 wrap相反的排列方式。

flex-flow 属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性，用于设置或检索弹性盒模型对象的子元素排列方式

justify-content属性

 justify-content：设置侧轴的内容分布 
				flex -start 向主轴的开始端靠拢
				center向主轴的中心位置靠拢
				flex-end  向主轴的结束端靠拢

align-items属性

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

align-content属性

align-content:在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）