flexbox 样式 让我们来看看如何使用 css3 的弹性布局写出 10 种常见的 ui 组件。
翻译自 flexbox patterns
目录 从 display: flex 属性开始 flexbox css 的基础属性就是 display: flex ，只需要给元素添加这个属性，你就用上了弹性布局了。就这么简单！
你也许会问，这个属性起了什么作用？默认情况下，它指定了容器中的子元素沿主轴（main axis）排列，主轴默认是水平方向的。
接下来，我们会用两个实例来介绍这个属性是如何用在我们的 ui 组件的。
步进计数器 demo
我们要介绍的第一个例子是步进输入框组件。当绑定 javascript 代码之后，点击 + / - 号，输入框中的值将会对应增加 / 减少。
译注：此处计数器的实现也可以使用 css counters 来代替 javascript，具体例子可以参考 使用 css 的 counter-increment 做的游戏 。
按照以往的思路，你可能会选择用 display: inline-block 或者 float: left 来实现这种内联样式。然而，这样做的话，你还需要给这些元素统统添加特定的选择器。让我们使用弹性盒子吧，只需要往容器添加 display: flex 属性，就可以实现相同的效果了。
当你添加这个属性时，相当于对元素说：“嘿伙计，你就负责按照 flexbox 的规则排列你的子元素就好了！”。在最基本的形式下，元素沿主轴（main axis）排列，默认就是 x 轴，从左到右。
css 代码
.stepperinput { /** * setting display to flex makes this container lay * out its children using flexbox. by default, it * orders items horizontally, top-aligned. * this has a similar effect to setting the children * to have display: inline-block. */ display: flex;}.stepperinput__input { border-left: 0; border-right: 0; width: 60px; text-align: center;}.button { cursor: pointer; padding: 5px 15px; color: #ffffff; background-color: #4ebbe4; font-size: 12px; border: 1px solid #16a2d7; border-radius: 4px;}.button--addonleft { border-top-right-radius: 0; border-bottom-right-radius: 0;}.button--addonright { border-top-left-radius: 0; border-bottom-left-radius: 0;}.input { border: 1px solid #d7dbdd; padding: 0 10px; border-radius: 0; box-shadow: none;}
html 代码
- +

标签页 demo
同理，使用 display: flex 也可以实现这种标签页效果。
css 代码
.tabs { /** * setting display to flex makes this container lay * out its children using flexbox, the exact same * as in the above stepper input example. */ display: flex; border-bottom: 1px solid #d7dbdd;}.tab { cursor: pointer; padding: 5px 30px; color: #16a2d7; font-size: 12px; border-bottom: 2px solid transparent;}.tab.is-tab-selected { border-bottom-color: #4ebbe4;}
html 代码
tab 1
tab 2
tab 3
tab 4

译注：tab 的切换效果可以通过纯 css 实现，可以参考 css trick for tabs without javascript demo
站点头部 demo
你可以把这种组件作为网站或者 webapp 的顶部。
要构建这种组件，典型方法是把 logo 和导航按钮包裹在一个容器，设置按钮放在另一个容器中。然后，使用 float 把两个容器方别推向两边。紧接着，你要对整个顶部元素清楚浮动。对于一个简单布局而言，这也太复杂了。
如果使用弹性盒子，你依然需要容器元素，但是你不需要为容器添加特定的样式了，因为 flexbox 已经让父元素来负责布局了。
除开 display: flex 属性外，我们还需要另外两个属性来调整布局：
justify-content: space-between 让容器左右分开成为了可能。这个属性把 logo 和导航按钮推向了左边，把设置推向了右边。 align-items: center 讲主轴上的元素垂直居中对齐。这个属性很重要，因为 logo 和导航按钮高度不同，如果不设置该属性，它们默认会对齐上边沿。 .siteheader { /** * lay out the children of this container with * flexbox, which is horizontal by default. */ display: flex; /** * make the container put as much space as possible * between its children, with the children at either * end laying flush against the container's edges. */ justify-content: space-between; padding: 10px; background-color: #56727c;}.siteheader__section { /** * lay out the children of this container with * flexbox. */ display: flex; /** * align the children in the center, along * the main axis. by default the children will * align along their top edges. */ align-items: center;}.siteheader__item { padding: 5px 15px; font-size: 12px;}.siteheader__item + .siteheader__item { margin-left: 5px;}.siteheader__item.is-site-header-item-selected { color: #ffffff; background-color: #415f69; border-radius: 4px;}.siteheaderlogo { font-size: 20px; line-height: 0; color: white;}.siteheaderbutton { cursor: pointer; color: #d9e9ef;}
inbox
sent
trash
settings

表单底部 demo
你也许需要在表单底部放个进度圈或者验证反馈。和上面的例子类似，使用弹性盒子可以将这些内容和表单提交按钮分隔开来。
css 代码
.formfooter { /** * lay out the children of this container with * flexbox, which is horizontal by default. */ display: flex; /** * align the children in the center, along * the main axis, which is horizontal in this case. */ align-items: center; /** * make the container put as much space as possible * between its children, with the children at either * end laying flush against the container's edges. */ justify-content: space-between; border-top: 1px solid #d7dbdd; padding: 10px;}.formfooter__section { /** * this container orders items horizontally. */ display: flex; /** * it aligns them vertically in the center. */ align-items: center;}.formfooter__item + .formfooter__item { margin-left: 5px;}.formfooterfeedback { color: #86969c; font-size: 12px; line-height: 0;}.formfooterspinner { animation: formfooterspinner 1s infinite steps(8, end);}@keyframes formfooterspinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}.button--clear { color: #16a2d7; background-color: #ffffff; border: 1px solid #ffffff;}
html 代码
saving...
reset
save

侧边栏 demo
这也是一个相当经典的组件。你甚至不需要 flexbox 来构造它，div 就足够了…… 不过，如果设计师让你把其中一个按钮单独拿到下面，你可以用 position: absolute 来处理，当然也可以用 flexbox。
除了 display: flex 和 justify-content: space-between ，我们还需要另一个属性：
flex-direction: column 会将主轴 (main axis) 从水平方向改为垂直方向。正如你所猜测的那样，现在子元素将会垂直排列了。 css 代码
.sidebar { /** * this container orders items according to flexbox * rules. by default, this would arrange its children * horizontally. however, the next property... */ display: flex; /** * ...sets the main axis to be vertical instead of * horizontal, so now the children are laid out * vertically, from top to bottom. */ flex-direction: column; /** * it will also put as much space as possible * between its children, with the children at either end * laying flush against the container's edges. */ justify-content: space-between; height: 300px; width: 150px; border-right: 1px solid #d7dbdd; background-color: #fcfdfd; padding: 10px;}.sidebar__item { cursor: pointer; padding: 5px 10px; color: #16a2d7; font-size: 12px;}.sidebar__item.is-side-bar-item-selected { background-color: #eef3f5; border-radius: 4px;}
html 代码
inbox
contacts
account
legal

居中提示 demo
不使用 flexbox 的居中布局通常需要一些 hack 技巧，比如使用绝对布局然后通过 2d transform 平移。使用 flexbox，你只需要在容器元素设置 4 个属性：
display: flex flex-direction: column align-items: center 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。在这里和设置 text-align: center 的效果有点类似。 justify-content: center 子元素向主轴中心紧挨靠拢。 css 代码
.centeredprompt { /** * lay out the children of this container with * flexbox. */ display: flex; /** * rotate the main axis so that the children * are laid out vertically, the same as in the * above side bar example. */ flex-direction: column; /** * align the children in the center, along * the main axis. because the direction is * column this has a similar effect as setting * text-align: center. */ align-items: center; /** * instead of pushing the children apart, as in * previous examples, we will group them together * in the center of their container. */ justify-content: center; min-height: 300px; padding: 10px;}.centeredprompt__item + .centeredprompt__item { margin-top: 5px;}.centeredprompticon { font-size: 60px; line-height: 0;}.centeredpromptlabel { color: #86969c; font-size: 30px; font-weight: 700; text-align: center;}.centeredpromptdetails { color: #86969c; font-size: 16px; margin-bottom: 10px; text-align: center;}.icon { color: #bcd2da;}
html 代码
welcome to the app!
thanks for signing up. let’s take a look around.
begin tour

居中图标 demo
使用同样的方法，我们还可以居中更多东西，比如图标。
css 代码
.centeredicon { /** * lay out the children of this container with * flexbox. */ display: flex; /** * as in the above centered prmopt example, * we'll rotate the main axis so that the children * are ordered vertically. */ flex-direction: column; /** * and just like in that example, align the children * in the center, along the main axis. */ align-items: center; /** * same thing here as before: group the children * together in the center of their container. */ justify-content: center; border: 1px solid #d7dbdd; font-size: 40px; width: 90px; height: 90px; border-radius: 100%; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.05);}
html 代码

功能列表 demo
在这个列表中，其中一行是反向排列的，实现方法很简单，只需要添加一个 flexbox 属性：
flex-direction: row-reverse 把容器中的子元素按照 html 中的顺序反向排列。
css 代码
.featurelistitem { /** * lay out the children of this container with * flexbox, which is horizontal by default. */ display: flex; /** * align the children in the center, along * the main axis, which is horizontal in this case. */ align-items: center; max-width: 400px; padding: 10px;}.featurelistitem + .featurelistitem { border-top: 1px solid #d7dbdd;}.featurelistitem--reverse { /** * we can specify the flex-direction so that * the children elements are displayed in the * reverse order of how they appear in the * markup. */ flex-direction: row-reverse;}.featurelistitem__icon,.featurelistitem__description { padding: 5px 15px;}.featurelistitem__icon { font-size: 50px; line-height: 0;}.featurelistitem__description { color: #86969c; font-size: 12px;}
html 代码
the calendar feature makes scheduling a snap.
our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.
you can get notified by email or sms.

卡片 demo
接下来复习一下，这个卡片的组件用到了此前提到的属性。
display: flex flex-direction: column align-items: center justify-content: center 这里没什么新的知识点，但是为我们接下来要介绍的卡片组做了铺垫。
css 代码
.card { /** * lay out the children of this container with * flexbox, which is horizontal by default. */ display: flex; /** * rotate the main axis so that the children * are laid out vertically. */ flex-direction: column; border: 1px solid #cad0d2; border-radius: 4px; overflow: hidden;}.card__description { /** * lay out the children of this container with * flexbox. */ display: flex; /** * we're going to lay out this element's children * just like in the centered prompt example. * first we'll rotate the main axis so that the * children are laid out vertically. */ flex-direction: column; /** * just like in the centered prompt example, * we'll align the children in the center, along * the main axis. */ align-items: center; /** * and just like in the centered prompt, we'll * group the children in the center of their * container. */ justify-content: center; padding: 15px;}.card__descriptionicon { font-size: 32px; margin-bottom: 10px;}.card__descriptiontext { color: #57727c; font-size: 12px; text-align: center;}.card__price { text-align: center; color: #57727c; font-size: 12px; font-weight: 700; padding: 5px 15px; border-top: 1px solid #d7dbdd; background-color: #eef3f5;}.card--fixedwidth { max-width: 120px;}
html 代码
science potion
costs $5

卡片组 demo
现在我们来学习最后一个 “卡片组” 组件。我们需要考虑两个麻烦的地方：
我们想要每个卡片的宽度相等，但是里面包含的内容多少可能各不相同。 我们想要所有的卡片注释高度相等，同样，每张卡片的注释长度也不相等。 不适用 flexbox，你可能会想到使用 table 元素来实现这些需求，或者对所有元素使用绝对布局，并组合使用百分比、像素和 calc() 来实现。这样也太复杂了。
使用弹性盒子，整个问题的解决方案就变得优雅多了。这里我们引入一个新的属性，但是和之前我们提到的属性不同，这个属性应用在 子元素 而不是容器。
我们为每张卡片设置 flex: 1 1 0 ，使得每张卡片的宽度相等。这个属性是以下三个属性的简写方法：
flex-grow: 1 设置或检索弹性盒的扩展比率。默认值为 0，我们设置为 1，此时卡片会尽可能扩展以填充容器。 flex-shrink: 1 设置或检索弹性盒的收缩比率。默认值为 1。我们设置为 1，此时卡片会尽可能收缩以适应容器。 flex-basis: 0 设置或检索弹性盒伸缩基准值。设置为 0 的时候，其大小仅由容器的大小所决定。 这些属性满足了第一点要求。对于我们的第二个要求，我们可以对 flex 属性稍作调整，改成 flex: 1 1 auto 。
flex-basis: auto 导致卡片注释的高度自适应，意思就是最长的注释框拥有最大的高度。由于注释同时拥有 flex-grow: 1 属性，因此较短注释的卡片会自动伸长来适配容器高度。 .cardgroup { /** * lay out the children of this container with * flexbox, which is horizontal by default. */ display: flex; border: 1px solid #cad0d2; border-radius: 4px; overflow: hidden;}.cardgroup__card { /** * the flex property is a short-hand for setting * the flex-shrink, flex-grow, and flex-basis * properties. these properties control how the * element resizes to fill its container. * * we'll also set flex-grow to 1 so that it * will expand to fill its container. (the * default value is 0.) * * we'll set flex-shrink to 1 so that the element * will shrink as its container gets smaller. * (the default value is 1.) * * last, we set flex-basis to 0 so that its * size is solely determined by the size of * the container. (the default value * is auto, which would cause the content's * size to also be a factor in this calculation.) * * the net result of these properties is that the * element is a fluid size, and will expand and * shrink with its container and siblings, but * they will all have the same size, even if they * have different amounts of content. */ flex: 1 1 0; border: none; border-radius: 0;}.cardgroup__card + .cardgroup__card { border-left: 1px solid #d7dbdd;}.cardgroup__carddescription { /** * we're doing almost the exact same thing here as * we did above. the difference is that its * flex-basis is auto, so now the size of its content * will affect how large it is. */ flex: 1 1 auto;}
trial
free!
basic tier
(most popular)
$10.00
advanced tier
(only for enterprise-level professionals)
$6,000.00