css flex layou,CSS Grid和Flexbox解决实际的布局问题

就目前为止，CSS的Grid和Flexbox结合将是解决布局的最佳方案。虽然浏览器对CSS Grid和Flexbox的属性未完全支持，但对于实现布局而言，这已是一种非常完美的结合。如果CSS Box Alignment Module Level3能得到更好的支持的话，那么对于Web的布局将是一种福音。

就前面学习的CSS Grid和CSS Flexbox，我们对CSS的Flexbox和Grid有了很深入的了解。特别是在《使用CSS Grid和Flexbox制作Card》一文中，已经见识到了CSS Grid和Flexbox结合对布局的巨大优势。那么这篇文章，将再一次向大家展现CSS Grid和Flexbox的强大之处。那是因为他们的结合将解决布局的实际问题。

开始之前

在深入介绍Flexbox和Grid结合优势之前，先来看看这样的一个需求。需要做一个响应式设计，这个设计效果看起来复杂，在不同的视窗中，改变顺序和布局的效果。这个设计效果看起来复杂，但用CSS的Grid和Flexbox来实现这样的布局，就会显得容易多了。

先来看我们需要的设计风格：

上面的是设计草图。从草图上可以看出，不管是什么样的屏幕下，整个Card有四个区域：A、B、C和D。那么我们就很容易借助Grid来构建这几个区域了。

构建CSS Grid

从上面的草图我们可以看出，我们可以把整个卡片分成四个区域。如下图：

如果你接触过CSS的Grid，你肯定知道，有一些属性是浏览器还不支持的。不过这里咱们不纠结这一部分，在这个示例中，使用浏览器已支持的属性。那么回到示例中来，我们整个Card分为四个区域。那么对应的HTML中，我们也是使用四个区域：

A区

B区