flexbox布局_如何使用Flexbox构建新闻网站布局

最新推荐文章于 2022-09-20 15:41:42 发布

翻译最新推荐文章于 2022-09-20 15:41:42 发布 · 343 阅读

文章标签：

#css #python #html #java #vue #ViewUI

本文介绍如何使用Flexbox创建响应式新闻网站布局，包括创建列、调整大小、对齐元素及响应式设计技巧。

flexbox布局

您无需先了解Flexbox的各个方面，然后再上手入门。在本教程中，我们将介绍Flexbox的一些功能，同时设计一种“新闻布局”，就像在《卫报》上可以找到的那样。

我们使用Flexbox的原因是它提供了非常强大的功能：

我们可以轻松创建响应列
我们可以使等高的列
我们可以将内容推送到容器的底部

因此，让我们开始吧！

1.从两列开始

在CSS中创建列一直是一个挑战。长期以来，唯一的选择是使用浮点数或表格，但是它们都有自己的问题。

Flexbox使该过程更容易，使我们能够：

清洁代码 ：我们只需要一个带有display: flex的容器
无需清除浮动，防止出现意外的布局行为
语义标记
灵活性 ：我们可以在几行CSS中调整大小，拉伸，对齐列

让我们从创建两列开始。一种是我们容器宽度的2/3，另一种是容器宽度的1/3。

<div class="columns">
  <div class="column main-column">
    2/3 column
  </div>
  <div class="column">
    1/3 column
  </div>
</div>

这里有两个元素：

columns容器
两个column孩子，一个有一个额外的main-column类，我们将使用它来扩大它的范围

.columns {
  display: flex;
}

.column {
  flex: 1;
}

.main-column {
  flex: 2;
}

由于主列的flex值为2 ，它将占用另一列两倍的空间。

通过添加一些其他视觉样式，我们可以得到：

2.使每列成为Flexbox容器

这两个列中的每一个都将包含垂直堆叠的几篇文章，因此我们还将把column元素也转换为Flexbox容器。我们想要：

垂直堆叠的物品
物品以拉伸并填充可用空间

.column {
  display: flex;
  flex-direction: column; /* Makes the articles stacked vertically */
}

.article {
  flex: 1; /* Stretches the articles to fill up the remaining space */
}

该flex-direction: column在容器上的规则，用相结合flex: 1规则对孩子保证文章将填满整个垂直空间，让我们的前两列相同的高度。

3.使每个文章成为Flexbox容器

现在，为了给我们额外的控制权，我们也将每篇文章也都转换为Flexbox容器。它们每个都将包含：

标题
一个段落
一个带有作者和评论数的信息栏
可选的响应图像

我们在这里使用Flexbox以便将信息栏“推”到底部。提醒一下，这是我们旨在的文章布局：

这是代码：

<a class="article first-article">
  <figure class="article-image">
    <img src="">
  </figure>
  <div class="article-body">
    <h2 class="article-title">
      <!-- title -->
    </h2>
    <p class="article-content">
      <!-- content -->
    </p>
    <footer class="article-info">
      <!-- information -->
    </footer>
  </div>
</a>

.article {
  display: flex;
  flex-direction: column;
  flex-basis: auto; /* sets initial element size based on its contents  */
}

.article-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.article-content {
  flex: 1; /* This will make the content fill up the remaining space, and thus push the information bar at the bottom */
}

由于flex-direction: column;该文章的元素垂直放置flex-direction: column; 规则。

我们将flex: 1应用于article-content元素，以使其填充空白区域，并将“ article-info ”“推”到底部，而不管列的高度如何。

4.添加一些嵌套列

在左列中，我们真正想要的是另一组列。因此，我们将用已经使用过的相同columns容器替换第二篇文章。

<div class="columns">
  <div class="column nested-column">
    <a class="article">
      <!-- Article content -->
    </a>
  </div>

  <div class="column">
    <a class="article">
      <!-- Article content -->
    </a>
    <a class="article">
      <!-- Article content -->
    </a>
    <a class="article">
      <!-- Article content -->
    </a>
  </div>
</div>

因为我们希望第一个嵌套列更宽，所以我们添加了具有其他样式的nested-column类：

.nested-column {
  flex: 2;
}

这将使我们的新列宽为另一列的两倍。

水平布局
5.给第一篇文章一个

第一篇文章真的很大。为了优化空间的使用，我们将其布局切换为水平。

.first-article {
  flex-direction: row;
}

.first-article .article-body {
  flex: 1;
}

.first-article .article-image {
  height: 300px;
  order: 2;
  padding-top: 0;
  width: 400px;
}

order属性在这里非常有用，因为它允许我们在不影响HTML标记的情况下更改HTML元素的顺序。 article-image实际上位于标记中的article-body 之前，但是它的行为就好像它位于之后。

6.使布局响应

尽管看上去有点挤，但这些看上去都和我们想要的一样。让我们通过响应来解决此问题。

Flexbox的一大功能是，您只需要删除display: flex容器上的display: flex规则即可完全禁用Flexbox，同时保持所有其他Flexbox属性（例如align-items或flex ）有效。

因此，您可以通过仅在特定断点之上启用Flexbox来触发“响应式”布局。

我们将从.columns和.column选择器中删除display: flex ，而不是将它们包装在媒体查询中：

@media screen and (min-width: 800px) {
  .columns,
  .column {
    display: flex;
  }
}

而已！在较小的屏幕上，所有文章将彼此重叠。大于800像素时，它们将分为两列。

7.添加画龙点睛

为了使布局在更大的屏幕上更具吸引力，让我们添加一些CSS调整：

@media screen and (min-width: 1000px) {
  .first-article {
    flex-direction: row;
  }

  .first-article .article-body {
    flex: 1;
  }

  .first-article .article-image {
    height: 300px;
    order: 2;
    padding-top: 0;
    width: 400px;
  }

  .main-column {
    flex: 3;
  }

  .nested-column {
    flex: 2;
  }
}

第一篇文章的内容水平放置，左侧为文本，右侧为图像。同样，主列现在更宽（75％），嵌套列也更宽（66％）。这是最终结果！