最近増えてきたFlexboxベースのCSSフレームワークをご紹介 | MONOCHROME DESIGN｜東京杉並のフリーランスWEBデザイナー。WordPressホームページ/ウェブサイト制作
最近レイアウトにFlexboxをベースにしたモダンなCSSフレームワークが出始めてきています。ここではFlexboxを採用したCSSフレームワークをご紹介します。 Flexboxとは まずFlexboxとはなんなのか、正式名称は「CSS Flexible Box Layout Module」と言うもので、ざっくり言うと「今までより簡単にレイアウトが組めますよ！」って事です。 ざっくりしすぎなので補足すると、今までレイアウトを組むときは、テーブルを使ったり、CSSのfloatを使ったりして組んでいましたが、横並びにするとレイアウトが崩れる、縦の高さを揃えるのが難しい、上下中央揃えをしようとすると面倒・・・と手間がかかりました。javascriptを使わないと出来ない場合もありWEBのレイアウトは結構不自由だったのですが、Flexboxによってそれが改善されます。 Flexbox自体の使い方は
目的 以下のように、親パネルの中に子パネルが 12 枚並んでいます。 Flexbox (CSS Flexible Box Layout) を使って子パネルをこの画像の通りに並べたいです。 要件は次の 2 つです。 1. 子パネル全体は親パネルの左右中央に配置しつつ、子パネルは左から順番にならべたい。 2. それぞれの子パネルの行と列を整列させたい。 HTML は以下の通りです。 <ul class="grid"> <li class="cell">ゆの</li> <li class="cell">宮子</li> <li class="cell">沙英</li> <li class="cell">ヒロ</li> <li class="cell">乃莉</li> <li class="cell">なずな</li> <li class="cell">茉里</li> <li class="cell
How Flexbox works — explained with big, colorful, animated gifs
by Scott Domes How Flexbox works — explained with big, colorful, animated gifsFlexbox promises to save us from the evils of plain CSS (like vertical alignment). Well, Flexbox does deliver on that goal. But mastering its new mental model can be challenging. So let’s take an animated look at how Flexbox works, so we can use it to build better layouts. Flexbox’s underlying principle is to make layout
flexbox-cheat.site
This domain may be for sale!
【CSS】Flexboxのプロパティ（justify-content、align-items、align-self、align-content）を紹介します
【CSS】Flexboxのプロパティ（justify-content、align-items、align-self、align-content）を紹介します こんにちは、WEBマーケティング部の杉尾です。 前回、前々回に引き続き、Flexboxのプロパティを紹介します。 前々回はコチラ ⇒【CSS】Flexboxのプロパティ（flex-direction、flex-wrap、flex-flow、order）を紹介します 前回はコチラ ⇒【CSS】Flexboxのプロパティ（flex-grow、flex-shrink、flex-basis、flex）を紹介します はじめに ※FlexboxはIE9以下に対応していません。 ※IE10への対応はこの記事では割愛します。 ※PC版safari(バージョン6.1以降)対応用にベンダープレフィックスを使用しています。 flexコンテナ、flexアイテ
flexboxプロパティってとても便利ですよね。 便利だなーと思うのですが、毎回使い方を忘れて使うたびにググってます…。 いい加減覚えよう！といういましめエントリーです。 フレックスレイアウト 今までレイアウトには ブロックレイアウト インラインレイアウト テーブルレイアウト 配置レイアウト がありましたが、フレックスレイアウトという、新しいレイアウトモードが誕生しました。 近年、アプリやWEBページが複雑なレイアウトをする傾向から、CSS3で新しく誕生したレイアウトモードです。 どういうときに使うの？ 要素を左右上下と整列させたいとき 横並び要素の高さをそろえたいとき 要素を好きな順序に並び替えたいとき などなど、用途は様々です。 例えばこういう配置で高さを揃えたいときとか… sectionの後はh1を置きたいけど、上に画像がいるなーというときとか… See the Pen doejQa
ギャラリーサイトなどでよく見かける、画像を敷き詰めてタイル状に並べたグリッドレイアウトを実現するには、「Masonry」に代表されるjQuery/Javascriptプラグインを利用することで、表示幅を計算して簡単に自動で配置することができますが、Javascriptを利用するという点で、少々敷居が高く感じてしまう方も多いかもしれません。 しかし、現在はメジャーブラウザ(IEはv.11〜)で多くのCSS3のプロパティをサポートしているため、簡単なMasonryグリッドレイアウトであれば、CSS3のFlexboxのみで表現可能です。 というわけで、今回はFlexboxを利用したレスポンシブ対応のMasonryレイアウトのサンプルをご紹介します。 See the Pen Pure CSS Masonry Gallery with Flexbox by digistate (@digistate
5分で分るflexbox
The realm of product design is a constantly changing environment where technology and style intersect. Every year introduces fresh challenges and exciting trends that mold the future of this captivating art form. In this piece, we delve into the significant trends set to influence the look and functionality of product design in the year 2024. Mental health has been in the news quite a bit lately.
Joy Shaheb Posted on Jan 10, 2021 • Updated on May 27, 2021 • Originally published at freecodecamp.org Let's refresh Our CSS Flexbox Memory. Here's a Tutorial & Cheat Sheet of everything you can do with CSS flexbox. Let's Go 🎖️ The original Article at FreeCodeCamp Table of Contents -- FlexBox Architecture flex-direction justify-content align-content align-items align-self flex - grow | shrink | w
2015-10-31 2015年10月度のflexboxの書き方 CSS3 １年ぶりに業務でコーディング・・・が、早速つまずく。「display:flexは、仕様やら、OSやら、端末やら、いろんなものがコロコロ変わったみたいだけど、今はどう指定すれば良いの？」ってことで、flexboxの書き方を調べました。 ブラウザのサポート状況などから まずは、先にやってくれてる人がいないかネット検索。比較的新しめの記事がこちらでした。 Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編1】を紹介します【2015年4月現在】 Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編2】を紹介します【2015年4月現在】 コリスでは各プロパティを図で詳しく説明してくれています。 CSS3 Flex
Bruno Profile Work 制作の方針について Brunoが生み出すWebサイトは、文章や写真を活かすためのデザインをご提供します。訪問者へアピールするためのコンテンツがメイン。この意識のもと、適切な見せ方を追求しながら制作しております。 制作料金 基本WordPressサイトの制作となりますが、ご希望に合わせてHTMLの静的サイトの制作ももちろんお請けさせていただきます。また、デザインだけやコーディングだけといった制作工程単位でのご依頼も対応しております。 よくある質問 BrunoのWebサイト制作では、できるだけクライアント様にご不安を与えることなく、お問い合わせ時から制作完了時、その後の運用までサポートさせていただいておりますが、その際によく頂くご質問についてご紹介致します。
![flexbox[CSS3]で実践的なレイアウトを。実際の現場で使うflexboxの4パターン](https://cdn-ak-scissors.b.st-hatena.com/image/square/87142ee80d21ebc47963365cae3a8fa5e9cd9820/height=288;version=1;width=512/https%3A%2F%2Fweb-bruno.com%2Fwp-content%2Fuploads%2F2016%2F10%2Fflexbox.png)
Flexible Box Layoutでカラムレイアウト たとえば、左右にカラム分けされたレイアウトを作りたいとします。これをCSSで実現する方法は何通りも存在します。 過去にCodeGridで紹介したような*table-cellやinline-blockを利用したカラムレイアウトであったり、単純にfloatを使用したものであったり、display: grid;であったり……。 *注：これまでに紹介した記事 「display: tableの活用：フレキシブルな段組みレイアウト」 「display: tableの活用：フィットする特性と均等配置」 「display: tableの活用：流し込む方向の制御」 「inline layoutを使いこなす：カラムレイアウト」 方法は挙げればきりがないのですが、今回はCSS Flexible Box Layout Module（以下、Flexbox）に
Flexbox adds a level of control to our layouts that we didn't really have before, we hacked our floats and clearfixed, we fought whitespace with inline-block, pushed display:table, and even stretched content with position:absolute. We no longer need to rely on these solutions beyond providing something visual to browsers without flex features. Flex's features will add an important set of tools to
flexboxで横並び ヘッダー下におすすめ記事を並べるカスタマイズ - Minimal Green
ブログのヘッダー下におすすめ記事を4つ（PC）並べるカスタマイズをしました。過去の記事で読んで欲しいおすすめ記事やブログに初めて訪れた人にまず読んで欲しい記事をピックアップしてファーストビューに表示することが出来ます。「Page Analytics」によるとそこそこクリックされているようなので、直帰率を下げるのに役立つかもしれません。 はてなブログのサイドバーモジュールを使って自動的に人気エントリーを表示する方法もありますが、この方法は手動で記事を選びHTMLコードを貼り付けています。 レスポンシブ表示 flexboxで横並び ヘッダー下におすすめ記事を並べるカスタマイズ 余白などの調整 自動的に人気記事をまとめブログ風に表示するには↓の半月さんの記事をご参照下さい。 moonnote.hateblo.jp レスポンシブ表示 PC スマートフォン このようにレスポンシブに表示されます。タブ
Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編1】を紹介します【2015年4月現在】
Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編1】を紹介します【2015年4月現在】 こんにちは、WEBマーケティング部の杉尾です。 今回と次回で、『2015年4月現在、Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編】』を紹介します。 今回はFlexboxのIE10、Safari、iOS Safari、Androidブラウザへの対応実践編の第一回です。 各プロパティの書き方 はじめに ※Flexboxは過去に二度大きな仕様変更がありました。 それぞれを古い順に、『box仕様』、『flexbox仕様』、『flex仕様』（現行）と呼称します。 ※IE10はベンダープレフィックス（-ms-）付きで『flexbox仕様』に対応している唯一のブラウザです。 ※iOS 6.1以前
)
Flexible box ("Flexbox") layout in Internet Explorer 10 (Windows)
Note This content applies to CSS Flexible Box on Internet Explorer 10. For a more current overview of Flexbox, see Flexible Box Layout. Caution Internet Explorer 11 no longer supports the Microsoft vendor prefix ("-ms-") version of the flexbox properties. You should instead use the non-prefixed names, which is preferred for better standards compliance and future compatibility. See Flexible box (
CSS の flexbox をゲーム感覚で身につけられる Flexbox Froggy がおもしろい 2015年12月10日 17:37HTML / CSS CSS の flexbox (略さずに言うと flexible box) を使うと、ページ上の要素を任意の方向や順番で配置したり、柔軟なサイズを持たせて表示領域を最適に埋めたりできますね。 flexbox を身につける 以前は横に並んだブロック要素の高さを揃えたり、幅が固定されていない要素を等間隔に中央揃えで並べたりするのに JavaScript のライブラリや CSS のちょっとひねった書き方をつかってましたけど、flexbox を使えば特別な処理は必要なく、かなりの自由度で思った通りに要素を配置できるようになりました。 それはそれは便利なんだけど、慣れるまでは概念がつかみにくかったり用語がとっつきにくかったりでどうもハードルが高い
【CSS】Flexboxのプロパティ（flex-grow、flex-shrink、flex-basis、flex）を紹介します
【CSS】Flexboxのプロパティ（flex-grow、flex-shrink、flex-basis、flex）を紹介します こんにちは、WEBマーケティング部の杉尾です。 前回に引き続き、Flexboxのプロパティを紹介します。 今回で全て紹介するつもりでしたが、記事が長くなりすぎたため２回に分けさせていただきました。 ご了承ください。 前回はコチラ ⇒【CSS】Flexboxのプロパティ（flex-direction、flex-wrap、flex-flow、order）を紹介します はじめに ※FlexboxはIE9以下に対応していません。 ※IE10への対応はこの記事では割愛します。 ※PC版safari(バージョン6.1以降)対応用にベンダープレフィックスを使用しています。 flexコンテナ、flexアイテムという語句についてはこういう関係です。 Flexboxの基本についてはコ
IntroductionFlexbox is a remarkably powerful layout mode. When we truly understand how it works, we can build dynamic layouts that respond automatically, rearranging themselves as-needed. For example, check this out: This demo is heavily inspired by Adam Argyle’s incredible “4 layouts for the price of 1” codepen. It uses no media/container queries. Instead of setting arbitrary breakpoints, it uses
cssで要素を横並びにするにはいくつか方法がありますが、 中でもflexboxは子要素の高さがデフォルトで揃ってくれるから好き！ 基本的な使い方は、親要素にdisplay:flexを指定するだけ。 子要素が横並びになり、高さも揃ってくれます。 See the Pen flexbox01 by kayukihashimoto (@kfunnytokyo) on CodePen. flex-wrap: wrapで折り返しを設定して、 justify-content: space-betweenで両端に合わせるだけで、 とっても簡単にキレイなレイアウトが組めちゃいます。 flexboxを知ってから、横並びレイアウトがスムーズに組めるようになりました。 Can I Useで確認すると、 IE11は部分的な対応となっていますが、主に古いver.のバグのようです。 バグに関しては、flexboxのバグ
CSS3のFlexboxレイアウトの基礎
Posted: 2016.09.13 / Category: HTML&CSS / Tag: CSS3 IEのサポートが最新のバージョンだけとなりましたので、そろそろPCサイトもFlexboxでレイアウトしてもいいのではないかという環境になりつつあります。 ということでFlexboxレイアウトの基礎的な部分を解説いたします。 シンプルなリストのレイアウト 最初は数字だけの簡単なリストで試してみましょう。 HTML <ul class="flex-list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> CSSは縦と横幅を設定してmarginで間隔をとっておきます。 CSS .flex-list { list-style: none; } .flex-list li { width: 100px; height: 100px; marg
FlexはFlexboxでやりたいレイアウトを、ビジュアルを確認しながら選択肢を選んで作成、コードをコピーできるシンプルなWebアプリです。設定項目の多いFlexboxは様々なレイアウトに対応できる反面で、覚えなければならない事も多く、正直言って面倒です。使うたびに検索してる、なんて方もいるかもしれませんね。 こちらはそんなFlexboxを、完成形を確認しながら選択肢を選ぶだけでコードを完成出来る、というもの。動作するチートシート、みたいな感じでした。 使ってみる 使い方はとても簡単です。まずは下にスクロールします。アイテムの数やflex-flowを聞かれます。次にwrapやjustify-contentなどを聞かれるので選択肢を選んでいく、という流れ。最終的にできたレイアウトを実装する為のCSSコードをコピーすればOKです。僕の下手な説明を読むより、使ってみた方が早いかも、という程度には
Flexboxのプロパティってめっちゃ多いですが、全部を覚えなくても実務レベルで使うことはできます。わたしも最初のころはFlexboxのプロパティを試していましたが、実際に使うようになって「あれ、ほとんどのプロパティは使わなくて実装できるよね？」ってなりました。 もちろん全部を使いこなせるに越したことはないですが、まずは使うところから覚えるのが勉強の王道だと思います。 この記事では、現役コーダーのわたしが実際によく使うFlexboxのパターンを5つ厳選しました。これから勉強する方は、まずはこの5パターンから覚えていくことをおすすめします！ Flexboxで覚えるべき5パターン 以前ツイートしたのですが、普段コーディングを仕事にしていても、ほぼこの3パターンで足ります（どんだけ簡単なコーディングしているだ！ってツッコミは禁止） 今回は、この3パターンに2パターン加えました。おそらくシンプルな
My brother is a fresh computer engineering graduate and he is currently finishing his internship in front-end development. He learned about both CSS grid and flexbox, but I noticed a pattern that I see a lot on the web. He can’t decide when to use grid or flexbox. For example, he used CSS grid to layout a website header and mentioned that the process wasn’t smooth as he played with grid-column and
GitHub - jonathantneal/flexibility: A JavaScript polyfill for Flexbox
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Flexbox Patterns
IntroductionThe CSS Flexible box module level 3 — or Flexbox for short — brings with it a lot of power and some very exciting possibilities for web development, allowing us to put together complex site layouts easily and rapidly, and dispensing with some of the illogical hacks and kludges that we’ve traditionally used. I dealt with the basics of Flexbox in my article Flexbox: fast track to layout
Left Sidebar 2-Column Responsive Layout (CSS Grid & Flexbox)
Holy Grail Left Sidebar Right Sidebar 1 Column 2 Columns 3 Columns 4 Columns 5 Columns 6 Columns 7 Columns 8 Columns Table of contents What is the "Left Sidebar" website layout? Choose your method: CSS grid Flexbox Responsive Attributes Responsive Columns Floated blocks Tables Compatible addons What Is The "Left Sidebar" Website Layout? The left sidebar layout is a design with a vertical panel on
この記事ではCSSのFlexBoxという機能を使ってヘッダー/フッター固定のWebサイトを作る方法について紹介します。 ヘッダー/フッターを固定する方法をネットで調べてみると「position: fixed;に設定すれば良い」という記事が数多くヒットします。 この方法はヘッダー/フッターの高さが固定のときやデザイン的に敢えてメイン要素に被せたいというときは良いですが、そうではないときメイン要素がヘッダー/フッターに重なってしまって見えないという問題点があります。（詳細は後述） そこでこの記事ではよくある"position: fixed;"ではなく"FlexBox"を使って、ヘッダー/フッターが可変長の場合でも対応できる固定方法について紹介します。 想定読者 これからHTML/CSSの勉強をしようとしている初心者の方。 1から詳しく解説しているのである程度HTML/CSSを書いたことがある方
React Nativeのデザイン - Stylesheet/Flexbox (part1) - Qiita
React Nativeのアプリはスタイルシートで各コンポーネントの配置、色、フォント等のデザインを決めていきます。Webプログラマなら体に染みついているpadding等を使うので、すぐに慣れると思います。 公式ドキュメントから一覧を見ることができますが、border系は下記のようになります。注意点として、ハイフン(-)で単語を区切るんではなくCamelCaseになっていることです。 borderColor string borderTopColor string borderRightColor string borderBottomColor string borderLeftColor string borderRadius number borderTopLeftRadius number borderTopRightRadius number borderBottomLeftRa
BulmaはFlexboxベースのモダンなCSSフレームワークです。レスポンシブWebデザインに対応しており、オープンソースとして公開されています。カラースキームもいいセンスしてますね。これはなかなか使いやすそうです。 モダンなブルマとかどういうことなのって思ったのですが、調べてみるといわゆる旧女性用運動着のスペルはbloomerで、本フレームワーク名のBulmaはドラゴンボールのブルマの綴りらしいです。画像検索したらブルマが「Bulma」って書かれたキャップをかぶっていました。ムダ知識が増えてオラわくわくしてきました。よく見るとアイコンもブルマの色に似ているかも・・・と思いましたが特にそういった言及はありませんので、ドラゴンボールでもなんでもない全然関係ない由来だったらすごくごめんなさい。ライセンスはMITとの事。 Bulma
Flexbox Layout Flexbox lets you build flex-ible layouts! Flex-box Basics Flex-box By default flexbox positions elements within a single row. Note how all divs within the row are distributed equally and have the same width.
The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment — Smashing Magazine
In this article Rachel Andrew explains how Flexbox and CSS Grid fit together, and how we can build resilient and flexible layouts today while providing a decent fallback for older browsers. Editor’s note: Please note that this article is quite lengthy, and contains dozens of CodePen embeds for an interactive view. The page might take a little while to load, so please be patient. Layout on the web
Flexbox For Interfaces All The Way: Tracks Case Study — Smashing Magazine
Flexbox today is very, very real. After many years of development, the specification has become much more stable, making it easier to achieve those CSS layout dreams. In this article, Dennis Gaebel Jr will discuss layout patterns well suited to flexbox, using the interface from the Tracks application, which also takes advantage of atomic design principles. He’ll share how flexbox proved useful and
* { overflow-wrap: break-word; word-wrap: break-word; } .d-flex:not(.flex-column)>* { min-width: 0; } .d-flex.flex-column>* { max-width: 100%; } <!DOCTYPE html> <meta charset="UTF-8"> <title>Flexbox overflow-wrap Test</title> <style> /* 体裁用 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: monospace; } html, body, main { height: 100%; } main { width: 640px; background: ivory; marg
1-Line Layouts*はFlexboxやCSS Gridでよく用いられるレイアウトのコードを提供するプロジェクトサイトです。 センター配置やサイドバーを持った2カラムレイアウト、ヘッダ/メインコンテンツ/フッターを1カラムで揃えたパンケーキスタイル、なつかしのHoly Grailレイアウトやカードを並べたUIなどよく見かけるレイアウトが揃えられています。 例えばこのようなカードを並べたようなレイアウトはかなり使われている印象ですね。 CSSをよく学んでおられる方には不要だと思いますが、そうでない方には結構有益なプロジェクトサイトではないかなぁと思います。 1-Line Layouts*
Waffle gridはflexboxを使った、シンプル軽量なグリッドシステムです。7kbほどのスタイルシートでレスポンシブ、カスタマイズ性も考慮された設計との事です。ありがちなclassなのでフレームワーク的なものを使い慣れてる方は扱いやすいんじゃないでしょうか。CDNもあるようです。ライセンスはMIT。 Waffle grid
CSS の Flexbox で、要素の左右中央寄せ、均等割り、右寄せ（ justyify-content ）の方法｜レンタルサーバーナレッジ
Flexbox で中央寄せにする方法 flex-container に「 justyify-content 」プロパティを使用します。 各プロパティの値は下記の通りで、例えば中央寄せにしたい場合は、center を指定します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <title>Flexboxテスト</title> <meta charset="UTF-8"> </head> <style> .container{ display: flex; width: 100%; background-color: #aaa; /*並び順*/ /* flex-start：左寄せ（デフォルト） flex-end：右寄せ center： 中央寄せ space-between：残り余白の均等割り space-around：左右余白 ＋ 均等割り *
【CSS】Flexboxの使い方を基本から徹底解説！レイアウトがとっても簡単に！ 公開日:2018/05/21 /最終更新日:2020/06/05 CSS PICKUP Technique flexboxとは flexboxとは「Flexible Box Layout Module」のことで、CSSでのレイアウト設定を簡単にするレイアウトモジュールです。今までjavascript・jQueryで行っていたような複雑なレイアウトもとてもシンプルに設定できます。数年前まではflexboxをサポートしていないブラウザが多く使いづらかったのですが、現在（2018年5月現在）では、ほとんどのブラウザにサポートされています。 flexboxの基本的な使い方 それでは基本的な使い方からやっていきましょう。まず抑えるポイントは2つ。 flexコンテナー flexコンテナーは下記に記載するflexアイテムを
メニューを1列に均等幅表示する方法 グローバルナビのメニューを1列に均等幅表示するには、簡単に書くと以下のような設定を追加する形になります。（※CSSセレクタは、テーマのものに合わせてください。） #navi ul{ display: flex; /*フレキシブルボックス*/ text-align: center; /*センタリングは好みで*/ } #navi ul li{ width: 300px; /*幅は大きめに調節する*/ } テキストのセンタリングが不要ならば、ulとliにそれぞれ1つずつプロパティーを追加設定するだけで均等幅表示を実現することができます。なんて簡単。 動作確認すると、こんな感じに表示されます。 ただ、Can I use…で確認してみると、FlexBoxは、現行のモダンブラウザでは、ほぼ利用できるようですが、Safariなどは「-webkit-」のようにベンダープ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flexbox で全体を中央に配置しつつ最後の行を左揃えにする - Qiita
レスポンシブで大活躍のflexboxを使い倒す(前編) - Hatsuka
CSS(Flexbox)だけでタイルレイアウト(Masonry)を表示するサンプル
Complete Flexbox Tutorial w/ Cheat Sheet
2015年10月度のflexboxの書き方 - Web Design Note
flexbox[CSS3]で実践的なレイアウトを。実際の現場で使うflexboxの4パターン
そこが知りたい、Flexbox | 第1回 仕様を知る 1
Experiment: Using Flexbox Today - Chris Wright
CSS の flexbox をゲーム感覚で身につけられる Flexbox Froggy がおもしろい
An Interactive Guide to Flexbox
Flexboxを使って孫要素まで高さを揃える方法 - Qiita
Flexboxでやりたいレイアウトを、ビジュアルを見ながら選択肢を選んで作成、コードをコピーできる・「Flex」
【コピペOKのサンプル付き】Flexboxはこの5パターン覚えておけば大丈夫！ | HPcode（えいちぴーこーど）
Grid for layout, Flexbox for components - Ahmad Shadeed
Dev.Opera — Advanced Cross-Browser Flexbox
position: fixed;を使わずにヘッダー/フッターを固定する方法【FlexBox解説】
FlexboxベースのモダンなCSSフレームワーク・「Bulma」
CSS Layout - Flexbox
Flexbox からコンテンツはみ出る問題を完全に解決する - Qiita
FlexboxやCSS Gridでよく用いられるレイアウトのコードを提供する・「1-Line Layouts*」
flexboxを使った、シンプル軽量なグリッドシステム・「Waffle grid」
【CSS】Flexboxの使い方を基本から徹底解説！レイアウトがとっても簡単に！
WordPressグローバルナビの横並びメニューをFlexBoxで均等幅表示する方法