web-dev-qa-db-ja.com

css flexboxでラップする要素を指定する方法は？

これはまだflexbox標準の一部ではないと思いますが、特定の要素の後にラッピングを提案または強制するトリックがあるのでしょうか？さまざまなページサイズに対応し、余分なマークアップなしでリストを別の方法でラップしたいので、（たとえば）次の行に孤立したメニュー項目があるのではなく、メニューの途中で中断します。

開始HTMLは次のとおりです。

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

そしてCSS：

ul {
    display: flex;
    flex-wrap: wrap;
}

次のようなものが欲しいです。

/* inside media query targeting width */
li:nth-child(2n) {
    flex-break: after;
}

より完全なセットアップについては、jsfiddleを参照してください。 http://jsfiddle.net/theazureshadow/ww8DR/

csscss3flexbox
126
theazureshadow

これは、コンテナでこれを設定することで実現できます。

ul {
    display: flex;
    flex-wrap: wrap;
}

そして、子でこれを設定します：

li:nth-child(2n) {
    flex-basis: 100%;
}

これにより、他の計算の前に、子がコンテナの幅の100％を占めるようになります。 to containerは十分なスペースがない場合にブレークするように設定されているため、この子の前後にブレークします。

106
luksak

=========================

ここにオプションの完全なリストを含む記事があります： https://tobiasahlin.com/blog/flexbox-break-to-new-row/

編集：これは、グリッドを使用して簡単に実行できます： https://codepen.io/anon/pen/mGONxv?editors=11

=========================

特定のアイテムを壊すことはできないと思います。おそらくできる最善のことは、ブレークポイントでフレックスベースを変更することです。そう：

ul {
  flex-flow: row wrap;
  display: flex;
}

li {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 50%;
}

@media (min-width: 40em;){
li {
  flex-basis: 30%;
}

サンプルは次のとおりです。 http://cdpn.io/ndCzD

============================================

編集：特定の要素の後にブレークすることができます！ Heydon PickeringはA List Apartの記事でcssの魔法を解き放ちました： http://alistapart.com/article/quantity-queries-for-css

編集2：この答えをご覧ください： 複数行のフレックスボックスの改行

@luksakも素晴らしい答えを提供します

59
jbenjohnson

「フレックスレイアウトアルゴリズム」および「メインサイジング」セクションでは、次のように聞こえる仕様の一部があります。

それ以外の場合、最初の未収集アイテムから始めて、次の収集アイテムがフレックスコンテナーの内部メインサイズに初めて収まらなくなるまで、または強制ブレークが発生するまで、連続したアイテムを1つずつ収集します。収集されていない最初のアイテムが収まらない場合は、それだけをラインに集めます。 CSS2.1 page-break-before/page-break-after [CSS21]またはCSS3 break-before/break-after [CSS3-BREAK]プロパティでフラグメンテーションブレークが指定されている場合、ブレークが強制されます。

から http://www.w3.org/TR/css-flexbox-1/#main-sizing

潜在的に複数行のフレックスレイアウトをレイアウトする場合（仕様の別の部分から取得したものは1つwithoutflex-wrap: nowrap）a page-break-after: alwaysまたはbreak-after: alwaysshouldは、ブレークを発生させるか、次の行に折り返します。

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.child {
  flex-grow: 1;
}

.child.break-here {
  page-break-after: always;
  break-after: always;
}

しかし、私はこれを試しましたが、そのようには実装されていません...

  • Safari（最大7）
  • Chrome（最大43 dev）
  • Opera（最大28 dev＆12.16）
  • IE（最大11）

それは次のように（少なくとも私には）聞こえるように動作します：

  • Firefox（28以降）

http://codepen.io/morewry/pen/JoVmVj のサンプル。

バグトラッカーで他のリクエストが見つからなかったため、 https://code.google.com/p/chromium/issues/detail?id=473481 で報告しました。

しかし、このトピックはメーリングリストに取り上げられました。どのように聞こえるかにかかわらず、それは、ページネーションを推測することを除いて、明らかに彼らが意味するものではありません。そのため、フレックスの子の中に連続するフレックスレイアウトをネストしたり、特定の幅（flex-basis: 100%など）をいじったりすることなく、フレックスレイアウトの特定のボックスの前後にラップする方法はありません。

もちろん、Firefoxの実装で作業することで、この機能が非常に有用であるという疑念が確認されるため、これは非常に面倒です。垂直方向の配置が改善されていることとは別に、この不足により、多くのシナリオでフレックスレイアウトの有用性がかなりなくなります。ネストされたフレックスレイアウトで追加のラッピングタグを追加して行がラップするポイントを制御する必要があると、HTMLとCSSの両方の複雑さが増し、悲しいことに、orderが頻繁に使用できなくなります。同様に、アイテムの幅を100%に強制すると、フレックスレイアウトの「応答性」の可能性が低下するか、多くの非常に具体的なクエリまたはカウントセレクターが必要になります）。

少なくともフロートにはclearがありました。このために、ある時点で何かが追加される可能性があります。

26
morewry

子要素に最小幅を設定すると、ブレークポイントも作成されます。たとえば、3要素ごとに分割する場合、

flex-grow: 1;
min-width: 33%;

4つの要素がある場合、4番目の要素のラップが完全に100％になります。 5つの要素がある場合、4番目と5番目の要素がラップして、それぞれ50％を取ります。

親要素があることを確認してください、

flex-wrap: wrap
10
David Ortiz

動作するように見える唯一のことは、コンテナにflex-wrap: wrap;を設定することであり、それらは何らかの方法でブレークアウトしたい子を全幅に塗りつぶすので、width: 100%;は動作するはずです。

ただし、要素を100％に引き伸ばすことができない場合（たとえば、<img>の場合）、width: 50px; margin-right: calc(100% - 50px)のようにマージンを適用できます。

2
fiatjaf