display: flexで非表示にする方法

Question

実現したいこと

• display: flexの要素をデフォルトでは非表示にしたい

前提

display: fllexでflex-box指定している要素があります。
その要素を状況に応じて表示/非表示を切り替えたいです。

発生している問題・エラーメッセージ

display: noneを指定することはできないので、どのように表示非表示を切り替えるべきか悩んでいます

該当のソースコード

.sanpleClass {
    display: flex;
}

補足情報（FW/ツールのバージョンなど）

jquery: 3.6.1
scss

Comments

[maisumakun]

> display: noneを指定することはできないので

なぜできないのでしょうか？

[yambejp]

> なぜできないのでしょうか？

display:flexしている要素を隠したいということでは？

Answer 1

display: flex だからと言って特別なことはありません。非表示にしたい間は display: none にすればよいです。

.hidden {
  display: none;
}

というスタイルを用意しておいて hidden クラスを付け外しするなど。

Answer 2

• 適当にラップしてそのコンテナを非表示にするか
• sampleClassの包含された要素にdisplay:noneを設定する
• sampleClass要素をposition:absoluteにしてtop位置を調整して画面外にとばす

などが考えられます

sample

<style>
.sampleClass {
    display: flex;
}
.box {
  background-Color:lightgray;
width:100px;
height:100px;
}

.wrap{
display:none;
}
.getout{
position:absolute;
top:-999px;
}
.hideelement *{
display:none;
}
</style>

<fieldset>
<legend>(1)ラップして隠す</legend>
test
<div class="wrap">
<div class="sampleClass">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</div>
test
</fieldset>
<fieldset>
<legend>(2)エリア外に飛ばす</legend>
test
<div class="wrap">
<div class="sampleClass getout">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</div>
test
</fieldset>
<fieldset>
<legend>(3)中身を隠す</legend>
test
<div class="sampleClass hideelement">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</div>
test
</fieldset>
<hr>