TOOL

CSSのFlexboxで横並びや折り返し指定に便利なFLEX LAYOUT GENERATORFLEX LAYOUT GENERATOR | フレックス レイアウト ジェネレーター

更新日:

かなりの頻度で使用するflexboxレイアウト。こちらのFLEX LAYOUT GENERATOR（フレックスレイアウトジェネレーター）では親要素、子要素の設定や縦並び、横並びさまざまなレイアウトに対応していてコードをコピペで使用できるのでとても便利です。

FLEX LAYOUT GENERATOR | フレックス レイアウト ジェネレーター

https://suiq.jp/flex-layout-generator/
親要素の指定
子要素の指定
スマホでのプレビュー

ちなみに一番よく使うソース（自分のコピペ用です）↓

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
}
  • justify-content（水平方向揃え）：space-between（均等配置）
  • flex-wrap（子要素の折り返し設定）：wrap（上から下）
  • align-content（複数行設定）：flex-start（上揃え）

関連記事：