大家好，我叫CUGGZ。CSS中的FlexLayout和GridLayout都是非常强大的布局方案，那么什么情况下应该使用GridLayout，什么情况下应该使用FlexLayout呢？在这篇文章中，我们就通过一些例子来看看两者的区别和使用场景吧！Grid和FlexboxGrid的区别在于二维布局模型，它有列和行。另一方面，Flexbox是一种一维布局模型，可以将其子项布局为列或行，但不能同时将行和列布局。/*Flexbox*/.wrapper{display:flex;}/*Grid*/.wrapper{display:grid;网格模板列：2fr1fr；grid-gap:16px;}可以看到Flexbox是在布局元素Inlinelists（布局一行元素），而CSSGrid是让它们形成一个列和行的网格。当然，也可以使用Flexbox布局来布局一列元素：/*Flexbox*/.wrapper{display:flex;flex-direction:column;}你如何决定使用哪个？选择其中一种布局时，请考虑以下问题：组件的子项将如何显示？内联还是作为列和行？组件如何在各种尺寸的屏幕上显示？大多数情况下，如果组件的子组件以内联方式显示，则flexbox布局可能是最佳解决方案。考虑以下组件：该组件包含两个子元素，需要显示在一行中，非常适合使用Flex布局。如果布局需要多列多行，那么Grid布局是最合适的方案。考虑以下组件：阅读这些示例后，让我们通过一些具体示例了解如何决定使用哪种布局方案。使用场景CSSFlexbox(一)网站导航大多数情况下，网站导航都可以使用CSSFlexbox来构建。最常见的模式是左边是网站标志，右边是网站导航，中间是空白。Flex可以轻松实现这种布局：布局代码如下：.site-header{display:flex;弹性包装：包装；justify-content:space-between;}(2)操作列表操作列表通常由一组可执行的Action按钮组成，这些按钮排成一排：可以看到，这些操作按钮是相邻的，水平分布的。这种情况很适合使用Flex布局：.actions-list{display:flex;}.actions-list__item{flex:1;}以下包含标题栏或actionbar的场景也适合使用Flex布局：这个组件页眉和页脚具有内联显示的子元素。对于表头，布局代码如下：.modal-header{display:flex;justify-content:space-between;}对于页脚，“取消”按钮比较特殊，可以使用自动左边距将其推到右侧。.cancel__action{margin-left:auto;}(3)表单元素在下图中的第一个组件中，左边的输入框和右边的按钮的组合是Flexbox布局的完美用例：在第二个组件，使用FlexLayouts也可以快速完成。这里的输入框占据了所有剩余空间，并且具有动态宽度。布局代码如下：.input{flex:11auto;}(4)评论组件Flexbox的另一个常见用例是评论组件。考虑下面的例子：这里用户的头像在左边，评论内容在右边，占据了父元素的剩余空间。(5)卡片组件卡片组件有很多种，最常见的卡片设计如下：左侧的卡片组件上下布局，flex容器的方向为column。右侧的卡片组件是左右布局。此时flex容器的方向为row，也就是flex布局方向的默认值。.card{显示：flex;flex-direction:column;}@media(min-width:800px){.card{flex-direction:row;}}另一张在图标下方有文字的卡片，它可以是一个按钮，一个链接。Flex布局同样适用于该模式：第一种模式的布局代码如下：.card{display:flex;justify-content:center;}第二种模式的布局代码如下：.card{display:flex;弹性方向：列；align-items:center;}(6)TabmenuFlexbox也是完美的解决方案，当涉及到占据整个屏幕宽度的元素并且具有应该填满所有可用空间的项目时。在这里，每个项目都应该填满可用空间并且它们的宽度应该相等。这很容易通过将容器元素的显示属性设置为flex来完成。.tabs__item{flex-grow:1;}(7)特性列表Flexbox的一个非常有用的特性是能够反转元素的方向。默认情况下，flexbox的方向是从左到右行，我们可以这样反转：对于偶数行的元素，可以使用上述的反向属性值。(8)内容居中假设有一个组件，其内容需要水平和垂直居中。text-align可以用来实现文本的水平居中。.hero{text-align:center;}您可以使用Flexbox布局将内容水平和垂直居中：.hero{display:flex;弹性方向：列；对齐项目：居中；/*水平居中*/justify-content:center;/*垂直居中*/}CSSGrid(一)侧边栏+内容区域当有侧边栏和内容区域时，网格布局是一个完美的解决方案。考虑以下组件：可以在CSS中这样定义：
