介绍最近在接触flex布局的时候，遇到了一些问题，所以借此机会整理一下flex相关的知识点。Origin简介MyGitHubCSS2.1定义了4种布局模式。这些算法根据盒子与其兄弟姐妹和祖先之间的关系来确定盒子本身的大小和位置。分别是：块布局，为文档布局设计内联布局，为文本布局设计表格布局，为表格形式的二维数据布局设置定位布局，设计定位非常清晰，不管文档中其他元素新引入的flex布局，类似于块布局，缺少块布局中很多文本和文档相关的特性，比如浮动。因此，它具有简单而强大的工具，用于按照Web应用程序和复杂网页通常需要的方式分配空间和对齐内容。目前处于候选推荐阶段，主流浏览器支持很好。有关详细信息，请参阅我可以使用flex吗？相关概念和术语设置display属性值为flex或inline-flex的元素将成为弹性容器（flexcontainer），其直接子元素称为弹性项（flexitems），其布局采用flex布局方式.CSS中定义了一些物理方向和空间对应的概念。这些概念为未来定义新的布局提供了理论支持。flex布局模式下物理方向和空间对应的概念如下图所示。mainaxis：主轴，flex项目的排列是按照主轴来排列的，主轴的方向取决于flex-direction属性，不一定是水平方向。main-start/main-end：flex容器在主轴上的开始/结束位置。flex项目的排列从main-start开始，到main-end结束。main-size：flex容器或flex项目在主轴方向的高度或宽度，可以是元素的width或height属性。同样，它的最小/最大主要尺寸属性取决于它的最小宽度/最大宽度或最小高度/最大高度属性。crossaxis：侧轴，垂直于主轴方向的轴。cross-start/cross-end：弹性容器侧轴上的开始/结束位置。flexitem的排列从cross-start开始，到cross-end结束。cross-size：flex容器或flex项目在横轴方向的高度或宽度，可以是元素的width或height属性。同样，它的最小/最大交叉尺寸属性取决于它的最小宽度/最大宽度或最小高度/最大高度属性。flex容器成为flex容器的方式是将display属性值设置为flex|inline-flexflex：当一个块级元素被放置在流式布局中时，该值将使该元素生成一个弹性容器盒。inline-flex：当一个内联元素被放置在流式布局中时，该值将导致该元素生成一个弹性容器盒。一个flex容器为其内容建立一个flex格式化上下文，就像块级容器一样包含块。弹性容器的边距与其内容的边距不重合。overflow属性适用于弹性容器。Flex容器不是块级容器，一些适用于块布局的属性不适用于flex布局。特别是：float和clear不会浮动或清除flex项目，也不会将元素从文档流中取出。vertical-align对弹性项目没有影响。::first-line和first-letter伪元素不适用于flex容器，flex容器不向其祖先提供首行格式或首字母。这是一个测试例子，见移动端如下。如果一个元素的display属性被设置为inline-flex，它的display属性在某些情况下将被评估为flex。用于flex容器的相关属性是：flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentflex-direction属性名称：flex-direction可能的值：row|行反转|栏目|column-reverse默认值：row适用于：flex容器可继承：否flex-direction属性通过设置flex容器的主轴方向来指定flex项目在flex容器中的放置方式。row：flex容器的主轴与书写模式的inline轴同向。main-start和main-end方向与写入模式的inline-start和inline-end方向相同。row-reverse：与row相同，只是main-start和main-end方向相反。column：flex容器的主轴方向，与writing模式的block轴方向一致。main-start和main-end方向与写模式的block-start和block-end方向相同。column-reverse：与column相同，只是main-start和main-end方向相反。这是一个测试例子，见移动端如下。flex-wrap属性名称：flex-wrap可能的值：nowrap|包装|wrap-reverse默认值：nowrap适用于：flex容器可继承：无flex-wrap属性决定了flex容器是单行还是多行，交叉轴的方向决定了插入新行的方向。nowrap：flex容器的子元素显示在一行中。wrap：当flex项目无法在当前行显示时，换行显示。wrap-reverse：当前行无法显示flex项目时，换行显示。当该值不为wrap-reverse时，cross-start的方向与当前写入模式的inline-start或block-start的方向一致。当值为wrap-reverse时，cross-start和cross-end的方向相反。这是一个测试例子，见移动端如下。flex-flowflow-flow是flex-direction和flex-wrap的首字母缩写。属性名称：flex-flow可能的值：flex-direction||flex-wrap适用于：flexContainer可继承：无justify-content属性名：justify-content取值：flex-start|间隔|space-around默认值：flex-start适用于：flexcontainers可继承：无justify-content该属性沿flex容器当前行的主轴对齐flex项目。flex-start：弹性项目放在行首。该行中第一个flex项目的main-startmargin边界与该行的main-startmargin边界齐平，并且每个后续的flex项目都与前一个项目齐平。flex-end：弹性项目被放置在行尾。该行中最后一个弹性项目的主端边距边界与该行的主端边距边界齐平，并且每个前面的弹性项目都与后续项目齐平。center：弹性项目被放置在行的中间。行中的每个弹性项目都齐平放置并与行的中心对齐，等于行的主起始边界和第一个弹性项目之间的空间，以及行的主结束边界和最后一个弹性项目之间的空间。space-between：弹性项目在行内均匀分布。如果剩余空闲空间是负数，或者只有一个flexitem是内联的，这个值就等同于flex-start。此外，该行中第一个弹性项目的main-startmargin边界与该行的main-startmargin边界对齐，该行中最后一个flex项目的main-endmargin边界与外层对齐线的主端边缘与边框对齐，剩余的弹性项目在线上均匀分布，任意两个相邻弹性项目之间的间距相同。space-around：弹性项目在行内均匀分布，每端各留一半空间。如果剩余可用空间为负，或者只有一个弹性项目是内联的，则该值被识别为居中。此外，一行中任何两个相邻的弹性项目都是等距的，第一个和最后一个弹性项目与弹性容器边界的间距是相邻弹性项目之间间距的一半。这是一个测试例子，见移动端如下。align-items属性名称：align-items可能的值：flex-start|弹性端|中心|基线|stretch默认值：stretch适用于：flex容器可继承：无align-items为所有flex容器项目设置默认对齐方式，包括匿名flex项目。flex-start：flexitem的cross-startmargin边界与line的cross-start边界对齐。flex-end：flex项目的跨端外边距边界与线的跨端边界对齐。center：弹性项目的边距框在行的横轴上居中。baseline：弹性项目基于基线对齐。该行中所有参与的弹性项目都基于基线对齐，并且基线与其自身的交叉起始边距边界之间具有最大距离的弹性项目与该行的交叉起始边界齐平。如果项目在必要的轴上没有基线，则基线是从弹性项目的边框框合成的。stretch：如果flex项目的crosssize属性被计算为auto，并且cross轴的外边距都不是auto，那么flex项目将被拉伸。它使用的值是尽可能让item的marginbox的crosssize和line的尺寸一致，仍然受到min-height/min-width/max-height/max-width的约束。这是一个测试例子，见移动端如下。align-content属性名称：align-content可能的值：flex-start|弹性端|中心|间隔|环绕空间|stretch默认值：stretch适用于：多行flex容器可继承：否align-content属性在轴中有多余空间时对齐flex容器内的行。请注意，此属性对单行弹性容器没有影响。flex-start：该行位于flex容器的开头。flex容器内第一行的交叉起始边界与flex容器的交叉起始边界齐平，随后的每一行都与前一行齐平。flex-end：该行位于flex容器的末尾。flex容器内最后一行的跨端边界与flex容器的跨端边界齐平，并且前一行与下一行齐平。center：该行被放置在flex容器的中间。flex容器内的每一行都齐平并对齐到flex容器的中心，flex容器内的第一行和flex容器的cross-start内容边界之间的空间，以及flex容器内的最后一行是以flex容器空间等效的跨端内容为界。space-between：行在弹性容器内均匀分布。如果剩余空闲空间为负数，或者flex容器内只有一行，则此值等同于flex-start。另外，flex容器中第一行的cross-start边界与flex容器的cross-start内容边界对齐，flex容器中最后一行的main-end边界与main-end对齐弹性容器的内容边界，以及下面的剩余行在弹性容器内均匀分布，任何相邻行之间的间距相等。space-round：行在flex容器内均匀分布，两端各有一半空间。如果剩余可用空间为负，则此值相当于center。否则，弹性容器内的任何相邻行都是等距的，第一行和最后一行是弹性容器边界相邻行之间的一半空间。stretch：线条将伸展以占据剩余空间。如果剩余可用空间为负，则此值与flex-start作用相同。否则，剩余空间将平均分配给所有行。这是一个测试例子，见移动端如下。flexitemflex容器的每个流入后代都成为一个flex项目。每个连续的子文本都包装在一个匿名块容器弹性项目中。如果它仅包含空格，则不会被渲染，就好像文本节点具有属性display:none一样。弹性项目为其内容建立独立的格式化上下文。然而，弹性项目是弹性层盒，而不是块层盒，它们参与它们自己的弹性格式化上下文，而不是块格式化上下文。如果display设置为flex容器内文档流后代的内联值，则其计算值等于块级值。也就是说，在这种情况下，flexitem的display属性值是被锁定的。有关详细信息，请参阅CSS显示。绝对定位在flex容器内，文档流外的后代不会参与flex布局。这样一个flex容器的static-positionrectangle就是它的contentbox，这个static-positionrectangle就是用来确定绝对定位框偏移位置的容器。不合并相邻弹性项目的边距。当flexitem的margin和padding是百分比时，它们会根据包含块的逻辑宽度来计算，就像块级框一样。当margin的值为auto时，会吸收相应维度的额外空间。它们可用于对齐或分隔弹性项目。弹性项目的相关属性是：flexorderalign-selfflex属性名称：flex可能的值：无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]默认值：01auto适用于：弹性项目可继承：无影响弹性项目长度有弹性因子（增长和收缩）和弹性基数。当盒子是弹性项目时，弹性属性决定了盒子的主要尺寸。如果盒子不是flex项目，则flex属性将无效。当flex设置值为none时，相当于00auto。flex-grow值是数字。当剩余空间时，此属性决定弹性项目相对于弹性容器下的其他弹性项目将增长多少空间。在flex简写中省略时设置为1。flex-shrink值是一个数字。当空间不足时，这个属性决定了弹性项目相对于弹性容器下的其他弹性项目收缩多少空间。在flex简写中省略时设置为1。flex-basisflex-basis定义分配多余空间之前flex项目的初始主要大小。auto：当使用这个值时，将采用主要尺寸属性的值。如果mainsize属性的值也是auto，则使用值内容。content：根据弹性项目的内容大小自动生成。<'width'>：除了上述两个值外，flex-basis的使用方法与width和height相同。在flex简写中省略时，设置值为0。flex公共值flex:initial:相当于flex:01auto。弹性项目的大小基于宽度/高度属性。当有剩余空间时，剩余空间不分配，但当空间不足时允许收缩到最小尺寸。对齐属性或自动边距可用于沿主轴对齐弹性项目。flex:auto：相当于flex:11auto。弹性项目的大小基于宽度/高度属性。当有剩余空间时，它会沿主轴尽可能吸收剩余空间。如果所有项目都是flex:auto、flex:initial或flex:none，则在调整项目大小后，任何剩余空间将平均分配给具有属性flex:auto的项目。flex:none：相当于flex:00auto。弹性项目根据宽度/高度属性调整大小。box不会变弹性，类似于valueinitial，但是不允许flexitems收缩，即使在overflow的情况下。flex:
