レスポンシブ実装時にflexが効かなくなる。 現在webデザインを思い出し中の者です。 PC版ではうまく効いているdisplay: flex;が レスポンシブになると効かなくなってしまい困っています。 【html】 <div id="content_work"> <div class="work_parts"><img src=""></div> <p>練習で作ったものたち</p> <div class="practice"> <div class="plac_item"><img src=""></div> <div class="plac_item"><img src=""></div> </div> <div class="work_parts"><img src=""></div> <p>同人で作ったものたち</p> <div class="practice"> <div class="plac_item"><img src=""></div> <div class="plac_item"><img src=""></div> <div class="plac_item"><img src=""></div> </div> </div> 【CSS】 ----PC版------ #content_work{ margin: auto; width: 1500px; display: flex; flex-direction: column; } #content_work p{ font-size: 20px; border-top: #A3A3A3 solid 1px; border-bottom: #A3A3A3 solid 1px; margin-top: 10px; } .practice{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;} .work_parts img{ margin-top: 5px; width: 300px; } .practice img{ width: 200px; margin-right: 5px; margin-top: 10px; } ----レスポンシブ------ #content_work{ width: 100%; display: flex; flex-direction: column; } 横並びで配置した画像を縦並びにしたいだけなので、 以上のソースコードでいくと思ったのですが、 現在画像が2列の縦並びになっています。 というかドリームウィーバーの分割ウィンドウでやってるんですが、 挙動？がおかしいんですが、ほかの皆さんもそうなんでしょうか？ コードを直しても分割ウィンドウのデザインの部分に反映されず、 コードが間違っていたのかと思うと、一度ソフトを落として、 ファイルを開き直すと反映されていたりします。 ていうかドリームウィーバー、2021年から更新されていない…？ もしかして…ドリームウィーバー君…死ぬのか…？
