像肌肉一样伸展——高级 Flexbox

到目前为止，你应该已经很好地掌握了 Flexbox。你甚至可以自称是 Flexbox 高手了。来吧，试试看，我敢打赌你不行。

或者你可以像我一样，在另一个标签页打开我最近两篇关于 Flexbox 的博客文章。所有高手都是这么做的。

让我们一起探索 Flexbox 的世界，看看一些会让你大开眼界的进阶技巧吧！

注意：如果您患有贫血、哮喘、高血压、感觉有不祥之兆，或者想保护好自己的大脑，请不要让自己的大脑爆炸。

让我们开始吧

哈……那就开始吧……

如果你还没听说过，Flexbox 是一种利用属性来布局网页的方法display: flex;。你需要一个子元素和一个父元素，掌握了它们之后，你几乎可以将任何元素放置在页面上的任何位置。

高级技巧将 Flexbox 的基本组成部分结合起来，帮助你创建精美的网页。而这正是我们今天要探讨的内容。

说实话，我这么做是为了自学，所以我们一起踏上这段旅程。有些内容可能比你想象的要简单，但对我来说却算是进阶题，所以如果你想跟我较量，尽管放马过来。

等高柱

你看，要让柱子保持同一高度很难。我试过了。有时候真是烦死我了。

但如果我们能做到……而且很容易做到呢？

请看这里：

.container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

只需确保 `width`flex-direction和align-items`height` 都设置为默认值，将容器设置为 flex 布局，搞定！你就拥有了一些简单的等高列。

这绝对会救我一命。我确信如此。

悬停时生长

你知道那些很酷的图片网站吗？鼠标悬停时，图片会放大显示。

Flexbox 可以做到这一点。而且它能轻松做到！

.items {
    flex: 1;
}

很简单，我们将所有项目的默认 flex 值设置为 1（也可以写成flex-grow-flex是简写）。

但现在我们做到了：

.items:hover {
    flex: 2;
}

鼠标悬停在某个项目上时，该项目的数值会增大 2，而其他项目则保持不变，数值为 1。这意味着它会占据两倍的可用空间，在你眼前不断膨胀！许多网站都使用这种效果来营造极致的简洁感，现在我们也可以使用它了。

说实话，我以前也尝试过其他方法，但这似乎是最简单（而且希望）万无一失的方法。

输入插件

输入框大小调整简直是件麻烦事。设计和编写表单代码大概是每个网页设计师和开发者的噩梦。我从未听说过有人真正喜欢处理表单。

如果没有 Flexbox，尝试在元素前后添加元素几乎是不可能的。但添加 Flexbox 后，这一切都变得如此简单。

假设我们想在输入内容的开头添加一些内容。我们的 HTML 代码如下：

<div class="add-on">
    <input class="addon-field">
    <button class="addon-item">
</div>

很简单——字段是输入内容，而项目是我们要添加的任何内容（在本例中是一个按钮）。

现在是 flexbox 代码？

.add-on {
    display: flex;
}

.addon-field {
    flex: 1;
}

就这样，你的输入框中就会添加一个漂亮的按钮，你可以随意设置它的样式。

这不是很神奇吗？抱歉，我仍然感到惊叹不已。

边距：自动

显然，有个鲜为人知的事实正在流传——Flexbox 和margin: auto;他其实是灵魂伴侣。我知道，我以前也不相信他们俩的关系，但看来他们已经找到了答案。

问题：如何覆盖默认设置justify-content？我想要显示三个值相同的项目flex-start，但其中一个项目要放在最右边。而且我不想硬编码边距，它应该是可以灵活调整的。

解决方法：margin-left: auto;那个贱人。

这样做可以让项目的左边距填充该侧的所有可用空间，从而将项目推到容器的最右侧。因此，如果您设置了该值justify-content: flex-start;，然后将其添加margin-left: auto;到最后一个项目，则最后一个项目最终会位于右侧，而其余项目则位于容器的开头。

我解释清楚了吗？我觉得没有。但我已经尽力了。

想了解更多相关信息，请点击此链接：https://medium.com/hackernoon/flexbox-s-best-kept-secret-bd3d892826b6#.byxqvyhah

结论

所以我只讲了……4种不同的技巧？其实还有很多更高级的Flexbox技巧和窍门。真的太多了。

这些技巧我认为在日常编码中非常实用。它们都是我以前从未了解过的，我可能会在日常网站开发中应用它们（当然，直到出现更好的替代方案为止）。Flexbox 的优势就在于此——它让布局变得无比轻松。对于我这种身兼设计师和开发者双重身份的人来说，这简直是天赐之物。

祝各位编程愉快！<3