许多和我聊过的开发者不确定哪一个工具对于为网站创建布局更好一些。他们中的一些感觉 flexbox 足够强大去处理所有的布局问题。然而，他们不确定是否要去学习 flexbox，因为它混乱的语法。其他人则认为 Susy 更简单，与 flexbox 相比他们更喜欢 Susy 的简单。
一些人甚至会问把 Susy 和 flexbox 结合是不是可能的，这样他们就可以更加容易地布局。所以，这里有两个本文要去探索的问题：
1. 哪一个更强大，flexbox 还是 Susy？
2. 同时使用 flexbox 和 Susy 是否可能？
让我们开始吧，看看我们是如何比较 flexbox 和 Susy 的。
我们如何比较 Flexbox 和 Susy
严格地说，直接比较 flexbox 和 Susy 是不可能的，因为它们是两个完全不同的工具。拿 flexbox 与一个基于浮动的布局工具来比较可能更合适。
然而，因为 Susy 和 flexbox 都习惯构造布局，我们可以试着去构造不同的布局去作为比较的代表。在这篇文章中，我们会比较以下五个布局：
1. 内容和侧边栏布局
2. 内容和侧边栏，在比例网格中
3. 内容和侧边栏，在固定间隙网格中
4. 画廊布局，在比例网格中
5. 画廊布局，在固定间隙网格中
不用担心你不确定什么是比例和固定间隙网格。当我们说到第二个布局的时候我们会讲解它。
现在，让我们开始比较第一个布局吧。
布局1：内容和侧边栏布局
我们想要在这第一个布局中保持简单，那样就可以让你开始习惯于使用 flexbox 和 Susy 来创建网格。
我们在这里会创建一个类似的 Smashing Magazine 的博客类型的网站，在这样的网站页面上，内容占据总宽度的 75%，侧边栏占据总宽度的 25%：
博客类型的内容和侧边栏布局。 ( 查看大图 )
下面是我们在使用 flexbox 和 Susy 时都会为这个布局编写的 html 代码。一个容器元素加上为每个工具准备的两个 div。
Content
查看更多关于网站布局工具的对比：FlexboxVSSusy_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did114210