flex布局是一种一维布局模型，一次只能处理一个维度（一行或者一列）上的元素布局。flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。
flex-direction 属性决定主轴的方向（即项目的排列方向）。
可以在弹性容器上通过flex-direction修改主轴的方向。如果主轴方向修改了，那么交叉轴就会相应地旋转90度，弹性元素的排列方式也会发生改变，因为弹性元素永远沿主轴排列。
| 属性值 | 含义 |
|---|---|
| row | 默认值，主轴为水平方向（水平布局），起点在左端，从左向右排列 |
| row-reverse | 主轴为水平方向（水平布局），起点在右端，从右向左排列 |
| column | 主轴为垂直方向（垂直布局），起点在上沿，从上往下排列 |
| column-reverse | 主轴为垂直方向（垂直布局），起点在下沿，从下往上排列 |
应用方法：
.flex-box {
flex-direction: row | row-reverse | column | column-reverse;
}具体内容块展示形式可以参考下图：
-
css详解系列：10-flex项目属性orderorder 属性 用来设置或检索弹性盒模型对象的项目（子元素）在容器中出现的順序。
-
css详解系列：11-flex项目属性align-selfalign-self属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
-
css实现点击切换图片效果的方法在css中我们可以使用伪类选择器来实现点击切换图片的效果，看看如何实现的。
-
css样式表的三种样式css（级联样式表）主要有三种样式定义方式
-
如何在css中实现样式优先级在css中，样式优先级是由一系列规则决定的，这些规则决定了当多个样式规则应用于同一个HTML元素时，哪个规则会优先生效。
-
css文本超出显示3个点的方法在css中，如果你想让超出特定长度的文本显示为三个点（...），你可以使用text-overflow属性，配合overflow和white-space属性。
暂无评论，抢个沙发...