CSS Flexbox プレイグラウンド
すべてのFlexboxプロパティをビジュアルで実験できます。アイテムをクリックして個別プロパティを調整。生成CSSはそのままコピー可能。
アイテム数
3 個
<!-- コンテナプロパティ -->
<div class="fb-panel" style="margin-bottom:16px;">
<div class="fb-panel-header">コンテナのプロパティ</div>
<div class="fb-panel-body">
<p class="fb-section-title">flex-direction</p>
<div class="fb-control-group">
<select class="fb-select" id="fb-flex-direction">
<option value="row">row — 横方向</option>
<option value="row-reverse">row-reverse — 横逆</option>
<option value="column">column — 縦方向</option>
<option value="column-reverse">column-reverse — 縦逆</option>
</select>
</div>
<p class="fb-section-title">flex-wrap</p>
<div class="fb-control-group">
<select class="fb-select" id="fb-flex-wrap">
<option value="nowrap">nowrap — 折り返しなし</option>
<option value="wrap">wrap — 折り返しあり</option>
<option value="wrap-reverse">wrap-reverse — 逆折り返し</option>
</select>
</div>
<p class="fb-section-title">justify-content</p>
<div class="fb-control-group">
<select class="fb-select" id="fb-justify-content">
<option value="flex-start">flex-start — 先頭寄せ</option>
<option value="flex-end">flex-end — 末尾寄せ</option>
<option value="center">center — 中央</option>
<option value="space-between">space-between</option>
<option value="space-around">space-around</option>
<option value="space-evenly">space-evenly</option>
</select>
</div>
<p class="fb-section-title">align-items</p>
<div class="fb-control-group">
<select class="fb-select" id="fb-align-items">
<option value="stretch">stretch — 引き伸ばし</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center">center — 中央</option>
<option value="baseline">baseline</option>
</select>
</div>
<p class="fb-section-title">align-content</p>
<div class="fb-control-group">
<select class="fb-select" id="fb-align-content">
<option value="normal">normal</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center">center</option>
<option value="space-between">space-between</option>
<option value="space-around">space-around</option>
<option value="space-evenly">space-evenly</option>
<option value="stretch">stretch</option>
</select>
</div>
<p class="fb-section-title">gap（間隔）</p>
<div class="fb-control-group">
<div class="fb-range-row">
<input type="range" class="fb-range" id="fb-gap" min="0" max="40" value="8" step="2">
<span class="fb-range-val" id="fb-gap-val">8px</span>
</div>
</div>
</div>
</div>
<!-- アイテムプロパティ -->
<div class="fb-panel">
<div class="fb-panel-header">アイテムのプロパティ <span id="fb-item-label" style="opacity:0.75;font-weight:400;">（アイテム1）</span></div>
<div class="fb-panel-body">
<p class="fb-section-title">order（順序）</p>
<div class="fb-control-group">
<div class="fb-range-row">
<input type="range" class="fb-range" id="fb-order" min="-5" max="10" value="0" step="1">
<span class="fb-range-val" id="fb-order-val">0</span>
</div>
</div>
<p class="fb-section-title">flex-grow（拡大）</p>
<div class="fb-control-group">
<div class="fb-range-row">
<input type="range" class="fb-range" id="fb-flex-grow" min="0" max="10" value="0" step="1">
<span class="fb-range-val" id="fb-flex-grow-val">0</span>
</div>
</div>
<p class="fb-section-title">flex-shrink（縮小）</p>
<div class="fb-control-group">
<div class="fb-range-row">
<input type="range" class="fb-range" id="fb-flex-shrink" min="0" max="10" value="1" step="1">
<span class="fb-range-val" id="fb-flex-shrink-val">1</span>
</div>
</div>
<p class="fb-section-title">flex-basis（基本サイズ）</p>
<div class="fb-control-group">
<select class="fb-select" id="fb-flex-basis">
<option value="auto">auto</option>
<option value="0">0</option>
<option value="50px">50px</option>
<option value="80px">80px</option>
<option value="100px">100px</option>
<option value="120px">120px</option>
<option value="150px">150px</option>
<option value="200px">200px</option>
<option value="25%">25%</option>
<option value="33%">33%</option>
<option value="50%">50%</option>
</select>
</div>
<p class="fb-section-title">align-self（個別揃え）</p>
<div class="fb-control-group">
<select class="fb-select" id="fb-align-self">
<option value="auto">auto</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center">center</option>
<option value="baseline">baseline</option>
<option value="stretch">stretch</option>
</select>
</div>
</div>
</div>
ライブプレビュー
<div class="fb-code-wrap">
<div class="fb-code-header">
<span>生成CSS</span>
<button class="fb-copy-btn" id="fb-copy-btn">CSSをコピー</button>
</div>
<pre class="fb-code" id="fb-code-output"></pre>
</div>
確定申告・会計をもっとラクに？ freee会計 なら、フリーランスの経費管理もクラウドで簡単。まずは無料で試してみましょう。
clip-path作成 → CSS clip-pathメーカー
CSS詳細度 → CSS詳細度計算