CSS中的Flexbox布局用例

当我设计网页布局时，选择Grid还是Flexbox？

首先应该明确的是，无论选择Grid还是Flexbox，他们都是CSS布局方式的一种。从某种程度上来说，他们之间的共通要远多于差异：它们所应用的特性都属于框对齐(Box Alignment)规范，并且都用到了一些基于CSS内部与外部尺寸设计的概念。在大多数情况下，设计者都应该最大程度上同时运用Grid和Flexbox布局进行网页的设计。只要适用于设计的目的，在Grid框架内部放入Flexbox元素也没有问题，反之亦然。

Flexbox到底用来干什么？

Flexbox布局最为核心的目的就是将一大堆尺寸各异的元素放进一个容器中去。这种布局非常紧凑，其目的在于赋予各种元素最合适的布局：让大一些的元素占多点地方，小一些的元素则少点，从而让网页的内容看起来更加顺眼。因此在使用Flexbox时切忌尝试去自定尺寸和位置的分布，这会让整个编程过程变得非常不自然。Flexbox的这种灵活性是它的内在特点，所以没有必要去干一些违背这一特性的多余事情。由此可以得出，真正适合使用Flexbox布局的是那些并不需要苛求其尺寸多么精确，而只是需要他们自然地排列在一起的元素。

有时可能会有一些情况需要让单元格有轮廓线，但却不严格地按照网格排列。这种时候就很容易看出严格的Grid布局和Flexbox之间的差别了。Grid布局中自动填充一个一个单元格时，是无法让一个单元格横跨多列的，而Flexbox则可以很好地解决这一问题，从而避免有某一行产生空白的情形。

在这里，每个单元格的Flex基准值被设置为150px。如果将这一基准值设为auto，那么每个单元格的大小都会依照其内部文本的长度而相应改变。这就带来了一种视觉上更加灵活的布局。

还有一种常见的情况是，我们可能希望多个元素（例如许多标签）分行布局，而又不严格按照网格状排列，Flexbox布局也能做出非常好的效果。

目前，将容器的布局方式设置为Flexbox也是让其中元素居中显示的最好方法。此外，Flexbox也适用于放置一些较小的，在单一维度上排列的元素。类似输入框、图标等等都可以在同一行上规整地排列。而程序员则无需专门操心为它们分别设置精确的尺寸。

Flexbox不该用来干什么？

Flexbox和Grid的最大区别在于，前者是在单一维度上布局，而后者则是针对两个维度进行布局的。尽管也有多行的Flexbox，但其本质上还是让每一个新行（列）都作为一条单独的Flexbox。所以如果在程序设计中有一些内容元素对两个维度上的布局都有要求，那么还是应该选择Grid布局。切记应摒弃一种错误的思维定势：Grid布局是用在主页上，而Flexbox则用在内容元素上。真正决定使用哪一种布局的应该是内容本身。