☰

フレックスボックス: 最後の行をグリッドに揃える 質問する

tag-icon • tag-icon css flexbox grid-layout
フレックスボックス: 最後の行をグリッドに揃える 質問する

次のようなコンテナーを持つシンプルなフレックスボックス レイアウトがあります。

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

ここで、最後の行の項目を他の項目と揃えたいと思います。justify-content: space-between;グリッドの幅と高さは調整可能なので、 を使用する必要があります。

現時点では

右下のアイテムは中央にあるべきです

ここで、右下の項目を「中央の列」に配置したいのですが、それを実現する最も簡単な方法は何でしょうか? これは小さな例です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>

ベストアンサー1

追加::afterスペースを自動入力します。HTML を汚す必要はありません。以下はそれを示す codepen です:http://codepen.io/DanAndreasson/pen/ZQXLXj

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

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

おすすめ記事