online Editor
order | Flexible Box - CSSリファレンス
order - CSS3のorderを使ったサンプルです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>_</title> <style> .flex{ display : -webkit-box; display : -ms-flexbox; display : -webkit-flex; display : flex; padding:2px; background: black; } .flex-item{ width:100px; background: red; color:white; padding:10px; } .flex-item:nth-child(2n){ background: blue; } .flex-item1{ order:3; } .flex-item2{ order:1; } .flex-item3{ order:2; } </style> </head> <body> <div class="flex"> <div class="flex-item flex-item1">1</div> <div class="flex-item flex-item2">2</div> <div class="flex-item flex-item3">3</div> </div> </body> </html>
HTMLを反映する >>
タグ:
CSS
CSS3
Flexible Box
order
Web Creative Park