flex文字默认竖着排列了_浅析布局Flex

Flex 基本概念

在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴

在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。

这里需要强调，不能先入为主认为宽度就是 main size，高度就是 cross size，这个还要取决于你主轴的方向，如果你垂直方向是主轴，那么项目的高度就是 main size。

Flex 容器

首先，实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。

.container {
    display: flex | inline-flex;       //可以有两种取值
}

分别生成一个块状或行内的 flex 容器盒子。简单说来：

• 如果你使用块元素如 div，你就可以使用 flex
• 而如果你使用行内元素，你可以使用 inline-flex

需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

容器的属性

方向属性

flex-direction属性决定主轴的方向（即项目的划分方向）

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

默认值：row，主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端

column：主轴为垂直方向，起点在上沿

column-reverse：主轴为垂直方向，起点在下沿

弹性属性

flex-wrap: 决定容器内项目是否可换行

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行