Q&A
yambejpさん
ご回答ありがとうございます！
問題なのは、ボックスタイトル1を押した時に、ボックスタイトル2と4との間に大きな空間ができてしまうことなんですよね、、、（画像の通りです）
この間を維持させたいです。
###問題点・解決したいこと
flexbox で要素の高さを揃えない様にしたいです。
画像の様に、緑色の要素があるかと思いますが、jQueryでtoggle機能を付与しているのですが、
緑色の要素を押すと、その下にいくつかボックスが現れます。
その時に緑色の横の要素（例えば、ボックスタイトル1の横の要素はボックスタイトル2）とその下（ボックスタイトル4）との高さ間の大きさが大きくなってしまいます。
実現したいこととしては、緑色の要素を押すと、右側の要素間（ボックスタイトル2と4）の大きさはそのままでいてほしいです。
###現状の状態
toggle前の状態
toggle後の状態
###コード
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="index.css"> 7 <title>Document</title> 8</head> 9<body> 10 <div class="container"> 11 <div class="boxes"> 12 <div class="content"> 13 <div class="title"> 14 <div class="txt"> 15 <p>ボックスタイトル1</p> 16 </div> 17 </div> 18 <div class="test_block"> 19 <div class="test_container"> 20 <div class="test"> 21 <p>test1</p> 22 </div> 23 <div class="test"> 24 <p>test2</p> 25 </div> 26 <div class="test"> 27 <p>test3</p> 28 </div> 29 <div class="test"> 30 <p>test4</p> 31 </div> 32 </div> 33 </div> 34 </div> 35 <div class="content"> 36 <div class="title"> 37 <div class="txt"> 38 <p>ボックスタイトル2</p> 39 </div> 40 </div> 41 <div class="test_block"> 42 <div class="test_container"> 43 <div class="test"> 44 <p>test1</p> 45 </div> 46 <div class="test"> 47 <p>test2</p> 48 </div> 49 <div class="test"> 50 <p>test3</p> 51 </div> 52 <div class="test"> 53 <p>test4</p> 54 </div> 55 </div> 56 </div> 57 </div> 58 <div class="content"> 59 <div class="title"> 60 <div class="txt"> 61 <p>ボックスタイトル3</p> 62 </div> 63 </div> 64 <div class="test_block"> 65 <div class="test_container"> 66 <div class="test"> 67 <p>test1</p> 68 </div> 69 <div class="test"> 70 <p>test2</p> 71 </div> 72 <div class="test"> 73 <p>test3</p> 74 </div> 75 <div class="test"> 76 <p>test4</p> 77 </div> 78 </div> 79 </div> 80 </div> 81 <div class="content"> 82 <div class="title"> 83 <div class="txt"> 84 <p>ボックスタイトル4</p> 85 </div> 86 </div> 87 <div class="test_block"> 88 <div class="test_container"> 89 <div class="test"> 90 <p>test1</p> 91 </div> 92 <div class="test"> 93 <p>test2</p> 94 </div> 95 <div class="test"> 96 <p>test3</p> 97 </div> 98 <div class="test"> 99 <p>test4</p> 100 </div> 101 </div> 102 </div> 103 </div> 104 </div> 105 </div> 106 <script 107 src="https://code.jquery.com/jquery-1.12.4.min.js" 108 integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 109 crossorigin="anonymous"></script> 110 <script> 111 $(function(){ 112 $(".title").on("click", function() { 113 $(this).next().slideToggle(); 114 }); 115 }); 116 </script> 117</body> 118 119</html>
css
1* { 2 box-sizing: border-box; 3} 4.container { 5 background-color: rgb(182, 210, 253); 6 height: 100vh; 7} 8.container .boxes { 9 width: 900px; 10 margin: 0 auto; 11 padding: 3rem 0; 12 display: flex; 13 flex-wrap: wrap; 14 justify-content: space-between; 15 align-items: flex-start 16} 17 18.container .boxes .content { 19 width: 40%; 20 background-color: rgb(187, 247, 172); 21 margin-bottom: 1rem; 22} 23.container .boxes .content .title{ 24 cursor: pointer; 25 padding: 0.43rem 1rem 0.43rem 0.5rem; 26 padding-bottom: 0.43rem; 27 border-bottom: 1px solid #383838; 28} 29.container .boxes .content .test_block { 30 display: none; 31} 32.container .boxes .content .test_block .test_container{ 33 display: flex; 34 flex-direction: row; 35 flex-wrap: wrap; 36 background-color: #FDFDFD; 37 border-bottom: 1px solid #e7e7e7; 38} 39.container .boxes .content .test_block .test_container .test{ 40 width: 50%; 41 padding: 13px 18px 13px 16px; 42 border-top: 1px solid #e7e7e7; 43 border-left: 1px solid #e7e7e7; 44}
###やってみたこと
左列の緑色の要素（ボックスタイトル1と3）をくくる要素を付加（例えば、left-container）し、
右列の緑色の要素（ボックスタイトル2と4）をくくる要素を付加（例えば、right-container）して
実装すれば、実現することができますが、仕様の関係上、各列をくくる要素を付加せずにしなければなりません。
###付与
jQueryを使ってstyleにbreak-before: column;と書く様にしました。
その場合、リロードして、
最初にボックスタイトル2をタップすると、画像①のようになり、
最初はボックスタイトル4や3をタップした後にボックスタイトル2を押すと画像②のようにうまく行きます。
なぜなんでしょうか。
画像①
画像②
回答2件
0
ベストアンサー
段組みレイアウトを使えばできないことはないです。
段組みレイアウトの使用 - CSS: カスケーディングスタイルシート | MDN
css
1.container .boxes { 2 width: 900px; 3 margin: 0 auto; 4 padding: 3rem 0; 5 columns: 2; 6 column-fill: auto; 7} 8.container .boxes .content:nth-child(3) { 9 break-before: column; 10} 11 12.container .boxes .content { 13 width: 80%; 14 background-color: rgb(187, 247, 172); 15 margin-bottom: 1rem; 16}
ただし、並び順が下記のように変わります。
ボックス1 ボックス3
ボックス2 ボックス4
投稿2021/01/08 04:52
編集2021/01/08 04:53
総合スコア34073
0
contentに色を付けずにcontentのtitileに色をつければいいのでは？
CSS
1.container .boxes .content { 2 width: 40%; 3 margin-bottom: 1rem; 4} 5.container .boxes .content .title{ 6 background-color: rgb(187, 247, 172); 7}
投稿2021/01/08 01:51
総合スコア116694
なるほど、間を開けたくないのですね
それなら縦方向にグルーピングして
flexboxをやめるのが妥当だと思いますが
yambejpさん
それもすでに試しているのですが、仕様上、縦方向のグルーピングをやると別の問題も発生してしまうので、避けたいんですよね、、、
absoluteかなにかでガシガシやればできないことはないと思いますが
今風の処理ではないですね。
相対的な関係をつかった処理では難しいと思います
承知いたしました。
そうですよね、相対的な関係を使う処理では難しいですよね。
ほぼできない、ということがわかっただけでも収穫です！
縦方向のグルーピング時に発生する別の問題の方を解決する方針に転換します！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/08 05:21
2021/01/08 07:47
2021/01/08 07:56
2021/01/08 08:10
2021/01/08 08:11
2021/01/09 09:31