我只需要将两个盒子并排放置，我听说 flexbox 很擅长处理这类事情。
display: flex; 添加到父元素，即可将子元素水平排列。嗯，这很酷。我想我可以用浮动来实现，但这更容易。
它们可能应该占据它们具有的全部空间。我可以将父元素宽度设置为 100% 吗？我可以，但这显然不会影响子元素。
也许我可以在子元素上使用 width: 50%;？这有效，但我认为 flexbox 的意义在于你不必对宽度进行所有具体的指定。啊，是的，flexbox 有所有这些方法来表达子元素的增长、收缩和初始行为。看起来 flex: 1; 是这里最简单的方法。
flex: 1; 应用于子元素允许它们增长并填充空间。我喜欢到目前为止我还没有进行任何数学运算或硬编码值。我可以将其变成一个三列模式而无需修改 CSS 吗？
不错。
嗯，等等。大小有点，呃，灵活？没有任何东西强制这些盒子始终占据容器的三分之一。
看起来 flex-basis: 33% 无法解决这个问题。flex: 0 0 33%; 也无济于事。看起来 width: 33%; flex-shrink: 0; 可以，如果我们真的想强迫它。
在窄宽度下强制这种大小行为的冗长单词可能是一种不常见的情况。我们也可以在子元素上使用 word-break: break-word; hyphens: auto; 来解决它。
我们还可以做的一件事就是让这些项目自动换行，而不是对此过于严格。Flexbox 可以做到这一点，对吧？
哦，对了，这让我想起了前两个项目高度相同是多么酷。这是默认的 stretch 行为，但也可以控制。并且它是按行进行的，这就是第二行有其自身不同高度的原因。
如果我想让第一个“Love”块位于顶部怎么办？看起来我可以重新排序它，是吗？让我们看看，默认顺序是 0，所以要放在第一位，我使用 order: -1;。
哈！这有点奏效了。但我的意思是，我希望它占据顶行的全部宽度。我想我可以将其提升到 flex-basis: 100%;，其他元素将相应地换行。
源顺序和视觉顺序不同，这很奇怪。也许这应该归入“永远不要这样做”的类别。
如果我想在某个时候放弃整个 flexbox 该怎么办？我的一部分想要将方向更改为使用 flex-direction: column; 垂直排列，并强制子元素为全宽。啊，在父元素上使用简单的 display: block; 就可以一举做到这一点。
Flexbox 可以做更多的事情！我最喜欢的一件事是自动边距如何“推开”其他元素（如果有空间）。这只是一段小小的旅程，使用一些UI并观察灵活布局的有用之处以及可能使其变得混乱的地方。
我一直都在使用 flex 来做所有事情——也许有点过头了，但 CSS Grid 仍然让人难以理解。
我仍然无法轻松理解所有 flex 属性——但 flex-direction 及其相关的 justify-content 选项简直太棒了。
非常棒的内容，我感谢你阐述了思考过程。这使得更容易建立联系并理解 flex 属性
在大型布局和通用模板方面，Grid 比 flex 更出色，用于子元素
太棒了！我非常喜欢这样的东西——展示开发思路的过程是教别人新事物的最佳方式。谢谢！
表达得非常好。解释 flexbox 的绝佳方式。需要更多这种写作风格的内容。谢谢
我总是用“min-width: 0”或任何适合我们的与“auto”不同的值来解决这些“奇怪”的情况。
文章采用了如此“独特”的方法。我一边微笑一边学习新东西。
我真的很喜欢这种方法。向 Chris 致敬。
我实际上认为这是 Flexbox 一个非常引人注目且具有前瞻性的特性，因为它允许我们将标记与任何特定演示分离。假设我们有一个杂志页面的设计，将一段文字放在左上角，并在其下方放置一个巨大的标题。查看此设计时，我们本能地会先阅读标题，然后再阅读小段落，因此最能描述此内容的标记类似于
<h1>大标题</h1><p>Lorem ipsum dolor sit amet...</p>。过去，我们会求助于浮动或一些难以管理的position: absolute组合来实现这一点。将p放在h1之前会非常诱人。Flex order 使这变得微不足道且富有表现力。这种能力帮助我们认为任何特定的视觉设计都是内容的可能呈现方式，而不是内容的内在特征。讨论此问题的最流行领域是响应式设计和可访问性——在上面的示例中，如果小型（“移动”）设计将标题放在首位，这将只是相同内容的另一种呈现方式，而不是不同的内容。屏幕阅读器也是如此。这些呈现方式不应因原始视觉设计中的位置而受到影响。
但问题不仅仅是这两个案例。标记旨在为文本和媒体添加含义和上下文（例如，设置标题级别、添加替代文本或将段落设置为块引用）。当标记既可机器读取又可人工读取时，这种添加的上下文最为有用。从最高意义上讲，标记是书面语言的扩展。
像 Flexbox order 这样的工具使我们作为设计师能够创作出丰富的、富有表现力的文档，这些文档在浏览器中查看时也看起来很棒。
我认为 Chris 这里要表达的是，当文档顺序和屏幕顺序过于不同步时，这是一个可访问性问题。如果您不小心，Flexbox 和 CSS Grid 会导致不良的 a11y 实践。
我认为 Jonathan 用他的示例说明了这一点。我是一名设计师，我已经习惯了布局不是从左到右、从上到下读取的想法。通过调整比例和对比度，我可以引导查看者按我想要的方式阅读项目。从可访问性的角度来看，我认为这应该是标记顺序。我的意思是，我希望像对待有视力的人一样，控制和完善屏幕阅读器用户的体验。
当然，这是一项伴随巨大责任的强大力量。对于新手来说，它是一种易于使用的语言，因此它很容易破坏视障用户的体验，这一点很危险。但是，这是我们讨论和公开，而不是避免的理由。
不错。学到了东西。
很棒的文章。非常感谢。
3（或更多）等宽列可能最好使用网格布局而不是 flexbox 来处理。Grid 也有
gap属性（可以在 flexbox 布局中使用边距模拟）。Flexbox 不是每个布局工作的正确工具，但正如您所展示的，它通常可以正常工作。
这是我读过的关于 flex box 最好的文章！
对一些 flexbox 思考的不错见解。旁注：这里不需要 width: 100%。默认值 width: auto 可以很好地进行拉伸。
您尝试过，失败了，然后将其删除，因为它使您的代码混乱了 :)
代码中使用的字体是什么？
必须喜欢媒体查询中使用
max-width的桌面优先方法。谁说必须构建移动优先？！切！是的，我是认真的。
几年来我一直在大量使用 Flex 布局，在接手新项目时，我做的第一件事之一就是添加几个我之前创建的 mixin，这里举个例子。
有了它，你可以在你的 SASS 文件中简单地使用类似以下内容：
我发现当阅读一些 CSS 文件时，这种方式更易读也更容易理解。 :)
如果你感兴趣，可以在 https://github.com/Yexan/codepen-utilities/blob/master/sass/mixins/utilities.sass#L78 找到更多信息。 :)
嗨，作者！感谢你写了这篇文章。你能详细解释一下你在底部提到的自动边距内容吗？我不太熟悉，所以不知道该找什么。有什么关键词可以用来搜索吗？
看看这里的“用户菜单”是如何将自身推到容器末尾的。
嗨，Chris，感谢你的文章，它解释了很多我之前对 CSS Flexbox 感到困惑的事情。
你在文章中有一点提到：
那么我可以用 CSS Flexbox 来代替处理浮动吗？因为我构建的网站有侧边栏，而浮动调整大小的操作很难处理。
是的，我们不再使用浮动来进行布局。
哎呀，你甚至可能会因为使用 Flexbox 进行布局而受到一些白眼，因为已经有了 CSS Grid。如果发生这种情况，忽略他们，哈哈。
PS。是的，浮动的调整大小（以及清除，我可能需要补充）不再是你需要处理的事情，Flexbox 万岁。
太棒了。了解了 flex-wrap 属性。这个属性最棘手，但很有用。Grid 布局属性出现了，它对开发者来说也非常有用，并且非常适合简单地排列元素。Grid 布局属性是否让我们不再需要 Flex 呢？