Flexbox を使用してニュース サイトを構築する方法layout_html/css_WEB-ITnose

和文訳： http://webdesign.tutsplus.com/tutorials/how-to-build-a-news-website-layout-with-flexbox--cms-26611

すぐに使い始める前に、Flexbox のあらゆる側面を理解する必要はありません。このチュートリアルでは、The Guardian で見られるような「ニュース レイアウト」をデザインしながら、Flexbox のいくつかの機能を紹介します。

Flexbox を使用する理由は、Flexbox が非常に強力な機能を提供するためです。

• レスポンシブな列を簡単に作成できます
• 同じ高さの列を作成できます
• コンテンツをコンテナの底にプッシュできます

それでは、始めましょう!

1. 2 つの列から始めましょう

CSS で列を作成することは常に課題でした。長い間、フロートまたはテーブルを使用する唯一の選択肢がありましたが、どちらにも独自の問題がありました。

フレックスボックスを使用するとプロセスが簡単になり、次のことが可能になります。

• クリーナー コード : 表示を備えたコンテナのみが必要です: flex
• フロートを クリア する必要はなく、予期しないレイアウト動作を防ぎます
• セマンティック マークアップ
• 柔軟性 : CSS の数行で列のサイズ変更、伸縮、位置合わせができます

まず 2 つの列を作成します。 1 つはコンテナの幅の 2/3 で、もう 1 つは 1/3 です。

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

ここには 2 つの要素があります:

• 列コンテナ
• 2 つの列の子、1 つは幅を広げるために使用するメイン列の追加クラスを持ちます

.columns { display: flex;}.column { flex: 1;}.main-column { flex: 2;}

メイン列の flex 値は 2 であるため、他の列の 2 倍のスペースを占有します。

追加の視覚スタイルを追加すると、次のようになります。取得:

2.各列を Flexbox コンテナにする

これら 2 つの列にはそれぞれ、垂直方向に積み上げられた複数の記事が含まれるため、列要素も 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: 列ルールと子の flex: 1 ルールを組み合わせると、記事が垂直方向のスペース全体を埋め、最初の 2 つの列が同じ高さに保たれます。

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: 列のおかげで垂直にレイアウトされます。ルール。

記事コンテンツ要素に flex: 1 を適用して、空のスペースを埋め、列の高さに関係なく記事情報を一番下に「押し込みます」。

4.ネストされた列を追加します

左側の列で、実際に必要なのは別の列のセットです。したがって、2 番目の記事を、すでに使用しているのと同じ列コンテナーに置き換えます。

<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 { flex: 2;}

これにより、新しい列の幅が他の列の 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 要素の順序を変更します。記事画像は実際にはマークアップ内で記事本文の前に来ますが、後から来るかのように動作します。

6.レイアウトをレスポンシブにする

これはすべて希望どおりに見えますが、少し潰れています。レスポンシブにすることでこの問題を修正しましょう。

Flexbox の優れた機能の 1 つは、他のすべての Flexbox プロパティ (align-items など) を保持したまま、コンテナの表示: フレックス ルールを削除して Flexbox を完全に無効にするだけで済むことです。またはフレックス) 有効です。

As a result, you can trigger a “responsive” layout by enabling Flexbox only above a certain breakpoint.

We’re going to remove display: flex from both the .columns and .column selectors, instead wrapping them in a media query:

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

That’s it! On smaller screens, all the articles will be on top of each other. Above 800px, they will be laid out in two columns.

7. Add Finishing Touches

To make the layout more appealing on larger screens, let’s add some CSS tweaks:

@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; }}

The first article has its content laid out horizontally, with the text on the left and the image on the right. Also, the main column is now wider (75%) and the nested column too (66%). Here’s the final result!

Conclusion

I hope I’ve shown you that you needn’t understand every aspect of Flexbox to jump in and start using it! This responsive news layout is a really useful pattern; pull it apart, play with it, let us know how you get on!