css布局如何选择flex和grid?

在前端界面的设计时，经常要用到css的布局属性，这里主要对flex、gird做一些学习上的总结，flex和grid都是CSS布局模块，允许响应式和灵活的设计。但是，它们具有不同的用例和属性。

flex 弹性盒子

flex主要用于一维布局，例如在行或列中排列项目。它在容器元素上使用display: flex属性，在子元素上使用flex属性来控制它们的大小和位置。一些关键属性包括：

• flex-direction：确定主轴的方向（行或列）
• justify-content：沿主轴对齐项目
• align-items：沿交叉轴对齐项目
• flex-wrap：确定是否应在没有足够空间时将项目换行

例子：

<nav>
<ul style="display: flex; justify-content: space-between;">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</nav>

grid 网格布局

grid用于二维布局，例如创建行和列的网格。它在容器元素上使用display: grid属性，在子元素上使用grid属性来控制它们的位置和大小。一些关键属性包括：

• grid-template-columns和grid-template-rows：定义网格中列和行的大小和数量
• grid-column和grid-row：指定网格中项目的起始和结束位置
• grid-gap：设置网格项之间的间距

一个简单的例子：

<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px;">
<img src="https://suiyan.cc/assets/images/avatar.jpg">
<img src="https://suiyan.cc/assets/images/avatar.jpg">
<img src="https://suiyan.cc/assets/images/avatar.jpg">
<img src="https://suiyan.cc/assets/images/avatar.jpg">
<img src="https://suiyan.cc/assets/images/avatar.jpg">
<img src="https://suiyan.cc/assets/images/avatar.jpg">
</div>

总之，flex最适合一维布局，例如导航，瀑布流等，而grid最适合二维布局，比如站点的总体布局，数据表格布局等。但是，它们也可以一起使用以创建更复杂的布局。