CSS Flexbox を使用して Web サイトのヘッダーを構築する-CSSチュートリアル-php.cn

CSS Flexbox を使用して Web サイトのヘッダーを構築する

CSS3 が普及していなかった頃、Web サイトのヘッダーを作成するのは恐ろしく難しい作業でした。当時、Flexbox はまだ新しく、float や clearfix テクニックなどの古い方法を使用する必要がありました。現在では状況がまったく異なり、Flexbox は広くサポートされており、開発作業が大幅に軽減され、より多くの可能性がもたらされています。

CSS3 が普及した今、Web サイトのヘッダーを作成するのは簡単ではないかと言う人もいるかもしれません。そうではありません。解決すべき興味深い課題がいくつかあり、そのうちのいくつかをこの記事で紹介します。

はじめに

まず、ここで説明する Web サイト ヘッダー は、ユーザーが Web サイトにアクセスしたときに最初に目にするものの 1 つです。通常、次のようなロゴまたは Web サイト名とナビゲーションリンクが含まれます。

ヘッダーの視覚的なデザインに関係なく、重要な要素は logo## です。 # と ナビゲーション。

Flexbox

Flexbox が Header 要素に適用されると、すべての子項目が同じ行に保持されます。次に、

justify-content を適用して、それらの間の間隔を分散するだけです。

html

<header class="site-header">
  <a href="#" class="brand">Brand</a>
  <nav class="nav"></nav>
</header>

ログイン後にコピー

css

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ログイン後にコピー

非常にシンプルですよね? このようなユースケースの場合、はい、おそらく次のようになります。それよりも複雑です。

Header Wrapper

には、上記の

lago および nav の外側に wrapper のレイヤーが含まれていません。大きな画面では問題が発生します。

上からわかるように、最初の

Header は最初の Header に比べて内部 wrapper

がないため幅が広すぎます。、2番目の方がはるかに良く見えます。したがって、HTML に次の調整を加えることができます。

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
  </div>
</header>

ログイン後にコピー

flexbox は .site-header__wrapper 要素に移動する必要があります。

.site-header__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ログイン後にコピー

フレックスラップを使用する

画面が小さい場合は、横にスクロールできます。下の図を参照してください。

flex-wrap:wrap

が設定されていない場合、画面が小さすぎると水平スクロールが発生します。これを望まない場合は、flex-wrap:wrap`? を追加できます。

さまざまな形式のヘッダー

私がフレックスボックスの使用を好む理由は、ヘッダーデザインのさまざまなバリエーションを簡単に処理できるためです。以前のヘッダーのデザインに基づいて、ボタンの追加、検索入力、サブ項目の順序の変更など、いくつかのオプションを使用してヘッダー要素を拡張しました。

ヘッダーの変更 1

ナビゲーションリンクの隣にボタンを追加するとします。これはどのように処理すべきですか? ナビゲーションバーにリンクとして追加すべきですか? それともナビゲーションとは別個にすべきですか? 私はこれを好みます。

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
    <a href="/track-shipment" class="button">Track</a>
  </div>
</header>

ログイン後にコピー

この場合、ギャップを処理するために justify-content: space-between を使用することはできません。代わりに、nav 要素で ## を使用します # margin-left: auto,

このようにすると自動的に右詰めになります。

ナビゲーションボタンとトラックボタンを分離すると、ボタンを保持し、その横にモバイルトグルボタンを表示する必要があるため、モバイルデバイスにとって便利です。

ヘッダーの変更 2

最初の変更と同様に、この変更では、残りの空き領域を占有する検索入力が追加されます。空間。フレックスボックスの場合、これは flex プロパティを使用して実現できます。

html

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <div class="search"></div>
    <nav class="nav"></nav>
    <a href="/track-shipment" class="button">Track</a>
  </div>
</header>

ログイン後にコピー

css

.search {
  flex: 1;
}

ログイン後にコピー

これで、検索入力に brand が入力され、 nav 間の空きスペース。ただし、これにはいくつかの制限があります。小さなビューポートでは、ヘッダーは次のようになります。

#検索入力幅をこれより小さくしないでください。全文を入力して表示することが困難になります。以下の 2 つの解決策があります。

# ナビゲーションが途中で非表示にならないため、2 番目の解決策を好みます。一般的に、レイアウトに影響を与えない場合は、要素を非表示にしないようにします。

ヘッダー変更 3

对于这个示例，HTML标记是相同的，但是 header 里的元素顺序是不同的。我们如何才能做到这一点? 你可能想到用 order 属性来解决这个问题 ?

html

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
    <a href="/track-shipment" class="button">Track</a>
  </div>
</header>

ログイン後にコピー

css

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

.nav {
  order: -1;
}

ログイン後にコピー

这样有个问题，间隔空间不会使 logo 居中，它只是分散项目之间的空间。

解决方案是给每个子项一个flex: 1，这将在它们之间分配可用空间。

.brand,
.nav,
.button {
  flex: 1;
}

ログイン後にコピー

这样，由于flex: 1，按钮元素变宽了，解决此问题的唯一方法是将其包裹到另一个元素中。

HTML

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
    <div class="button-wrapper">
      <a href="/track-shipment" class="button">Track</a>
    </div>
  </div>
</header>

ログイン後にコピー

这样，我们就可以将下面的logo和按钮居中。

.logo {
  text-align: center;
}

/* 不要介意这里的命名，这只是出于演示*/
.button-wrapper {
  text-align: end; /* end 等同于LTR语言中的right */
}

ログイン後にコピー

但是，如果添加了更多导航链接，这种方法很容易失败。我们需要确保导航链接的数量不会超过特定的限制。下面一个logo偏离中心的例子 ?:

正如在上图中看到的，logo没有居中。所以要记住这一点，以避免这种意想不到的问题 ?。

使用 Flexbox 构建 Header 的有用技巧

flex-basis

如果某个元素需要在移动设备上占据整个宽度（不能隐藏的重要导航），我会使用flex-basis: 100% ?。

从上面的模型看，做起来可能很简单。实际上不是。通常，header 可能有一个内部间距（padding），当我们强制某项占据全部宽度时，除非清除padding ，否则它不会生效。但是，删除padding不切实际，因为它将影响设计中的其他元素 ?。

下面解决此问题的一种解决方法 ?：

将flex: 1 0 100%添加到导航元素。
如有需要，请更改其order。有时，可能还有其他元素，我们想确保导航是最后一个。
加上一个等于宽度等于 padding 的负 margin，这也会让导航占据整个宽度。
在导航中添加 padding，这会增加一些适当的空间。
最后，使用了justify-content: center将导航项居中（不重要）

.nav {
  flex: 1 0 100%; /* [1] */
  order: 2; /* [2] */
  margin: 1rem -1rem -1rem -1rem; /* [3] */
  padding: 1rem; /* [4] */
  display: flex; /* [5] */
  justify-content: center; /* [5] */
}

ログイン後にコピー

间距

着 Chrome 和 Firefox 支持flex gap属性，现在在flex项目之间添加间距比以往任何时候都容易。考虑以下标题

要做到上图的高亮间距，只需将gap: 1rem添加到flex父节点。没有了gap，我们还是需要用旧的方式来间隔 ?。

/* 老的方式 */
.brand {
  margin-right: 1rem;
}

.sign-in {
  margin-right: 1rem;
}

/* 新的方式 */
.site-header {
  /* Other flexbox styles */
  gap: 1rem;
}

ログイン後にコピー