原文：ACompleteGuidetoFlexbox作者：CHRISCOYIER译者：ShelleyLee背景介绍Flexbox布局（也叫Flex布局，灵活的盒子布局）模块的目标是提供更有效的布局和对齐方式，并使父元素能够在子元素之间进行分配，即使子元素的大小未知或动态变化也是如此。之间的差距。flex布局的主要思想是让父元素可以调整子元素的高度、宽度和排列顺序，从而最好地适应可用的布局空间（适应不同的设备和不同尺寸的屏幕）。设置为flex布局的父元素（容器）可以扩大其子元素以尽可能地填充可用空间，也可以缩小子元素使其不溢出。最重要的是，相对于传统的块元素垂直排列，内联元素水平排列的布局，flex布局是没有方向性的。传统布局在处理大型复杂布局时缺乏灵活性，尤其是在改变方向、改变大小、拉伸、收缩等方面。注意：Flex布局更适合小规模布局，Grid布局适合大规模布局。基本概念Flex布局是一个完整的模块而不是一个单一的属性，它包括一整套属性。这些属性有的设置在容器（container，也叫父元素，叫flexcontainer）上，有的设置在容器的item（item，也叫子元素，叫flexitems）上。译者注：由于item翻译成project不够直观和形象，下面用父元素指container，子元素指item。如果说传统布局是基于块元素的垂直流向和内联元素的水平流向，那么flex布局则是基于“flex-flowdirection”。通过下图来解释flex布局的主要思想。在flex布局中，子元素要么按照mainaxis排列，也就是mainaxis（从main-start到main-end），要么按照crossaxis排列，也就是crossaxis（从cross-start到交叉端）。这里有几个概念：__mainaxis__：Flex父元素的主轴指的是子元素布局的主方向轴。请注意，主轴不一定是水平的。主轴是水平还是垂直由属性flex-direction决定（后面会介绍）。__main-start|main-end__：分别表示主轴的起点和终点，子元素会在父元素中沿着主轴从main-start到main-end排列。__mainsize__：单个item在主轴上所占的长度尺寸。__crossaxis__：交叉轴，垂直于主轴。__cross-start|cross-end__：分别表示交叉轴的起点和终点。子元素在横轴上的排列是从cross-start开始到cross-end。__crosssize__：子元素在横轴方向的尺寸。属性介绍属性分为作用于父元素的属性和作用于子元素的属性两部分。parent元素属性display用于定义父元素为flex布局容器。如果设置为flex，则父元素为块元素，如果设置为inline-flex，则父元素呈现为内联元素。.container{显示：flex;/*或inline-flex*/}flex-directionflex-direction定义了flex布局的主轴方向。flex布局是一种单向布局，子元素主要是沿水平行或垂直列进行布局。.container{flex-direction:行|行反转|栏目|column-reverse;}row：行方向，flex-direction的默认值，在ltr中从左到右排列（从左到右，从左到右）排版右排列，在rtl中从右到左排列（从右到左，从右到左）排版。row-reverse：行的反方向，在ltr中是从右到左，在rtl中是从左到右。column：列方向，类似于row，但是从上到下。column-reverse：列的反方向，类似row-reverse，只是从岛的底部开始。flex-wrap默认情况下，flex布局中的父元素会尽量将子元素排在同一行，通过设置flex-wrap来决定是否允许子元素排在这一行。.container{flex-wrap:nowrap|包装|wrap-reverse;}nowrap：不换行，默认值，所有子元素会排成一行。wrap：换行，子元素会根据需要从上到下折叠成多行。wrap-reverse：从下往上折行，子元素会根据需要从底部岛折成多行。这里有一些视觉示例。flex-flowflex-flow是flex-direction和flex-wrap属性的简写。默认是行，nowrap。弹性流：<'弹性方向'>||<'flex-wrap'>justify-contentjustify-content属性定义了子元素沿主轴的对齐方式，用于在子元素剩余空间最大时分配主轴。也可以用来控制子元素超出主轴时的对齐方式。flex-start：默认，对齐到主轴的起点。flex-end：对齐到主轴的末端。center：沿主轴中心。space-between：两端沿主轴对齐，第一个子元素在主轴起点，最后一个子元素在主轴终点。space-around：沿主轴在子元素之间均匀间隔。注意子元素之间的间隙看起来是不均匀的，第一个和最后一个子元素距离父元素的边缘有一个单位的间隙，但是两个子元素之间有两个单位的间隙，因为每一个子元素两侧各有一个单位的间距。.container{证明内容：flex-start|弹性端|中心|间隔|space-around;}align-itemsalign-items定义了子元素在横轴方向的对齐方向，仍然是在每个子元素原来写的那一行的基础上说的。可以看做是横轴上的justify-content属性；.container{对齐项目：flex-start|弹性端|中心|基线|stretch;}flex-start：按照横轴起点对齐。flex-end：按照交叉轴的末端对齐。center：沿交叉轴居中。基线：与项目中第一行文本的基线对齐。stretch：默认值，在满足子item设置的min-height、max-height、height的情况下，拉伸子元素以填充整个父元素。align-contentalign-content是当父元素包含的行在横轴方向有空间时如何分配空间。类似于justify-content如何对齐主轴上的各个子元素。注意：当只有一行时，此属性无效。.container{对齐内容：flex-start|弹性端|中心|间隔|环绕空间|stretch;}类似，只是justify-content作用于主轴上的单个子元素，而align-content作用于横轴上的行。因此，不再详细描述每个属性值的含义。译者注：注意align-items和align-content的区别。前者是指单行内子元素的对齐，后者是指多行之间的对齐。父元素属性汇总展示：flex|inline-flex；弹性方向：行|行反转|栏目|列反转；弹性包装：nowrap|包装|换行；flex-flow:<'flex-direction'>||<'弹性包装'>;证明内容：flex-start|弹性端|中心|间隔|空间周围；对齐项目：flex-start|弹性端|中心|基线|拉紧;对齐内容：flex-start|弹性端|中心|间隔|环绕空间|拉紧;子元素属性order默认情况下，子元素按照代码编写的顺序进行布局，但是order属性可以改变子元素出现的顺序。.item{order:;}译者注：order默认值为0；子元素的order值越小，布局越高，参考图示理解。flex-growflex-grow指定在空间允许的情况下如何按比例分配可用的剩余空间给子元素。如果所有子元素的属性都设置为1，则父元素中剩余的空间将平均分配给所有子元素。如果其中一个子元素将flex-grow设置为2，则子元素在分配剩余空间时将获得两倍于其他元素的空间（至少它会尝试获得）。.item{flex-grow:;/*default0*/}注意：flex-grow不接受负值。译者注：默认值为0，表示即使有剩余空间，也不会放大每个子元素。flex-shrink类似于flex-grow属性，flex-shrink定义了当空间不足时项目的收缩比例。.item{flex-shrink:;/*default1*/}注意：flex-shrink不接受负值。译者注：flex-shrink的默认值是1，当所有子元素都有默认值时，子元素在空间不足时会按比例收缩。如果其中一个子元素的flex-shrink值为0，则子元素在空间不足时不会收缩。如果其中一个子元素的flex-shrink值为2，当空间不足时，子元素将以两倍的速度收缩。flex-basisflex-basis定义了计算剩余空间前子元素的默认大小。可以设置为一定长度（例如20%、5rem等）或关键字。关键字auto表示子元素将按其原始大小显示。关键字内容是指根据内容来决定大小——这个关键字目前还没有很好的支持，所以测试起来比较困难。与内容类似的关键字包括max-content、min-content、fit-content。.item{弹性基础：<长度>|汽车;/*defaultauto*/}如果设置为0，则子元素内容周围的空间不会按照flex-grow按比例分配，如果设置为auto，则子元素周围的额外空袭会按比例分配flex-grow，如下图所示：flexflex是flex-grow、flex-shrink、flex-basis三个属性的缩写。第二个和第三个参数（flex-grow、flex-basis）是可选的。默认值为01自动。.item{flex:无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}建议使用缩写形式，而不是单独设置每个属性，在缩写形式中智能计算相关值。align-self可以通过设置子元素的align-self属性来覆盖align-items设置的对齐方式。该属性值的含义与align-items中的相同，这里不再赘述。.item{对齐自我：自动|弹性启动|弹性端|中心|基线|stretch;}注意：float、clear和vertical-align对flex子元素没有影响。Example示例1：水平和垂直居中我们从一个非常非常简单的例子开始，解决一个我们经常遇到的问题：水平和垂直居中。如果使用flex布局，会很简单。.parent{显示：flex;高度：300px；/*任意设置大小*/}.child{width:100px;/*随意设置尺寸，小于父元素*/height:100px;/*同上*/margin:auto;/*见证奇迹的时刻*/}主要原因是在flex布局的父元素中设置margin为auto会自动吸收多余的空间，所以将水平和垂直margin都设置为auto会使子元素在Perfectly水平和垂直居中。示例2：响应式初始体验现在我们考虑使用更多属性。考虑6个固定大小的子元素，但我们希望它们在改变浏览器宽度时能够完美地显示在水平轴上（注意不使用媒体查询）。.flex-container{/*首先我们创建一个flex布局上下文*/display:flex;/*然后我们定义flex方向和是否允许子元素换行*注意这相当于下面的代码：*flex-direction:row;*弹性包装：包装；*/flex-flow:行换行；/*然后我们定义子元素在剩余空间内如何排列*/justify-content:space-around;}完成。剩下的就是设置一些其他的样式比如颜色。在线示例更改浏览器大小，看看布局如何变化！示例三：响应式导航栏让我们试试别的。假设我们的网页顶部有一个右对齐的导航栏，但我们希望它在中等屏幕上居中，在小屏幕上单列。同样采用flex布局，实现起来会非常简单。/*大屏幕*/.navigation{display:flex;弹性流：行换行；/*在这里设置对齐轴方向的终点*/justify-content:flex-end;}/*中屏*/@mediaalland(max-width:800px){.navigation{/*当在中屏时,设置中心并设置剩余空间包围子元素*/justify-content:space-around;}}/*小屏幕*/@mediaalland(max-width:500px){.navigation{/*在小屏幕上，我们不再以行为主轴，而是以列为主轴*/flex-方向：列；}}网上的例子改变了浏览器的大小，看看布局是如何变化的！Example4:Mobile-firstthree-columnlayout让我们灵活地使用flex布局来尝试一些更有趣的布局。制作具有全角页眉和页脚的移动优先3列布局。.wrapper{显示：flex;flex-flow:rowwrap;}/*我们要告诉所有子元素的宽度为100%*/.header,.main,.nav,.aside,.footer{flex:1100%;}/*Mobilefirst取决于源码的默认渲染顺序*在本例中：*1.header*2.nav*3.main*4.aside*5.footer*//*middlescreen*/@mediaalland(min-width:600px){/*我们要让两侧的侧边栏共享??一行*/.aside{flex:1auto;}}/*大屏幕*/@mediaalland(min-width:800px){/*按顺序设置每个面板的渲染顺序*告诉主面板元素占据侧边栏空间的两倍*/.main{弹性：20px；}.aside-1{命令：1；}.main{命令：2；}.aside-2{命令：3；}.footer{命令：4；}}在线示例更改浏览器大小，看看布局如何变化！浏览器前缀FlexLayout需要一些浏览器前缀以最大程度地兼容大多数浏览器。Flexbox布局的前缀不仅仅是在属性前面加一个浏览器前缀。不同浏览器下的属性名和属性值不同。这是因为Flexbox布局的标准一直在变化。共有三个版本：old、tweener和new。处理前缀的最好方法可能是使用新语法编写CSS并通过Autoprefixer运行CSS，它可以很好地处理这个问题。另外，这里提供一个Sass中的@mixin来处理一些前缀，也可以给大家一些处理前缀的启发：@mixinflexbox(){display:-webkit-box;显示：-moz-box；显示：-ms-flexbox；显示：-webkit-flex；显示：flex；}@mixinflex（$values）{-webkit-box-flex：$values；-moz-box-flex:$值；-webkit-flex:$值；-ms-flex:$值；flex:$values;}@mixinorder($val){-webkit-box-ordinal-group:$val;-moz-box-序号组：$val；-ms-flex-order:$val;-webkit-order:$val;order:$val;}.wrapper{@includeflexbox();}.item{@includeflex(1200px);@includeorder(2);}其他资源CSS规范中的FlexboxMDNFF的FlexboxOpera的DivingintoFlexbox混合语法以获得对CSS-Tricks的最佳浏览器支持RaphaelGoetter的Flexbox（FR）BennettFeelyBugs的Flexplorer我最好的Flexbox错误总结看到的是PhilipFlethWalton和GregWhitw，它是开源的，您可以跟踪它的发展。浏览器支持先看三个版本的Flex布局（新）是指标准中最新的语法（例如display:flex;）。(tweener)指的是2011年以后的非官方临时版本（例如display:flexbox;）。(old)指的是2009年的旧语法（例如display:box;）Blackberry浏览器10+支持新语法。更多混合语法实现最佳浏览器兼容性，可以参考这篇文章（CSS-Tricks）或者这篇文章（DevOpera）。网上有很多flex相关的教程，但是当我看到CHRISCOYIER的这篇文章时，不禁被它的细节所震撼，而且最近也在写布局相关的文章，所以想出了翻译这篇文章的想法。翻译过程中，尽量保持原文原貌，部分地方做了小幅调整，更符合中国人的思维。本文图片均来自原文。水平有限，如有错误或遗漏，还请不吝赐教。最后，希望本文能对读者有所帮助。更多讨论请转180251611
