随着 Web 应用的日益普及和用户对页面反应速度和体验的要求不断提高，前端布局逐渐成为了开发中最重要的一环。而在近几年，随着 Flexbox 和 Grid 这两种新布局技术的出现，前端开发者们终于不再局限于传统的 float 和 position 等方式，可以更加轻松地实现复杂布局需求。
Flexbox 和 Grid 的异同
Flexbox 和 Grid 都是 CSS3 新增的布局方式，它们的主要区别在于定位策略和布局方式不同。Flexbox 是单一的一维布局，主要用于解决在一个容器中的元素的对齐、显示、和分布等问题。而 Grid 是双重的二维布局，更适合用于设计复杂的页面布局。
Flexbox 的主要特点是基于主轴和交叉轴的定位机制，我们可以通过容器元素的 display: flex 属性激活 Flexbox 机制，并使用 justify-content 和 align-items 等属性控制主轴和交叉轴上的元素位置。Grid 更灵活多变，允许我们在网格中任意配置行和列，配合类似 grid-template-columns、grid-template-rows、grid-column-start 等属性进行控制，使我们更加方便地制作复杂、多样化的网页布局。
极简布局的实现
无论是 Flexbox 还是 Grid，都具备, 轻松实现极简布局的能力。下面，我们尝试使用两种方式实现两列布局：
使用 Flexbox 实现两列布局
<div class="container"> <div class="left">Left Content</div> <div class="right">Right Content</div> </div>
-- -------------------- ---- ------- ---------- - ------------- ------------------------------ ------------------- - ----- - ------ ---- ----------------- ---- ------ ------ ------------------ - ------ - ------ ---- ----------------- ----- ------ ------ ------------------ -
以上代码中，我们在容器元素上启动了 display:flex 属性，使它成为了一个 Flexbox 容器。justify-content 和 align-items 则分别控制元素的主轴位置和交叉轴位置，使左右两个元素自然的分布在容器两侧。
使用 Grid 实现两列布局
<div class="container"> <div class="left">Left Content</div> <div class="right">Right Content</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- ---- --------- ----- - ----- - ----------------- ---- ------ ------ ----------- ------- - ------ - ----------------- ----- ------ ------ ----------- ------- -
以上代码中，我们在容器元素上启动了 display:grid 属性，创建了一个网格布局。grid-template-columns 告诉了容器该如何按照列来分割网格，我们这里设置了两列。grid-gap 则控制了网格之间的间隔距离。
总结
Flexbox 和 Grid 是前端布局的两个主要解决方案，它们提供了一个更加具有可读性和可维护性的方式进行页面布局。尽管二者的差别明显，但在实现极简的两列布局这种场景下，两种方法都可以轻松简单地实现。对于前端开发者而言，更加关注哪种方式，还要根据实际需求进行选择和迭代。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503d22995b1f8cacd09d2c9