Flexboxを使用して最新のCSSカードデザインレイアウトを作成する方法
公開: 2021-07-10CSS3の新しいレイアウトモードであるFlexboxのおかげで、文字通りすべてのカードを連続して取得できます。 カードのデザインは、過去数年間で人気が高まっています。 お気づきかもしれませんが、ソーシャルメディアサイトは本当にカードを採用しています。 PinterestとDribbbleは、カードレイアウトを使用して、情報とビジュアルを紹介しています。 また、マテリアルデザインに興味がある場合は、Googleのカードがパターンライブラリで詳しく説明されています。
個人的には、カードのレイアウトが読みやすく、スクロールしやすいので気に入っています。 それらは、一度にすべてを閲覧、スクロール、およびスキャンするのが簡単な方法で、情報の完璧な「バースト」を提示します。
カードレイアウトの作成方法
偶数の高さのコンテンツの行を試したことがあれば、それらを作成するのは必ずしも簡単ではなかったことをご存知でしょう。 過去にそれを機能させるには、おそらくかなりの手間をかけなければならなかったでしょう。 Flexboxのおかげで、当時はかなり遅れをとっています。 提供する必要のあるブラウザサポートのレベルによっては、いくつかのフォールバックを含める必要がある場合がありますが、この機能のブラウザサポートは最近かなり信頼できます。 安全のため、信頼できるCanIuseのFlexboxを確認してください。 また、ライブサイトに変更を加えないでください。 代わりに、無料のローカルWordPress開発アプリであるLocalを試してみてください。
Flexboxの基本的な考え方は、コンテナーのdisplayプロパティをflexに設定できることです。これにより、コンテナー内のすべてのコンテナーのサイズが「フレックス」されます。 等しい高さの列とスケーリングおよび縮小オプションにより、高度なレイアウトの作成方法が簡素化されます。 カードから始めることはFlexboxの虎の巻のようなものですが、基本をマスターすると、より複雑なレイアウトを作成できます。
Flexboxと汎用性
カードは用途が広く、視覚的に魅力的で、大小のデバイスの両方で簡単に操作できるため、レスポンシブデザインに最適です。 各カードは、簡単にスケールアップまたはスケールダウンできるコンテンツコンテナとして機能します。 画面サイズが小さくなると、通常、列のカードの数が減り、垂直方向にスタックし始めます。 高さを固定または可変にすることができるため、柔軟性がさらに高まります。
レイアウトの作成方法
大画面では4つの水平コンテナの行、中規模では2つ、小型デバイスでは1列のFlexboxカードレイアウトを作成します。
以下は、4枚のカードを表示するための基本的なレイアウトを作成するためのコードスニペットです。 内側のカードコンテンツは含めていません（コードサンプルでは長すぎるため）。そのため、必ずスターターコンテンツをいくつか入れてください（コンテンツの量は4枚のカード間で異なります）。 また、ここでは最初に4枚のカードが1行表示されていますが、複数行のコンテンツでの動作を確認したい場合は、さらに追加することができます。 すべてのコードはCodepenにあります。
レイアウトデザインをグリッドパターンで表示するには、外側から始めて、内側に向かって作業する必要があります。正しいコンテナを参照していることを確認することが重要です。そうしないと、少し面倒になります。
.cardsのクラスを持つセクションは、最初にターゲットにするものです。 コンテナのdisplayプロパティは、 flexに変更する必要があるものです。
最初に使用するHTMLは次のとおりです。
<div class="centered">
<section class="cards">
<article class="card">
<p>content for card one</p>
</article><!-- /card-one -->
<article class="card">
<p>content for card two</p>
</article><!-- /card-two -->
<article class="card">
<p>content for card three</p>
</article><!-- /card-three -->
<article class="card">
<p>content for card four</p>
</article><!-- /card-four -->
</section>
</div>
開始するCSSは次のとおりです。
.cards {
display: flex;
justify-content: space-between;
}
フレックスプロパティ
深く掘り下げる前に、flexプロパティの基本を理解しておくことをお勧めします。 flexプロパティは、同じコンテナ内の残りのフレキシブルアイテムを基準にしたアイテムの長さを指定します。 flexプロパティは、 flex-grow 、 flex-shrink 、およびflex-basisプロパティの省略形です。 デフォルト値は0 1 auto; 。 私の意見では、Flexboxを完全に理解するための最良の方法は、さまざまな値を試して何が起こるかを確認することです。
フレックスアイテムのflex-growプロパティは、アイテムが占めるフレックスコンテナ内のスペースの量を指定します。
flex-shrinkプロパティは、同じコンテナ内の残りのフレキシブルアイテムに対してアイテムがどのように縮小するかを指定します。
flex-basisプロパティは、フレックスアイテムの初期メインサイズを指定します。 このプロパティは、box-sizingを使用して特に指定されていない限り、コンテンツボックスのサイズを決定します。 幅がコンテンツによって定義されている場合、Autoがデフォルトです。これはwidth: auto;に似ています。 。 独自のコンテンツで定義されたスペースを占有します。 flex-basis: 15em; 。 値が0の場合、アイテムは空き領域を埋めるために拡張されないため、状況はかなり設定されます。
display: flex; and justify-content: space-between; そしてこの時点で、物事は少し予測不可能です。 Flexboxが使用されていますが、現時点ではそれほど明白ではありません。 この宣言により、各フレックスアイテムは横一列に並べて配置されました。
Codepenでこれを参照してください。
なぜこれらのフレックスアイテムのそれぞれが異なる幅を持っているのか疑問に思われるかもしれません。 Flexboxは、これらの各アイテムのデフォルトの最小幅を把握しようとしています。 そして、さまざまな単語の長さやその他のデザイン要素のために、これらの異なるサイズのボックスになってしまいます。 一貫した外観を実現するには、もう少し作業を行う必要があります。 ラップを設定し、希望の幅を決定すると、これらを均一なカードにするのに役立ちます。
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
デフォルトでは、フレックスアイテムはすべて1行に収まるように試みます。 flex-wrap: wrap; デフォルトは全幅であるため、アイテムは互いに重なり合うようになります。
Codepenでこれを参照してください。
全幅は小さなデバイスに最適です。さまざまなブレークポイントに取り組む前に、より大きな画面を計画するときに、このことを念頭に置いてください。 幅を変えると、カードがより均一に見え始めます。
個々のカードのスタイルを設定するには、ここで.cardクラスを追加する必要があります。 これは、 .cardsスタイルのすぐ下に置くことができます。
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
flex: 0 1 24%;
}
以前から覚えておいてください。flexプロパティは省略形ですflex-growは0、 flex-shrinkは1、 widthは24％です。 指定された幅を追加することにより、間にスペースを入れた4行が得られます。
Codepenでこれを参照してください。
間隔を空けるためにjustify-contentプロパティを設定します。 最初のアイテムは左に強く表示され、2番目と3番目のアイテムは中央に表示され、4番目のアイテムは右に強く表示されます。 カードの幅は24％であるため、24％の4つの列の合計が100％にならないため、ある程度のスペースが残っています。 正確には残り4％です。 この4％は、各アイテムの間に均等に配置されます。 したがって、カード間には約1.33％のスペースがあります。
Codepenでこれを参照してください。
calcを使用することによってもより正確にすることができます。 calcを使用するようにflex-basis値を変更すると、次のようになります。
.card {
flex: 0 1 calc(25% - 1em);
}
これのすばらしい点は、ブラウザがスペースの25％を取得し、そこから1emを削除することです。これにより、カードがわずかに小さくなります。
これは、使用可能なスペースを調整するための巧妙な方法です。 1emはアイテム間で均等に分散され、完璧なレイアウトになります。
これまで、身長についてはあまり話していませんでした。 高さがどのように機能するかを示すために、カードの別の行を追加しました。 どのカードが最も多くのコンテンツを持っているかによって異なります–他のカードの高さが続きます。 したがって、コンテンツのすべての行の高さは同じになります。
これは非常に「ズームアウト」されたビューですが、2番目のカードにはその行の他のカードよりも多くのテキストがあるため、最初の行はかなり高いことに気付くでしょう。 2行目はテキストが少ないため、全体的に短くなっています。
小型デバイス用のカード
現在、すべての画面に4つの列がありますが、これは実際にはベストプラクティスではありません。 ブラウザウィンドウを小さくすると、4枚のカードが小さい画面で押しつぶされることがわかります。これは読みやすさには理想的ではありません。 幸いなことに、メディアクエリを使用すると、状況がはるかに良くなり始めます。
問題の解決を開始するには、指定されたブレークポイントにより、コンテンツがすべての異なる画面タイプで正しく表示されるようになります。
使用されるブレークポイントは次のとおりです（独自のブレークポイントも自由に使用できます。概念は引き続き適用されます）。
@media screen and (min-width: 40em) {
.cards {
}
.card {
}
}
@media screen and (min-width: 60em) {
.cards {
}
.card {
}
}
@media screen and (min-width: 52em) {
.centered {
}
}
今まで大きな考えでした。 モバイルファーストの考え方に入り、 min-width: 40emブレークポイントから始めましょう。
@media screen and (min-width: 40em) {
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
flex: 0 1 calc(25% - 1em);
}
}
これらの変更により、カードは全画面幅で表示され、幅が約640px未満の画面では互いに重なり合います。 ブラウザウィンドウをそれより上に展開すると、4つの列が返されます。 これは、 min-widthが40emであり、4枚のカードの列を作成した場所であるため意味があります。
ここで欠けているのは中立です。 ミッドレンジの場合、4枚の押しつぶされたカードよりも2枚のカードを続けて置く方が読みやすくなります。 2枚のカードの列を把握する前に、4枚のカードの列を持つ最大の画面に対応するために別のメディアクエリを追加する必要があります。
@media screen and (min-width: 60em) {
.card {
flex: 0 1 calc(25% - 1em);
}
}
min-width 60emの新しいメディアクエリは、4枚のカードが宣言される場所です。 40emのmin-widthは、2枚のカードの列が宣言される場所です。 魔法は50％ calcのフレックス計算値で起こっています。
@media screen and (min-width: 40em) {
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
flex: 0 1 calc(50% - 1em);
}
}
その単純な変更で、物事は今機能しています！ ブラウザウィンドウを縮小および拡大して、すべてが正しく表示されることを確認します。
Codepenでこれを参照してください。
カードの列が正しく見える場合は、準備ができています。 このチュートリアルを試していて、最後の行が不均一な場合は、読み続けてください。
動的コンテンツとカード間隔の最後の行
カードの数に応じて、最後の行が間抜けな場合とない場合があります。 最後の行がいっぱいであるか、追加のカードが1つしかない場合、問題は発生しません。 コンテンツを事前に計画しておくこともありますが、コンテンツが動的である場合、カードの最後の行が意図したとおりに動作しない可能性があります。 複数の余分なカードがあり、コンテンツを正当化するように設定されている場合、それらの間のスペースが均等になり、上の行と一致しない場合があります。
この外観を得るには、別の考え方が必要です。 これはそれほど効率的ではないと思いますが、比較的簡単です。
.cardsと.cardのスタイル設定は、メディアクエリの外部で行われました。
.cards {
display: flex;
flex-wrap: wrap;
}
.card {
flex: 1 0 500px;
box-sizing: border-box;
margin: 1rem .25em;
}
メディアクエリは、カードの数が決定される場所です。
@media screen and (min-width: 40em) {
.card {
max-width: calc(50% - 1em);
}
}
@media screen and (min-width: 60em) {
.card {
max-width: calc(25% - 1em);
}
}
変更されたソリューションを確認するには、Codepenをご覧ください。
うまくいけば、これはあなたが始めるのに役立つFlexboxの概念の基本的な概要をあなたに与えるでしょう。 Flexboxは非常に優れたブラウザサポートを備えており、カードレイアウトは引き続きWebサイトのデザインで利用されます。 また、カードレイアウトは、Flexboxを利用する方法のほんの始まりにすぎないことを忘れないでください。
次へ：WordPressサイトをより速く設計する
このガイドでは、WordPressワークフローを高速化および高速化するためのヒントについて説明します。 サイトの初期設定からライブ配信まで、日常業務から時間を削減する方法を見つけてください。
こちらから無料ガイドをダウンロードしてください！
Flexboxを使用して他に何を構築しましたか？ コメントであなたのプロジェクトを共有してください！