-
弹性布局（Flexbox）
- 弹性布局是我在项目中最常用的布局方式之一，它的优点在于相较于float和position来说，它可以根据容器的尺寸和项目的大小自动调整布局，特别适合响应式页面的开发。它所提供的布局样式也是相对来说比较多的，仅基础的布局属性就有6种，这些布局还可以叠加使用，搭配出不同的效果。
演示样例的基础布局代码：
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
<style type="text/css">
.container {
}
.item{
background-color: aqua;
margin: 15px 25px;
width: 200px;
height: 100px;
}
</style>
布局效果如图：
本篇笔记先介绍弹性布局的其中一个属性flex-direction，通过图例来展示该属性不同值的布局效果。
flex-direction:
flex-direction是CSS中用于设置flex布局的主轴方向的属性。通过指定主轴的方向，从而影响flex项在主轴上的排列方式。但是需要注意的一点是，flex-direction属性只能影响flex项在主轴上的排列方式，并不会也不能改变盒元素在交叉轴上的对齐方式。如果要控制盒元素在交叉轴上的对齐方式，可以使用后面几篇笔记记述的align-items和align-content属性来实现这个效果。
- 默认值（row）：水平布局，左侧为起点。但是如果没有设置宽度，flex项将根据内容自动调整宽度。
代码：
.container { display: flex; flex-direction:row; }。效果如图：
2. row-reverse：水平布局，右侧为起点。与row相比，flex项的顺序被颠倒。代码：
flex-direction:row-reverse;。效果如图：
这里可以从盒模型的文字上看出顺序已经发生了改变，第一个盒模型被排到了右侧第一个。
3. column：垂直布局，上侧为起点。和默认属性一样如果没有设置高度，flex项将根据内容自动调整高度。代码：
flex-direction:column;。
效果如图：
从图可以看出排列顺序已经从水平变为垂直了。
- column-reverse：垂直布局，下侧为起点。与column相比，flex项的顺序被颠倒。代码：
flex-direction:column-reverse;。具体效果如图所示：
此时可以看出这里盒元素的顺序已经和刚刚截然相反了。
这篇笔记就先说到这里啦，关于弹性布局的其他属性，下一篇笔记再继续介绍。
