Xie Huating
[翻译] A Complete Guide to Flexbox

This article is a Chinese translation version of A Complete Guide to Flexbox .


如果翻译中有谬误之处，请不吝指正~


[TOC]

A Complete Guide to Flexbox | Flexbox完全指导手册

原文文章发表于2013年4月8日；更新于2019年11月20日。


本文是对CSS flexbox布局的全面指导手册。此完全手册解释了flexbox相关的所有事项，专注于所有父元素（flex容器）和子元素（flex元素）。也包括了flex的历史、示例、样式、以及浏览器支持。


Background | 背景

Flexbox layout（ 即Flexible Box）模块（自2017年10起的一个W3C候选推荐）目标是提供一种更加有效的方式对容器中的items进行空间布局、对齐、分布，甚至在他们的尺寸不确定或者动态的情况下（这是选用“flex”这个单词的原因）。

Flex布局背后的主要思想是使容器能够更改其items的宽度/高度（和顺序），以最好地填充可用空间（主要是适应各种显示设备和屏幕尺寸）。 Flex容器会扩展items尺寸以填充可用的可用空间，或缩短它们尺寸以防止溢出。

最重要的是，与常规布局（基于垂直的block和基于水平的inline）相比，flexbox布局与方向无关。尽管这些样式对于页面效果很好，但是它们缺乏灵活性（没有双关语）来支持大型或复杂的应用程序（尤其是在方向更改，调整大小，拉伸，缩小等方面）。

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


Basics & Terminology | 背景&术语

由于Flexbox是一个完整的模块，而不是单个属性，因此它涉及很多事情，包括其整个属性集。它们中的一些应放置在容器上（父元素，称为Flex container），而其他一些则应放置在子元素上（称为Felx items）。

如果regular布局是基于block和inline流动方向，则flex布局是基于flex-flow方向。请查看规范中的该图，解释flex布局背后的主要思想。

Items将沿main axis（从main-start到main-end）或cross axis（从cross-start到cross-end）布置。


Properties for the Parent（flex container）| 父元素属性

display

这定义了一个flex container；inline或block取决于给定的值。它为其所有直接子元素启用flex上下文。

.container {  
	display: flex; /*or inline-flex*/ 
}

请注意，CSS列对flex容器无效。

flex-direction

这样就建立了main-axis，从而确定了将flex items放置在flex container中的方向。除了可选包装外，Flexbox是单向布局概念。可以将flex items想像为主要以水平行或垂直列布置。

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

flex-wrap

默认情况下，所有flex items都将尝试放入一行中。您可以对此进行更改，并允许该属性根据需要包裹items。

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

这李有一些flex-wrap的demo。

flex-flow（Applies to：parent flex container element）

这是flex-direction和flex-wrap属性的简写，它们共同定义了flex container的main axis和cross axis。默认值为row nowrap。

.container{ 
  flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
 }

justify-content

这定义了沿主轴的对齐方式。 当一行上的所有flex items都可伸缩或可伸缩但已达到最大大小时，它可以帮助分配额外的剩余可用空间。 当项目溢出行时，它还对项目的对齐方式施加一些控制。

.container {  
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; 
}

请注意，浏览器对这些值的支持是细微差别的。 例如， space-between在某些版本的Edge从未获得支持，而Chrome还没有支持start、end、left、right。 MDN有详细的图表。 最安全的值是flex-start，flex-end和center。

您还可以将其他两个关键字与这些值配对：safe和unsafe。 使用safe机制可确保无论您执行哪种类型的定位，都不能推送元素以使其呈现屏幕外（例如，超出顶部），这种模式下内容也无法被滚动（称为“数据丢失” ）。

align-items

这定义了flex items如何沿当前行的cross axis布局的默认行为。 将其视为cross axis（垂直于main-axis）的justify-content版本。

.container {  
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe; 
}

safe和unsafa的修饰语关键字可以与所有其他关键字（注意浏览器支持）结合使用，并可以帮助您防止元素对齐导致无法访问内容。

align-content

当cross-axis上有多余的空间时，决定如何对齐flex contain的行，类似于justify-content在main-axis内对齐单个项目的方式。

注意：只有一行flex items时，此属性无效。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

safe和unsafa的修饰语关键字可以与所有其他关键字（注意浏览器支持）结合使用，并可以帮助您防止元素对齐导致无法访问内容。


Properties for the Children（flex items）| 子元素属性

order

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

.item {  
	order: <integer>; */\* default is 0 \*/* 
}

flex-grow

这定义了flex items在必要时增长的能力。 它接受一个无单位值作为一个比例。 它决定了items应在flex容器内部占用多少可用空间。

如果所有items的flex-grow都设置为1，则容器中的剩余空间将平均分配给所有子项。 如果其中一个孩子的值为2，则剩余空间将占其他子项的两倍（或者至少会尝试）。

.item {
  flex-grow: <number>; */\* default 0 \*/* 
}

负数无效。

flex-shrink

这定义了flex items在必要时收缩的能力。

.item {
  flex-shrink: <number>; */\* default 1 \*/* 
}

负数无效。

flex-basis

这定义了剩余空间分配之前元素的默认大小。 它可以是长度（例如20％，5rem等）或关键字。 auto关键字的意思是“参考width或height属性”（由main-size关键字临时完成，直到弃用）。 content关键字的意思是“根据项目的内容调整大小”-此关键字尚未得到很好的支持，因此很难测试，也很难知道其弟兄的max-content，min-content和fit-content的行为。

.item {
  flex-basis: <length> | auto; */\* default auto \*/* 
}

如果设置为0，则不考虑内容周围的多余空间。如果设置为auto，则多余的空间将根据其flex-grow值进行分配。

看到这个图形。

flex

这是flex-grow，flex-shrink和flex-basis组合的简写。 第二个和第三个参数（flex-shrink和flex-basis）是可选的。 默认值为0 1 auto。

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

建议您使用此简写属性，而不是设置单个属性。 这个简写可以智能地设置其他值。

align-self

允许覆盖单个flex items默认对齐方式（或由align-items指定的对齐方式）。

请参阅align-items的解释以了解可用值。

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

请注意，float、clear和vertical-align对flex items没有影响。


Examples | 示例


Prefixing Flexbox | 前缀


Related Properties | 相关属性


Other Resources | 其他资源


Bugs | Bugs


Browser Support | 浏览器支持




Interpreted by Xie Huating, 2019-12-04




© 2019 xiehuating. All rights reserved.