BinaryDevelop
  1. ホーム
  2. css

[解決済み] フレックスボックス 最後の行をグリッドに揃える

2022-03-19 14:02:35

質問

シンプルなフレックスボックスレイアウトで、以下のようなコンテナを持っています。 

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

今度は、最後の行の項目を整列させたいと思います。 justify-content: space-between; は、グリッドの幅と高さを調整できるため、使用する必要があります。

現在、以下のように表示されます。

ここで、右下の項目を"middle column"に配置したいのですが、どうすればよいでしょうか？これを実現する最も簡単な方法は何でしょうか？以下は、小さな jsfiddle で、この動作を示しています。 

.exposegrid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

<div class="exposegrid">
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
</div>

解決方法は？

を追加します。 ::after で、スペースが自動的に埋められます。HTMLを汚す必要はありません。以下にコードペンを示します。 http://codepen.io/DanAndreasson/pen/ZQXLXj 

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します