web-dev-qa-db-ja.com

可視性：非表示と可視性：フレックスボックスの折りたたみの違いは何ですか？

CSSフレキシブルボックスレイアウトモジュール では、次のように述べています。

折りたたまれたフレックスアイテムはレンダリングから完全に削除されますが、「支柱」が残ります

visibility: hiddenと同じように動作しますか？答えが「はい」の場合、なぜvisibility: collapseが導入されたのですか？

cssflexboxlanguage-lawyerspecifications
9
everywill

ブラウザサポートに関する注意：Chrome 59はvisibility: collapseをサポートしていないようです2017年7月12日現在。collapseを含む以下のコードサンプルはChrome（hiddenと同じように動作します）で失敗しますが、FirefoxおよびEdgeで動作します。

Flexアイテムは、flex-directionに応じて、行または列に配置されます。

各行/列は フレックスライン と見なされます。

以下の例では、フレックスコンテナーの行方向に4つのフレックスアイテムがあります。 4番目のアイテムが折り返され、2番目のフレックスラインが作成されます。

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
</div>

display: none

display: noneを使用すると、フレックスアイテムはブラウザーによってレンダリングされません。

Flexラインのすべてのアイテムにdisplay: noneがある場合、ラインも折りたたまれ、それが残りのレイアウトに影響します。フレックスラインが折りたたまれると、周囲の要素がシフトする場合があります。

display: noneを3番目のアイテムに適用すると、4番目のアイテムが上の行に配置され、下の行が折りたたまれます。

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box3 { display: none; }
<code>display: none</code>
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
</div>

visibility: hidden

visibility: hiddenを使用すると、フレックスアイテムはブラウザーによってレンダリングされますが、完全に透明です。表示されませんが、レイアウトで通常使用するスペースを占有します。したがって、周囲の要素はこのアイテムを完全に無傷であると見なします。

この例では、最後の2つのボックスにvisibility: hiddenがある場合、残りのレイアウト（2番目のフレックスラインを含む）は変更されません。

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box3 { visibility: hidden; }
.box4 { visibility: hidden; }
<code>visibility: hidden</code>
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
</div>

visibility: collapse

visibility: collapseを使用すると、フレックスアイテムはレンダリングされません（display: noneと同じ）が、フレックスアルゴリズムはアイテムのクロスサイズをチェックし、そのデータを使用してフレックスラインを安定させます（つまり、ラインのクロスサイズはflexアイテムはvisible）でした。

display: noneとの違いは、collapseを使用すると、アイテムの1つのピース（クロスサイズ）を保持できることです。これは、仕様ではstrutと呼ばれています。

したがって、ライン上のすべてのflexアイテムにvisibility: collapseがある場合、ラインのクロスサイズ（幅または高さ）は折りたたまれず、レイアウトの残りの部分は影響を受ける。

collapseはラインのクロスサイズの安定性を保証しますが、ラインのメインサイズは保証されないことに注意してください。これがcollapseとhiddenの主な違いです。

以下にいくつかの例を示します。 （上記のとおり、これらはChromeでは機能しません。FFまたはEdgeでテストしてください。）

この例では、最初の2つの項目にはvisibility: collapseがあります。

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box1, .box2 {
  visibility: collapse;
}
<code>visibility: collapse</code>
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
</div>

レイアウトはdisplay: noneのようにレンダリングされます。アイテムのメインサイズがなくなったため、2行目が折りたたまれ、最後のアイテムが自然に上に移動できるようになりました。

次の例では、すべてのアイテムがvisibility: collapseを取得します。したがって、アイテムのメインサイズがなくなったため、2行目は折りたたまれますが、1行目のクロスサイズは残ります。

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  visibility: collapse;
}
<code>visibility: collapse</code>
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
</div>

jsFiddle

17
Michael_B

実際には要素によって異なります。テーブルのサブ要素で使用する場合、collapseは要素とその要素が占めるスペースを非表示にします。

collapseは、テーブルのサブ要素ではない要素で使用すると、hiddenのように動作します

0
Digedu