📦
【grid不要】flexの順番がPCとスマホで違う時の対処法
PCのときは画像の横に説明がある、スマホのときは画像の上にテキストを持ってきたい!ということはありませんか?
【PC】
【スマホ】
しかし、画像の横の説明はすでに別のdivで囲ってしまった…タイトルが画像の上に出てくるのは無理なのでは…と思いますよね。
display: contents;
を使えば、この悩みは解決できます。
grid不要で、とても簡単にできるので内容を紹介します。
display: contents;
順番を変えたいアイテムの親に結論のコードです。
<div class="l-container">
<div class="box-wrap">
<div class="box-item-image">
<img src="https://placehold.jp/300x300.png" alt="">
</div>
<div class="box-list">
<div class="box-item box-item-title">
<h2 class="c-title-level2">タイトル</h2>
</div>
<div class="box-item box-item-text">
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="box-item box-item-button">
<a href="#" class="c-button">続きを見る</a>
</div>
</div>
</div>
</div>
.l-container {
max-width: 960px;
margin: 100px auto;
}
.box-wrap{
background-color: #f5f5f5;
padding: 30px;
display: flex;
flex-direction: row;
align-items: center;
}
@media screen and (max-width: 767px) {
.box-wrap{
flex-direction: column;
}
}
.box-list{
padding: 15px;
margin-left: 30px;
}
@media screen and (max-width: 767px) {
.box-list{
display: contents;
}
}
@media screen and (max-width: 767px) {
.box-item{
width: 100%;
}
}
.box-item-title{
margin: 15px 0;
}
@media screen and (max-width: 767px) {
.box-item-title{
order: 1;
margin-bottom: 30px;
}
.box-item-image{
order: 2;
margin-bottom: 15px;
}
.box-item-text{
order: 3;
margin-bottom: 10px;
}
.box-item-button{
order: 4;
}
}
.box-item-text{
margin-bottom: 40px;
}
.c-title-level2{
font-size: 2rem;
font-weight: bold;
border-left: solid 5px skyblue;
display: inline-block;
padding-left: 20px
}
.c-button {
display: inline-block;
width: 100%;
max-width: 350px;
color: #454545;
background: skyblue; /* 背景色 */
padding: 1em 2em;
font-weight: bold;
text-decoration: none;
text-align: center;
border-radius: 100px;
}
親のdivが消えて、タイトルやテキストの兄弟要素になる
タイトルやテキストを囲っているbox-list
にdisplay: contents;
をすると、box-list
のdivは消えます。
枠が消えたので、以下のアイテムはbox-list
の親であるbox-wrap
の兄弟要素になります。
-
box-item-title
(タイトル) -
box-item-text
(テキスト) -
box-item-button
(ボタン)
これらのアイテムが兄弟要素になることで、flexアイテムの順番を切り替えるorder
が使えるようになりました!
あとはbox-item-title
にorder: 1;
をあてて、画像の入っているbox-item-image
にorder: 2;
をあてて…順番通りにcssを書いたら完成です。
Discussion