Grid 用于布局,Flexbox 用于组件

2022-03-29282次阅读flexboxGrid网格布局

CSS Grid和 flexbox 之间的主要区别。CSS Grid 是一个多维布局模块,这意味着它有列和行。Flexbox 可以将其子项布局为列或行,但不能两者兼而有之。

Grid主栏和侧边栏

HTML

<div class="wrapper">
  <aside>Sidebar</aside>
  <main>Main</main>
</div>

CSS

@media (min-width: 800px) {
  .wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-gap: 16px;
  }

  aside {
    align-self: start;
  }
}

如果align-self不用于<aside>元素,则无论内容长度如何,它的高度都将等于主元素。

Grid卡片

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
}

列宽至少为200px,如果空间不够,它会将卡片换行。值得一提的是,如果视口宽度小于200px.

一个简单的解决方案是仅在视口宽度足够时才添加网格定义。见下文:

CSS

@media (min-width: 800px) {
  .wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 16px;
  }
}

Grid部分布局

在下面的设计中,我们可以使用两次grid,第一次使用是将区域划分为两个区域(联系我们侧边栏,表单),第二次使用是表单网格本身。

CSS

@media (min-width: 800px) {
  .wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
  }

  .form-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
  }

  .form-message,
  .form-button {
    grid-column: 1 / 3; /* let them take the full width */
  }
}

Flexbox 网站导航

在 90% 的时间里,网站导航应该使用 CSS flexbox 构建。最常见的模式是左侧有徽标,右侧有导航。这对于 flexbox 来说是完美的。

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

摘录自:https://ishadeed.com/article/grid-layout-flexbox-components/

上一篇: React-use一个很好用的React Hooks库  下一篇: 任意字符转换成HTML识别格式charCode值  

Grid 用于布局,Flexbox 用于组件相关文章