CSS Flexboxを使用してWebページによく使用されるUIコンポーネント、ヘッダでロゴを左端にナビゲーションを右端に、固定幅のサイドバーと流動幅のメイン、フォームで入力欄とボタンの高さを合わせる、同じHTMLで異なるレイアウトのカードを実装するテクニックを紹介します。 CSS Flexbox: 5 Real World Use Cases by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでヘッダを実装する方法 Flexboxでサイドバーとメインを実装する方法 Flexboxで「Top Sellers」のグリッドを実装する方法 Flexboxでカードを実装する方法 Flexboxで検索フォームを実装する方法 はじめに FlexboxはCSSの中でも最も優れた機能の1つ
![CSS Flexboxで、Webページによく使用されるUIコンポーネントを実装するテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0e8466d7e6383a878181c586e4dd8deb1d26ed56/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202001%2F2020022101.png)