弹性盒子布局Flex

一、弹性盒子模型是什么

Flex:弹性布局盒模型 

        Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性       

        是2009年w3c提出的一种可以简洁，快速弹性的布局属性。W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。它已经得到了几乎所有浏览器最新版本的支持，但是考虑历史版本，在部分浏览器上兼容性不太好，需要在代码中添加浏览器支持。

主要思想：给予容器控制内部元素高度和宽度的能力

基本概念：

        采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
        它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
        容器默认存在两根轴：主轴和交叉轴。

二、Flex中容器的属性

1. flex-direction

        flex-direction属性决定主轴的方向 

flex-direction取值

row（默认值）	主轴为水平方向，起点在左端。
row-reverse	主轴为水平方向，起点在右端。
column	主轴为垂直方向，起点在上侧。
column-reverse	主轴为垂直方向，起点在下侧。

上机实例：

.box{
				display: flex;
				/* 主轴方向 */
				/* flex-direction: row; 默认 主轴为水平方向 起点在左侧 */
				/*flex-direction: row-reverse;  主轴为水平方向, 起点在右侧 */
				flex-direction: column;  /* 主轴为垂直方向 起点在上侧 */
				/*flex-direction: column-reverse;   主轴为垂直方向 起点在下侧 */
				width: 500px;
				height: 500px;
				background-color: #ccc;
			}

2.flex-wrap

flex-wrap属性控制flex容器是以单行还是多行布置其项目，以及新行的堆叠方向。

flex-wrap取值

nowrap（默认值）	项目显示在一行中，默认情况下会缩小它们以适应Flex容器的宽度
wrap	从左到右和从上到下，弹性项目将显示在多行中
wrap-reverse	从左到右和从下到上，弹性项目将显示在多行中

上机实例：

.box{
				display: flex;
				/* flex-wrap: nowrap;  默认 项目不换行 */
				flex-wrap: wrap; /* 项目换行  第一行在上侧 */
				/*flex-wrap: wrap-reverse;  项目换行  第一行在下侧 */
				width: 500px;
				height: 500px;
				background-color: #ccc;
			}

3.flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap 

4.justify-content

 该属性定义了项目在主轴上的对齐方式。它可能取5个值，具体对齐方式与轴的方向有关。

justify-content取值

flex-start（默认值）	左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔都相等
space-around	每个项目两侧的间隔相等
space-evenly	每个项目两侧的间隔和项目之间的间隔都相等

上机实例：

.box{
				display: flex;
				/* 主轴方向的对齐方式 */
				/* justify-content: flex-start; 左对齐 */
				/* justify-content: flex-end; 右对齐 */
				/* justify-content: center; 居中对齐 */
				/* justify-content: space-between; 每两个项目之间的距离相等 */
				/*justify-content: space-around;  每一个项目两侧的距离相等 */
				/* justify-content: space-evenly; 每两个项目之间的距离 与 边沿项目距离容器之间的距离相等 */
				width: 500px;
				height: 500px;
				background-color: #ccc;
			}

 

5.align-items

 该属性定义项目在交叉轴上如何对齐。

 

align-items取值

stretch（默认值）	如果项目未设置高度或设为auto，将占满整个容器的高度
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
baseline	第一个项目的第一行文字的基线对齐

上机实例：

.box{
				display: flex;
				/* 交叉轴的对齐方式 */
				/* align-items: stretch; 默认  当项目未设置高度或高度为auto时, 将占满整个父容器 */
				/* align-items: flex-start; 与交叉轴的起点对齐 居上对齐 */
				/* align-items: flex-end; 与交叉轴的终点对齐 居下对齐 */
				/*align-items: center;  垂直居中对齐 */
				align-items: baseline; /* 与第一个项目的文字基线对齐 */
				/* justify-content: center; */
				width: 500px;
				height: 500px;
				background-color: #ccc;
			}

6.align-content

 该属性定义了多根轴线的对齐方式。

 

align-content取值

stretch（默认值）	轴线占满整个交叉轴
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

上机实例：

.box{
				display: flex;
				/*align-content: flex-start;  项目整体与交叉轴的起点对齐 */
				/* align-content: flex-end; 项目整体与交叉轴的终点对齐 */
				/*align-content: center;  项目整体与交叉轴的中点对齐 */
				/* align-content: space-between;  每两行之间的距离相等 */
				/*align-content: space-around;  每1行两侧的距离相等 */
				align-content: space-evenly;
				width: 500px;
				height: 500px;
				background-color: #ccc;
			}