css flexbox模型_解决CSS Grid和Flexbox的问题：Card UI

css flexbox模型

近年来，“卡片”模式取得了巨大的成功，但是由于我们可以使用CSS，因此构建它们的方式仍然受到限制。 到现在为止。 通过将CSS Grid和Flexbox结合使用，我们可以使卡片整齐对齐，响应Swift，并适应其中的内容。 让我们看看如何！

我们将要建立的

在本CSS Grid and Flexbox教程中，我们将构建此卡UI（请查看完整版的页面以获得更清晰的主意）：

在各个断点处，卡的排列方式将发生以下变化：

CSS网格与Flexbox

当Flexbox出现在CSS场景中时，全世界都能听到欢呼声。 最后，我们有了一个布局模块来解决我们所有的浮动问题。 但是实际上并非如此。 Flexbox最适合沿单个轴分布元素。 沿行水平或垂直成列。 用Flexbox构建真正的流体网格非常困难。

网格，然而， 本发明旨在用于布置在两个轴（或尺寸）的元件; 水平和垂直。 在本教程中，我们将按预期的目的使用每个解决方案，从而为我们提供一个真正可靠的解决方案。 让我们开始！

本教程的启示

bbc.co.uk最近推出了（测试版） 他们的最新版本 ，其卡片UI变得整洁宽敞。 忽略惨痛的头条新闻，这看起来很棒。

顶部的卡片是使用Flexbox构建的，并与行对齐，但是我们将使用Grid扩展布局。

注意 ：要继续进行，您将需要支持Grid的浏览器。 以下是一些帮助您入门的信息。

我们的卡标记

让我们从我们的网格<div class="band">的包装器开始，一些网格项目来安排<div class="item"> ，以及一些锚点（每个锚点将是一张卡片）：

<div class="band">
  
    <!-- grid item, containing a card -->
    <div class="item-1">
          <a href="" class="card">
            <div class="thumb"></div>
            <article>
              <h1>Post title</h1>
              <span>Author</span>
            </article>
          </a>
    </div>
    
    <!-- grid item, containing a card -->
    <div class="item-2">
    ...
    </div>
    
    <!-- grid item, containing a card -->
    <div class="item-3">
    ...
    </div>
    
  </div>

随心所欲放置卡片； 我们正在使用七个。 每个人都有一个缩略图<div class="thumb"> ，稍后我们将为其提供背景图像。 然后是一个<article> ，它依次包含一个<h1> ，一个用于作者的<span> ，或者甚至是一个<p>以提供更多信息。

CSS网格布局基础

现在，通过将这些项目排列在网格中来开始一些样式。

注意 ：如果这是您首次尝试“网格”，则可能需要阅读“ 了解CSS网格布局”中的初始教程以加快速度。

我们将首先在这里移动，因此第一种样式将给包装器一个宽度并将其居中，然后设置一些网格规则：

.band {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  
  display: grid;
  
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
}

最重要的是，这里我们要说明我们的.band将display: grid; 。 然后，我们声明1fr grid-template-columns ，它表示每列将只占可用列的一小部分。 我们现在只声明了一个，所以每一列将填充整个宽度。

然后我们声明grid-template-rows: auto; 。 这实际上是默认值，因此我们可以省略它，这意味着行高将完全由内容确定。

最后，我们定义20px的grid-gap ，这为我们提供了列和行装订线。

媒体查询Numero Uno

在更宽的视口（500像素是完全任意的）上，我们将更改grid-template-columns以使每行可能有两张卡片。 现在有两列，每列都是可用的两个分数之一。

@media only screen and (min-width: 500px) {
  .band {
    grid-template-columns: 1fr 1fr;
  }  
}

媒体查询Numero Dos

最后，对于较大的屏幕，我们将采用四列布局。

