CSS3 弹性布局flex-direction属性
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
-
1.弹性容器（容器）里的 内容，我们称为 弹性元素（flex项目）
-
2.容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
水平的主轴（默认的主轴）
弹性容器 通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
传统的网页布局：盒模型+结合浮动float+定位position
响应式网页布局：
- 1 @media多媒体响应网页布局
- 2 flex弹性布局
flex弹性布局 不脱标！（不脱离标准文档流）。在标准文档流中，他没有脱标！
弹性容器特点:
弹性容器（容器）里的 内容，我们称为 弹性元素（flex项目）
2.容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
水平的主轴（默认的主轴）
弹性容器的6大属性：
- flex-direction属性决定主轴的方向（即项目的排列方向）。
- flex-direction: row; 设置主轴方向–水平方向，起点在左端。
- flex-direction: row-reverse; 设置主轴为水平方向，起点在右端。
- flex-direction: column;设置主轴方向–垂直方向，起点在上沿。
- flex-direction: column-reverse;设置主轴方向–垂直方向，起点在下沿。
<div class="box1">
<div class="son son1">1</div>
<div class="son son2">2</div>
<div class="son son3">3</div>
<div class="son son4">4</div>
<div class="son son5">5</div>
<div class="son son6">6</div>
<div class="son son7">7</div>
<div class="son son8">8</div>
<div class="son son9">9</div>
<div class="son son10">10</div>
</div>
css
.box1 {
width: 800px;
height: 360px;
margin: 100px auto 80px;
border: 5px solid red;
/* 将盒子变成弹性容器 */
display: flex;
/* 设置弹性容器主轴方向 row--水平方向*/
/* flex-direction: row; */
}
代码演示：
/* 设置主轴为水平方向，起点在右端。 */
flex-direction: row-reverse;
代码演示：
/* 设置弹性容器主轴方向 rcolumn--垂直方向*/
flex-direction: column;
代码演示：
/* 设置主轴方向--垂直方向，起点在下沿。 */
flex-direction: column-reverse;
代码演示：
2、flex-wrap 设置轴线上换行方式
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
- flex-wrap: nowrap; nowrap（默认）：不换行。
- flex-wrap: wrap; 换行，第一行在上方。（注意：第一个元素出现在容器的左上角）
- flex-wrap: wrap-reverse;换行，第一行在下方。注意：第一个元素出现在容器的左下角）
代码演示：
代码演示：
代码演示：
3、flex-direction和flex-wrap两个属性简写
/* flex-direction和flex-wrap两个属性简写 */
/* row---设置主轴 wrap---设置轴线上的元素换行方式 */
flex-flow: row wrap;
flex-flow: row wrap;===flex-direction: row;+flex-wrap: wrap;
4、设置弹性元素在主轴上的对齐方式
justify-content属性定义了项目(弹性元素)在主轴上的对齐方式。
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
- 先将弹性容器宽度改为1200px；
/* 在中心线上显示 */
justify-content: center;
代码演示：
/* 左对齐（默认） */
justify-content: flex-start;
代码演示：
/* 右对齐 */
justify-content: flex-end;
代码演示：
/* 弹性元之间的间隔相等，并且弹性元素两端对齐 */
justify-content: space-between;
代码演示：
/*space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 */
justify-content: space-around;
代码演示：
