web-dev-qa-db-ja.com

flexbox複数の行でアイテムを均等に分割できますか？

メディアクエリを使用せずに、レスポンシブflexboxグリッドで遊んでみました。

http://jsbin.com/qurumisu/1 （ウィンドウのサイズを変更して、動作を確認します）

行ごとにできる限り多くのflexアイテムに適合し、ライン全体を埋めるために幅を均等に伸ばします。ただし、これは「孤立した」アイテムには役立ちません。最初の行が5/6アイテムに収まる場合、2番目の行には残りが1つしかないため、兄弟よりもはるかに広くなります。必要な行数で要素を均等に分割することで、この動作を回避したいと思います。

これは可能ですか？

cssflexbox
20
Albin

いいえ、フレックスベースの値を調整するメディアクエリがないとできません。伸縮して折り返すFlexアイテムは、各行に収まるアイテムの量を最大化しようとします。

代わりに、作成されたすべての列に要素を均等に分散しようとする複数列モジュールの使用を検討することをお勧めします。

.foo {
    columns: 100px;
}

http://caniuse.com/#feat=multicolumn

9
cimmanon

私はまったく同じものを探していました（フレックスラップのものに画像サムネイルを並べる）。あなたのサンプルは私にいくつかの指示を与え、私はそれを少し遊んで、次のことを思いつきました：

まあ、HTMLコードに追加のマークアップを追加することをいとわないのであれば、それは確かに可能です。全幅の画面にnアイテムを表示できると想定して、コンテナの最後にn-1の<div class="hidden-item">アイテムを追加し、これらの非表示のアイテムが同じwidthがありませんheight。このようにして、それらは折り返され、コンテナの高さを上げることなく、最後のアイテムを強制的に収縮させます。

結果はこちら： http://output.jsbin.com/qaxatujaho/1

5
skybow

以下は、私が作成したJavaScriptソリューションです この質問 ：

_var resize = function() {
  var container = document.querySelector('#container');
  var items = document.querySelectorAll('.item');
  var css = document.querySelector('#js-css');

  var itemWidth = 100;
  var containerWidth = $(container).width();

  var perRowCount = Math.floor(containerWidth / itemWidth);
  var rowCount = Math.ceil(items.length / perRowCount);
  var newPerRowCount = Math.floor(items.length / rowCount);

  var newItemWidth = (containerWidth / newPerRowCount) - (parseInt($(items[0]).css('margin')) * 2);

  css.innerHTML = '.item { width: ' + newItemWidth + 'px; }';
};
_

ビューポートのサイズが変更されると、resize()関数を実行できます。

以下に例を示します：（または JS Bin ）

_var resize = function() {
  var container = document.querySelector('#container');
  var items = document.querySelectorAll('.item');
  var css = document.querySelector('#js-css');

  var itemWidth = 100;
  var containerWidth = $(container).width();

  var perRowCount = Math.floor(containerWidth / itemWidth);
  var rowCount = Math.ceil(items.length / perRowCount);
  var newPerRowCount = Math.floor(items.length / rowCount);

  var newItemWidth = (containerWidth / newPerRowCount) - (parseInt($(items[0]).css('margin')) * 2);

  css.innerHTML = '.item { width: ' + newItemWidth + 'px; }';
};

var increase = function() {
  var container = document.querySelector('#container');

  $(container).width($(container).width() + 15);

  resize();
};

var decrease = function() {
  var container = document.querySelector('#container');

  $(container).width($(container).width() - 15);

  resize();
};

resize();_
_#container {
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  display: flex;
  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
  -webkit-align-items: center;
  -ms-align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  display: -webkit-flex;
  display: -ms-flex;
  width: 450px;
  height: auto;
  border: 1px solid #8BC34A;
  align-self: center;
  -ms-align-self: center;
  -webkit-align-self: center;
}
.item {
  justify-content: center;
  margin: 5px;
  display: inline-flex;
  width: 100px;
  height: 50px;
  background-color: #03A9F4;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  display: -webkit-inline-flex;
  display: -ms-inline-flex;
}
span {
  align-self: center;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  -webkit-align-self: center;
  -ms-align-self: center;
}
body {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
#title {
  display: flex;
  color: grey;
  font-family: sans-serif;
  font-size: 20px;
  margin: 10px;
}
#sub-title {
  display: flex;
  color: grey;
  font-family: sans-serif;
  font-size: 15px;
  margin-bottom: 15px;
}
button {
  width: 100px;
  height: 40px;
  background-color: #03A9F4;
  color: white;
  align-self: center;
  margin: 10px;
}_
_<!DOCTYPE html>
<html>

<head>
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>

  <style id="js-css">
  </style>

  <span id="title">Flexbox Grid</span>
  <span id="sub-title">How to make each row have the same number of items?</span>

  <div id="container">
    <div class="item">
      <span>ITEM #1</span>
    </div>
    <div class="item">
      <span>ITEM #2</span>
    </div>
    <div class="item">
      <span>ITEM #3</span>
    </div>
    <div class="item">
      <span>ITEM #4</span>
    </div>
    <div class="item">
      <span>ITEM #5</span>
    </div>
    <div class="item">
      <span>ITEM #6</span>
    </div>
  </div>

  <button onClick="increase()">+</button>
  <button onClick="resize()">Resize Items</button>
  <button onClick="decrease()">-</button>

</body>

</html>_
0
davidwroxy