@media only screen and (min-width: 850px) {
  .band {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

在这里，我们同样可以写出repeat(4, 1fr)而不是1fr 1fr 1fr 1fr 。 有关fr单元如何工作的更多信息，请查看CSS Grid Layout：Fluid Columns and Better Gutters 。

那给了我们什么？

造型卡

这给了我们漂亮的网格布局，如果您是狂野狂热者，您可能希望保留这样的东西，但是对于其他所有人，让我们让卡片看起来更像卡片。

我们将从此开始：

.card {
  background: white;
  text-decoration: none;
  color: #444;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

这为我们提供了一些基本样式：白色背景，文本没有下划线，灰色和整洁box-shadow为我们提供了深度。

接下来，我们声明要display: flex;的卡片display: flex; 。 这很重要-我们将使用Flexbox垂直对齐卡的内容。 因此，我们还要声明flex-direction: column; 给我们垂直轴 最后，我们声明min-height: 100%; 为了使所有卡片都填满父卡片的高度（我们的网格项目）。 干得好！ 这给了我们这个：

悬停状态

在进一步深入Flexbox之前，让我们进行其他一些改进。 新增position: relative; 以及一个transition以便我们可以在悬停时移动卡片：

position: relative;
  top: 0;
  transition: all .1s ease-in;

然后在悬停时，轻轻提起卡片，使阴影更明显：

.card:hover {
  top: -2px;
  box-shadow: 0 4px 5px rgba(0,0,0,0.2);
}

版式

现在，我们将为字体添加一些常规样式，以更改颜色和间距。

.card article {
  padding: 20px;
}

/* typography */
.card h1 {
  font-size: 20px;
  margin: 0;
  color: #333;
}

.card p { 
  line-height: 1.4;
}

.card span {
  font-size: 12px;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 2em 0 0 0;
}

这是您应该拥有的：

缩图

每个缩略图都将用作背景图片，因此我们将在面板上添加一些标记，如下所示：

<div class="thumb" style="background-image: url(thumb.jpg);"></div>

现在，我们将确保.thumb div具有某些尺寸，并且背景图像可以正确填充它们：

.card .thumb {
  padding-bottom: 60%;
  background-size: cover;
  background-position: center center;
}

做得好，这给了我们：

Flexbox文章

现在，我们希望作者姓名在卡片的底部对齐，而不管卡片上方有多少内容。 这是Flexbox再次出现的地方：

.card article {
  padding: 20px;
  flex: 1;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

我们使用的是简写flex: 1; 声明此伸缩项（仍是原始伸缩容器的子项）应增长为占用所有可用空间。

然后，我们声明该文章本身就是一个flex容器，我们再次声明flex-direction: column; 给我们垂直分布。 最后， justify-content: space-between; 指出其中的所有弹性项目均应沿轴均匀分布，并且间距相等。

太好了，但这在我们卡片的中间给了我们这些奇怪的，徘徊的段落。

为了正确对齐它们，让我们添加flex-grow: 1; （或简单地用flex: 1; ），这样它们就填充了所有剩余的垂直空间，使它们与顶部对齐。

.card p { 
  flex: 1; /* make p grow to fill available space*/
  line-height: 1.4;
}

更好！

更改CSS网格

至此，我们已经完成了很多工作，但是Grid现在允许我们做的一件事就是，通过将网格项目放置在我们喜欢的任意位置以及我们喜欢的任何大小，来完全改变布局。 对于此演示，我们希望将第一张卡（称为“功能卡”）宽两列，以容纳除最小视口以外的任何内容。

在我们的第一个媒体查询中，让我们这样做：

@media only screen and (min-width: 500px) {

    ...
    
  .item-1 {
    grid-column: 1/ span 2;
  }
  
}

回到我们关于网格区域的入门教程 ，这里我们说的是，超过500px的第一项应该从网格线1开始并跨越两条轨道。 其余的网格项目将自动放置到位。

在同一媒体查询中，我还提高了特色卡片中标题的font-size 。

结论

这是一本扎实CSS Grid and Flexbox教程； Grid处理了我们的主要二维布局，然后Flexbox处理了卡片中元素的垂直分布。 玩得开心！

翻译自: https://webdesign.tutsplus.com/tutorials/solving-problems-with-css-grid-and-flexbox-the-card-ui--cms-27468

css flexbox模型