いつも回答くださる方、ありがとうございます。
Flexを使った要素の並べ方がいまいちよくわかりません。
メインコンテンツを左に自己紹介、自己紹介の下にSNSアイコン、右に画像を配置し、その下部にインスタグラムのリンクが貼ってあるデザインなのですが、なかなか綺麗に並べることができません。
左下のSNSのアイコンを入れずになら綺麗に左右・下部と並べることができたのですが、アイコンを入れた途端にこのようなかんじで崩れてしまいます。
flexを使うことはわかっているのですが、どう使えばいいのかがわかりません。
何卒よろしくお願い致します。
HTML
1 <div class="about-bottom"> 2 <div class="profile"> 3 <h2>自己紹介</h2> 4 <h3>自己紹介</h3> 5 <p>自己紹介ああああああああああ</p> 6 </div> 7 <ul class="snsbtniti"> 8 <div class="twitter-icon"> 9 <li> 10 <a href="https://twitter.com/" class="flowbtn7 fl_tw7"> 11 <i class="fab fa-twitter"> 12 </i> 13 </a> 14 </li> 15 </div> 16 17 <li> 18 <a href="https://www.instagram.com//" class="flowbtn7 insta_btn7"> 19 <i class="fab fa-instagram"> 20 </i> 21 </a> 22 </li> 23 </ul> 24 25 26 27 28 <img src="../IMG_prof.jpg" class="prof-pic" height="360px" width="380px"> 29 </div> 30 </div> 31 32 33 34 35 <!-- インスタグラム --> 36 <div class="instagram"> 37 <h2>instagram</h2> 38 <div class="instagram-contents"> 39 <!-- インスタ1つ目 --> 40 <div class="insta1"> 41 <div class="insta-tag"> 42 <p>#セブ島カフェ</p> 43 </div> 44 45 <div class="insta-pic"> 46 <a href="https://www.instagram.com/explore/tags/%E3%82%BB%E3%83%96%E5%B3%B6%E3%82%AB%E3%83%95%E3%82%A7/?hl=ja"> 47 <img src="../セブ島カフェ.jpg" height="194px" width="274px"> 48 </a> 49 </div> 50 </div> 51 52 <!-- インスタ2つ目 --> 53 <div class="insta2"> 54 <div class="insta-tag2"> 55 <p>#cebucafe</p> 56 </div> 57 58 <div class="insta-pic2"> 59 <a href="https://www.instagram.com/explore/tags/cebucafe/?hl=ja"> 60 <img src="../cebucafe.jpg" height="194px" width="274px"> 61 </a> 62 </div> 63 </div> 64 65 <!-- インスタ3つ目 --> 66 <div class="insta3"> 67 <div class="insta-tag3"> 68 <div class="tagname3"> 69 <p>#cebucoffee</p> 70 </div> 71 </div> 72 73 <div class="insta-pic3"> 74 <a href="https://www.instagram.com/explore/tags/cebucoffee/?hl=ja"> 75 <img src="../フィリピンカフェ.jpg" height="194px" width="274px"> 76 </a> 77 </div> 78 79 </div> 80 81 <!--▼ インスタコンテンツ閉じタグ ▼ --> 82 </div> 83 84 <!-- ▼ instagram 閉じタグ ▼ --> 85 </div>
CSS
1 2.about-bottom{ 3margin:75px 0; 4color:#373a36; 5 flex-wrap: wrap; 6 7 8/* position: absolute; */ 9 10} 11 12.profile{ 13 float:left; 14 width:540px; 15 height:340px; 16 margin-left:145px; 17 18} 19 20.about-bottom h2{ 21 font-family:"Raleway"; 22 font-weight: lighter; 23 font-size:40px; 24} 25.about-bottom h3{ 26 font-weight: lighter; 27 margin:0; 28} 29 30.about-bottom p{ 31 font-size:16px; 32 font-family:"Hiragino Kaku Gothic Pro"; 33 font-weight:lighter; 34} 35 36.prof-pic { 37 float:right; 38 margin-top:60px; 39 margin-right:145px; 40} 41 42 43 /* ボタン全体 */ 44 .flowbtn7{ 45 border-radius:50%; 46 position:relative; 47 display:inline-block; 48 width:62px; 49 height:62px; 50 font-size:30px; 51 color:#fff!important; 52 text-decoration:none; 53 transition:.5s; 54 } 55 56 /* ボタン全体の位置 */ 57 .snsbtniti{ 58 59 /* text-align: center; */ 60 /* flex-flow:row wrap; 61 justify-content:space-around; */ 62 margin:0 auto; 63 } 64 /* 65 .snsbtniti ul{ 66 text-align: center; 67 68 } */ 69 70 .twitter-icon{ 71 margin-right:14px; 72 } 73 74 75 76 /* ボタンにマウスを乗せた時 */ 77 .flowbtn7:hover{ 78 -webkit-transform:translateY(-5px); 79 -ms-transform:translateY(-5px); 80 transform:translateY(-5px); 81 } 82 83 /* アイコンをど真ん中に*/ 84 .flowbtn7 i{ 85 position:absolute; 86 top:50%; 87 left:50%; 88 -ms-transform:translate(-50%,-50%); 89 -webkit-transform:translate(-50%,-50%); 90 transform:translate(-50%,-50%); 91 } 92 93 94 /* Twitter */ 95 .fl_tw7{ 96 background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%); 97 } 98 99 /* Instagram紫グラデ背景 */ 100 .insta_btn7{ 101 background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; 102 background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; 103 overflow:hidden; 104 } 105 /* Instagramオレンジグラデ背景 */ 106 .insta_btn7:before{ 107 content: ''; 108 position:absolute; 109 top:27px; 110 left:-12px; 111 width:59px; 112 height:40px; 113 background:-webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); 114 background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); 115 } 116 117 /* ▼ ここからインスタコンテンツ ▼ */ 118 119 .instagram{ 120 /* display: flex; */ 121 background-color:#d2e4ef; 122 height:598px; 123 124 125} 126/* .instagram p{ 127 margin-top:11px; 128} */ 129 130.instagram-contents{ 131 display: flex; 132 justify-content: space-around; 133 margin:0 100px; 134} 135 136.instagram p{ 137 margin:0; 138} 139 140 141 142 143.instagram h2{ 144 font-family:'Raleway'; 145 font-size:28px; 146 color:#6c6c6c; 147 text-align: center; 148 position: relative; 149 margin-bottom: 20px; 150 padding-top:80px; 151 margin-bottom:80px; 152 /* // 縦に積む */ 153 display: flex; 154 flex-direction: column; 155 flex-wrap: wrap; 156 /* // 中央寄せ */ 157 justify-content: center; 158 align-items: center; 159} 160 161/*以下で線を表示*/ 162.instagram h2:before { 163 content: ''; 164 position: absolute; 165 left: 50%; 166 bottom: -15px;/*線の上下位置*/ 167 168 width: 108px;/*線の長さ*/ 169 height: 1px;/*線の太さ*/ 170 -webkit-transform: translateX(-50%); 171 transform: translateX(-50%);/*位置調整*/ 172 background-color:#6c6c6c;/*線の色*/ 173 /* // 縦に積む */ 174 display: flex; 175 flex-direction:column; 176 flex-wrap:wrap; 177 /* // 中央寄せ */ 178 justify-content:center; 179 align-items: center 180 } 181 182 .instagram-contents a:hover { 183 position: relative; 184 top: 2px; 185 left: 2px; 186 opacity: .5; 187 } 188 .instagram-contents a{ 189 opacity: 1; 190 transition: 0.3s; 191 } 192 193 194 195 /* ▼ インスタ1つ目 ▼ */ 196 197.insta1{ 198 width:330px; 199 height:315px; 200 background-color: white; 201 /* margin-left:127px; */ 202 margin-right:15px; 203} 204 205.insta-tag{ 206 color: black; 207 font-size:14px; 208 background-color: #faf7d1; 209 width:fit-content; 210 height:fit-content; 211 border-radius: 20px; 212 margin-top:25px; 213 margin-bottom:22px; 214 margin-left:28px; 215 padding: 10px 60px; 216} 217 218.insta-pic{ 219 margin-top:14px; 220 margin-left:28px; 221 margin-right:28px; 222} 223 224 225 226 227 228/* ▼ インスタ2つ目 ▼ */ 229.insta2{ 230 width:330px; 231 height:315px; 232 background-color: white; 233 margin-right:15px; 234 } 235 236 .insta-tag2{ 237 color: black; 238 font-size:14px; 239 background-color: #faf7d1; 240 width:fit-content; 241 height:fit-content; 242 border-radius: 20px; 243 margin-top:25px; 244 margin-bottom:22px; 245 margin-left:28px; 246 padding: 10px 60px; 247 248} 249 250.insta-pic2{ 251 margin-top:14px; 252 margin-left:28px; 253 margin-right:28px; 254} 255 256 257 258 259 260 261/* ▼ インスタ3つ目 ▼ */ 262.insta3{ 263 width:330px; 264 height:315px; 265 background-color: white; 266 } 267 268 .insta-tag3{ 269 color: black; 270 font-size:14px; 271 background-color: #faf7d1; 272 width:fit-content; 273 height:fit-content; 274 border-radius: 20px; 275 margin-top:25px; 276 margin-bottom:22px; 277 margin-left:28px; 278 padding: 10px 60px; 279} 280 281 282 283 284.insta-pic3{ 285 margin-top:14px; 286 margin-left:28px; 287 margin-right:28px; 288} 289
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/17 14:58
2019/08/17 15:05
2019/08/17 15:08