【CSS】orderが効かない原因と解決方法3選
「orderを使うと要素の並び替えができるって聞いたのに並び替えできないよ!?」
orderが効かない原因と解決方法を3つ解説します。
【原因1】親要素にdisplay:flexを指定していない
orderは「display:flex」とセットで使います。
そのとき「display:flex」は親に、「order」は子要素に指定します。
失敗例(display:flexなし)
<style>
.example{
flex-direction: column;
}
.example div{
border: 1px solid #333;
padding: 10px;
background: #c2e8f8;
}
</style>
<div class="example">
<div style="order:4">order:4</div>
<div style="order:2">order:2</div>
<div style="order:5">order:5</div>
<div style="order:1">order:1</div>
<div style="order:3">order:3</div>
</div>成功例(display:flexあり)
<style>
.example{
flex-direction: column;
}
.example div{
border: 1px solid #333;
padding: 10px;
background: #c2e8f8;
}
</style>
<div style="display: flex;" class="example">
<div style="order:4">order:4</div>
<div style="order:2">order:2</div>
<div style="order:5">order:5</div>
<div style="order:1">order:1</div>
<div style="order:3">order:3</div>
</div>display:flexを指定すると横並びになってしまいます。
縦並びにする方法はこちら↓
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
【原因2】兄弟要素にorderを指定していない
orderは一つに指定すればいいのではなく、並び変えたい兄弟要素すべてに指定します。
失敗例(orderを1つだけに指定)
<style>
.example2{
display: flex;
flex-direction: column;
}
.example2 div{
border: 1px solid #333;
padding: 10px;
background: #c2e8f8;
}
</style>
<div class="example2">
<div>order:4</div>
<div>order:2</div>
<div>order:5</div>
<div style="order:1">order:1</div>
<div>order:3</div>
</div>成功例(orderをすべてに指定)
<style>
.example2{
display: flex;
flex-direction: column;
}
.example2 div{
border: 1px solid #333;
padding: 10px;
background: #c2e8f8;
}
</style>
<div class="example2">
<div style="order:4">order:4</div>
<div style="order:2">order:2</div>
<div style="order:5">order:5</div>
<div style="order:1">order:1</div>
<div style="order:3">order:3</div>
</div>orderを指定しない場合「order:0」と同じになります。
よってorderを指定していない要素は「order:1」を指定した要素より上に行きます。
なお、orderはマイナス値も指定できます。
【原因3】子要素は親要素から抜け出せない
orderで並び変えることができるのは兄弟要素だけです。
子要素を親から飛び出させて並び変える、ということはできません。
失敗例(子要素にorder指定)
<style>
.example2{
display: flex;
flex-direction: column;
}
.example2 div{
border: 1px solid #333;
padding: 10px;
background: #c2e8f8;
}
</style>
<div class="example2">
<div style="order:4">order:4</div>
<div style="order:2">order:2</div>
<div class="example2">
<div style="order:5">order:5</div>
<div style="order:3">order:3</div>
</div>
<div style="order:1">order:1</div>
</div>成功例(兄弟要素だけにorder指定)
<style>
.example2{
display: flex;
flex-direction: column;
}
.example2 div{
border: 1px solid #333;
padding: 10px;
background: #c2e8f8;
}
</style>
<div class="example2">
<div style="order:4">order:4</div>
<div style="order:2">order:2</div>
<div style="order:5">order:5</div>
<div style="order:1">order:1</div>
<div style="order:3">order:3</div>
</div>【まとめ】orderが効かない原因
【原因1】親要素にdisplay:flexを指定していない
「display:flex」を親に、「order」を子要素に指定する。
【原因2】兄弟要素にorderを指定していない
orderは並び変えたい兄弟要素すべてに指定する。
【原因3】子要素は親要素から抜け出せない
orderで並び変えることができるのは兄弟要素だけ。
以上、orderが効かない原因と解決方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
