web-dev-qa-db-ja.com

複数行flexboxの最後の行/行を左揃えにする方法

flexboxレイアウトに大きな問題があります。画像で満たされたボックスでコンテナを構築し、flexboxレイアウトを使用してコンテンツをグリッドのように見えるように調整することにしました

彼女のコード：

<div class="container">

    <div class="item"></div>
    <div class="item"></div>
    ...
    <div class="item"></div>

</div>

cSS

.container {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
}

.container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }

そして、最後の行/行を除くすべてが見栄えがいい-他の行と同じ数の要素が含まれていない場合、要素をセンタリングして、グリッド効果を壊しました。

http://jsfiddle.net/puz219/7Hq2E/

最後の行/行を左側に揃える方法は？

cssrowflexbox
70
PuZ

とった。 （私は思う）（これがここでの私の最初の貢献です！）

行ごとに4つの画像が必要なレイアウトを想像してください。 w：205 h：174問題：justify-content：space-aroundを使用すると、最後の行に4つの画像（3、2、または1）がない場合、グリッドを尊重せず、広がります。そう。

このようなクラス「filling-empty-space-childs」でhtml 3 divに作成します。

.filling-empty-space-childs {
    width:205px; /*the width of the images in this example*/
    height:0; /*Important! for the divs to collapse should they fall in a new row*/
}

flexboxコンテナにはdisplay：flex/flex-wrap：wrap;があります。/justify-content：space-around

最後の行には4、3、2、1個の画像を含めることができます。4個の画像：問題ありません。この3つのdivは高さがないため、新しい行で折りたたまれます。 images：問題ありません。1つのdivが同じ行に表示され、他の2つのdivは新しい行にラップされますが、高さがないため折りたたまれます。 2つの画像：問題なし、2つのdivは同じ行にあり、不可視、残りは...折りたたまれています1 image：問題ありません、3つのdivは行っていますスペースを埋めるために。

86
La Nube - Luis R. Díaz Muñiz

残念ながら、これはflexboxでは不可能です。

最善の回避策は、最後の行の空の「ブロック」を「埋める」目に見えない子を追加することです。そのようにして、実際の表示可能な要素は左揃えになります。

同様の質問： Flex-box：最後の行をグリッドに揃える

40
sandstrom

最後の子フレックスアイテムでmargin-right:autoを使用できます。

ここでの問題は、このフレックスアイテムの左側のスペース間プロパティが失われることです。

それが役に立てば幸い！

16
bzin

この例は、複数のアイテムが必要であり、応答性を考慮している場合に役立ちます。グリッドアイテムはビューポートのサイズに応じて変化します。非表示の子は使用せず、すべてCSSを使用して実行されます。

最後の行のアイテム数が少なく、ページのレスポンシブが必要な場合に、アイテムを左に揃えようとするのに役立ちます。

http://codepen.io/kunji/pen/yNPVVb

サンプルHTML

<div class="main-container">

    <div class="main-items-container">

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

    </div>

</div>

サンプルCSS

.main-container {
  max-width: 1000px;
  min-width: 300px;
  margin: 0 auto;
  padding: 40px;
  box-sizing: border-box;
  border: 1px solid #000;
}

.main-items-container {
  display: -ms-flexbox;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  padding: 0;
  margin: 10px 0;
  list-style: none;
  width: auto;
  -webkit-flex-flow: row wrap;
  justify-content: flex-start;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  box-sizing: border-box;
}

@media (min-width: 971px) {
  .item-container {
    margin: 10px 2%;
    width: 22%;
    padding: 10px;
    border: 1px solid #000;
    box-sizing: border-box;
  }
  .item-container:nth-child(4n+1) {
    margin-left: 0;
  }
  .item-container:nth-child(4n) {
    margin-right: 0;
  }
}

@media (min-width: 550px) and (max-width: 970px) {
  .item-container {
    margin: 10px 2.50%;
    width: 30%;
    padding: 10px;
    border: 1px solid #000;
    box-sizing: border-box;
  }
  .item-container:nth-child(3n+1) {
    margin-left: 0;
  }
  .item-container:nth-child(3n) {
    margin-right: 0;
  }
}

@media (max-width: 549px) {
  .item-container {
    margin: 10px 0;
    width: initial;
    padding: 10px;
    border: 1px solid #000;
    box-sizing: border-box;
  }
}
4
Kunji

これは達成したかった効果ではありませんか？

http://jsfiddle.net/7Hq2E/21/

CSS：

.container {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
}
.container .item {
    width: 23%;
    height: 180px;
    background: red;
    margin: 0 1% 20px;
}

HTML：

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
2
Jonáš Krutil

100％応答する必要があるかどうかは指定しませんでしたが、この手法のようなものは機能します。

行ごとに1つのコンテナを使用し、min-widthで制限します。また、非表示の要素を追加して計算を機能させます。

HTML

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

</div>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

</div>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item empty"></div>
    <div class="item empty"></div>

</div>

CSS

.container {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    min-width:580px;
    background:rgba(00,00,00,0.5);
}
.container .item { width: 130px; height: 180px; background: #000; margin: 0 1% 24px;  }

.container .item.empty{opacity:0;}

例はこちら 。

1
Ignacio Correia