Html 如何轻松理解flexbox列概念（指南）

由于我已经在flexbox上玩了一段时间，最后终于“看到了光明”，我想我将与大家分享我的示例，以展示如何轻松地完成灵活的列布局，而不需要使用大量边距、填充等css技巧

我知道有些人根本不喜欢flexbox，这可能有一个很好的理由，但这篇文章是为那些想知道它是什么的人而写的，他们可以得到一个实用的、第一眼就很容易理解的例子

首先是一些HTML：

<div class="header">100 setup</div>
   <div class="flexcontainer">
   <div class="flexbox flex100">100</div>
</div>

<div class="header">75/25 setup</div>
<div class="flexcontainer">
   <div class="flexbox flex75">75</div>
   <div class="flexbox flex25">25</div>
</div>

<div class="header">50/50 setup</div>
<div class="flexcontainer">
   <div class="flexbox flex50">50</div>
   <div class="flexbox flex50">50</div>
</div>

<div class="header">33/33/33 setup</div>
<div class="flexcontainer">
   <div class="flexbox flex33">33</div>
   <div class="flexbox flex33">33</div>
   <div class="flexbox flex33">33</div>
</div>

<div class="header">20/20/20/20 setup</div>
<div class="flexcontainer">
   <div class="flexbox flex20">20</div>
   <div class="flexbox flex20">20</div>
   <div class="flexbox flex20">20</div>
   <div class="flexbox flex20">20</div>
</div>

---

下面是一个用于查看和测试它的示例

几周前开始使用flex属性，我在过去构建的3个网站上过度使用了它。在一家完全响应网站的机构工作，flex属性是一个非常容易使用的工具

可能还值得一提的是，其他浏览器需要一个前缀，如您所示的-webkit

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;/* OLD - Firefox 19- (buggy but mostly works)*/
display: -ms-flexbox;/* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

---

这太棒了！我以前从未见过，但我现在肯定要用。干杯，伙计！欢迎：）编码快乐！这个问题似乎是离题的，因为它不是一个问题。这最好是一个由你良好的自我回答的问答+我很高兴，因为这对我搜索这个主题帮助很大。是的。。。这很重要。尤其是Internet Explorer，如果没有浏览器专用css，即使是never版本也会非常混乱。。

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;/* OLD - Firefox 19- (buggy but mostly works)*/
display: -ms-flexbox;/* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */