类型

效果展示

实现方案

栅格化布局

栅格化布局会将容器24等分，横向排列的盒子数量最多四个，最少一个。

父元素上设置flex-flow 属性，它用于设置弹性盒模型对象的子元素排列方式。它是 flex-direction 和 flex-wrap 属性的复合属性。 flex-direction值为row时表示横向排列，flex-wrap 的值为wrap表示可以在必要的时候拆行或拆列。

子元素上设置flex 属性，可以设置弹性盒模型对象的子元素如何分配空间，即可以实现等分功能；

两个属性结合使用，便实现了栅格化布局

柱状图

将父元素的align-items属性的值设置为flex-end，可以将高低不等的子元素置于父元素底部。

圣杯布局

圣杯布局是指两边容器宽度固定，中间容器自适应的三栏布局。

左右两边的容器通过设置flex的值为0 0 80px实现宽度固定位80px;

中间容器通过设置flex的值为1，等分剩余空间，自动放大占位，即自适应。

瀑布式布局

瀑布的列展示，通过为父元素设置column-count的属性值实现，如图每行会展示3列，即column-count:3。

列之间的距离，通过为父元素设置column-gap元素的值为1em，实现列之间的间隙，即column-gap:1em。

属性名

作用

属性值

flex

用于设置或检索弹性盒模型对象的子元素如何分配空间。

是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

flex-grow：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。

flex-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。

flex-basis：项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。

auto：与 1 1 auto 相同。

none：与 0 0 auto 相同。

initial：设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。

inherit：从父元素继承该属性。请参阅 inherit。

flex-flow

用于设置或检索弹性盒模型对象的子元素排列方式。

flex-direction：

可能的值：row、row-reverse、column、column-reverse、initial、inherit

默认值是 "row"。规定灵活项目的方向。

flex-wrap：

可能的值：nowrap、wrap、wrap-reverse、initial、inherit

默认值是 "nowrap"。规定灵活项目是否拆行或拆列。

initial：设置该属性为它的默认值。请参阅 initial。

inherit：从父元素继承该属性。请参阅 inherit。

flex-direction

规定灵活项目的方向。

row ：默认值。灵活的项目将水平显示，正如一个行一样。

row-reverse ：与 row 相同，但是以相反的顺序。

column：灵活的项目将垂直显示，正如一个列一样。

column-reverse：与 column 相同，但是以相反的顺序。

initial：设置该属性为它的默认值。请参阅 initial。

inherit：从父元素继承该属性。请参阅 inherit。

flex-grow

用于设置或检索弹性盒子的扩展比率。

number：一个数字，规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。

initial：设置该属性为它的默认值。请参阅 initial。

inherit：从父元素继承该属性。请参阅 inherit。

flex-wrap

规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

nowrap：默认值。规定灵活的项目不拆行或不拆列。

wrap：规定灵活的项目在必要的时候拆行或拆列。

wrap-reverse：规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

initial：设置该属性为它的默认值。请参阅 initial。

inherit：从父元素继承该属性。请参阅 inherit。

flex-basis

用于设置或检索弹性盒伸缩基准值。

number：一个长度单位或者一个百分比，规定灵活项目的初始长度。

auto：默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。

initial：设置该属性为它的默认值。请参阅 initial。

inherit：从父元素继承该属性。请参阅 inherit。

flex-shrink

指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

number：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

initial：设置该属性为它的默认值。请参阅 initial。

inherit：从父元素继承该属性。请参阅 inherit。

align-items

定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

stretch：默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

center：元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

flex-start：元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：元素位于容器的结尾。

弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

baseline ：元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

initial：设置该属性为它的默认值。请参阅 initial。 测试 »

inherit：从父元素继承该属性。请参阅 inherit。

column-gap

指定的列之间的间隙。

length：一个指定的长度，将设置列之间的差距。

normal：指定一个列之间的普通差距。 W3C建议1EM值。

column-count

指定某个元素应分为的列数。

number：列的最佳数目将其中的元素的内容无法流出。

auto：列数将取决于其他属性，例如："column-width"。