flexbox 溢出_Flexbox 使用指南

本文重点介绍了 容器 (flex container) 和 元素(flex items) 的所有属性，以方便查阅。

Note: Flexbox 布局适合应用程序的组件和小规模布局，而 Grid 布局则适用于更大规模的布局。

基本介绍

常规布局 基于块和内联流方向，而 flex 布局 与方向无关。flexbox 是一个完整的模块而不是单个属性，因此它涉及很多东西。其中一些设置在 容器 (flex container) 上，而有一些设置在元素 (flex items) 上。

请查看下图，解释 flex 布局背后的主要思想。

items 将会在 主轴 (main axis) 或者在 交叉轴(cross axis) 排版。

flex container

• display： 定义一个 flex 容器

• flex-direction： 主轴方向 【row | row-reverse | column | column-reverse】

• flex-wrap： 是否换行 【nowrap | wrap | wrap-reverse】

• flex-flow： flex-direction和 flex-wrap 的简写，默认值为row nowrap

• gap: items 间的间距

• justify-content： 主轴上的对齐方式 【flex-start | flex-end | center | space-between | space-around | space-evenly】

• align-items： 交叉轴上的对齐方式 【flex-start | flex-end | center | baseline | stretch】

• align-content： 多根轴线其交叉轴的对齐方式 【flex-start | flex-end | center |stretch | space-between | space-around】

dispaly

定义一个 flex 容器 ， inline 还是 block 取决于给定的值。

.container {
display: flex; /* or inline-flex */
}
复制代码

flex-direction

建立 主轴 的方向，items 将按其排列。

Flexbox 是单向布局概念。(除 wrap 之外)

.container {
flex-direction: row | row-reverse | column | column-reverse;
}
复制代码

flex-wrap

默认情况下，items 排在一行。flex-wrap 可使 items 换行。

.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
复制代码

• nowrap (default)：不换行

• wrap：换行，从上到下排列

• wrap-reverse：换行，从下到上排列

flex-flow

flex-direction 和 flex-wrap 的简写形式，默认值为 row nowrap 。

flex-flow: flex-direction’> || flex-wrap’>
复制代码

gap

设置元素间的间距，单位 px。这样就可以替代为各个元素设置间距的方式，而导致首尾元素出现不必要的间距。

justify-content

定义了 items 在 主轴 上的对齐方式。

当一行上的 items 不够灵活，或者说灵活但已达到其最大尺寸时，它有助于分配剩余的额外空间。

当它们 (items) 溢出行时，它还对 items 的对齐进行控制。

.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
复制代码

• flex-start (default)：左对齐

• flex-end：右对齐

• center：居中对齐

• space-between：两端对齐。边缘 item 靠两侧，其余 item 之间的间隔都相等

• space-around：每个 item 两侧的间隔相等。所以，item 之间的间隔比 边缘 item 与边框的间隔大一倍

• space-evenly：两个 items (包括边缘)之间的间隔相等。

align-items

定义 items 在 交叉轴 上的对齐方式(主轴为单根轴线)。

.container {
align-items: stretch (default) | flex-start | flex-end | center | baseline;
}
复制代码

align-content

定义 items 在 交叉轴 上的对齐方式(主轴为多根轴线)。

如果项目只有一根轴线，该属性不起作用。(即：带有 flex-wrap: nowrap)

.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
复制代码

flex items

Note: 设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效

• order： items 从小到大排序

• flex-grow： 定义 items 的放大比例。默认为 0，即如果空间存在剩余，该 item 也不放大

• flex-shrink： 定义 items 在必要时的缩小比例。默认为 1，即如果空间不足，该 item 将缩小

• flex-basis： 定义 items 在分配多余空间之前(flex-flow) 的大小。默认 auto，自身大小

• flex(推荐使用)： flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto，后两个属性可选。

• align-self： 在交叉轴上，允许单个 item 与其他项目不一样的对齐方式。默认 auto，可覆盖 align-items 属性

• 主轴独立对齐： 在主轴上，允许单个 item 与其他项目不一样的对齐方式。【margin-(left right top bottom): auto】

order

默认情况下，items 按源顺序排列。order 属性会控制它们在 flex 容器中的排列顺序 

.item {
order: ; /* default is 0 */
}复制代码

flex-grow

定义 items 的放大比例。默认为 0，即如果空间存在剩余，该 item 也不放大

如果所有 items 的 flex-grow 属性都为 1，则它们将等分剩余空间(如果有的话)。如果一个 items 的 flex-grow 属性为2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

.item {
flex-grow: ; /* default 0 */
}复制代码

Note: 负数无效

flex-shrink

定义 items 在必要时的缩小比例。默认为 1，即如果空间不足，该 item 将缩小

.item {
flex-shrink: ; /* default 1 */
}复制代码

Note: 负数无效

flex-basis

定义 items 在分配多余空间之前(flex-flow) 的大小。默认 auto

.item {
flex-basis:  | auto; /* default auto */
}复制代码

它的值可以是长度(e.g. 20%, 5rem, etc.) 或者 关键字

• 关键字 auto ，即 item 本身大小，若设置了 flex-grow 则会相应放大

• 关键字 content ，依据 item 的内容调整尺寸。这个关键字尚未得到很好地支持

• 如果设置为 0，将 item 折叠到其可能的最小宽度， 若此时 item 设置了 overflow: hidden，那么其自身归零(消失)。请参考以下示例

class="f">

class="zero">This is flex-basis zero





class="f">

class="auto">This is flex-basis auto


复制代码

.f {display:flex}
.f div {border:1px solid}
.zero {flex-basis: 0}
.auto {flex-basis: auto}
复制代码

flex

flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
复制代码

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self

在交叉轴上，允许单个 item 与其他项目不一样的对齐方式。可覆盖 align-items 属性，默认 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch 。

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
复制代码

主轴独立对齐

在主轴上，允许单个 item 与其他项目不一样的对齐方式。

可使用 margin-(left right top bottom): auto ，

class="left-list">
Alibaba
Tencent
Baidu
Jingdong
Ant
Netease

复制代码

.left-list {
display: flex;
align-items: center;
	...
	li {
		& + li {
margin-left: 10px;
		}
		&:last-child {
margin-left: auto; // ?
		}
	}
}
复制代码