online Editor
flex-direction | Flexible Box - CSSリファレンス
flex-direction - CSS3のflex-directionを使ったサンプルです。
<!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; -webkit-flex-direction : row-reverse; flex-direction : row-reverse; padding:2px; background: black; } .flex-item{ width:100px; background: red; color:white; padding:10px; } .flex-item:nth-child(2n){ background: blue; } </style> </head> <body> <div class="flex"> <div class="flex-item">item1<br>item1</div> <div class="flex-item">item2<br>item2<br>item2</div> <div class="flex-item">item3</div> <div class="flex-item">item4</div> <div class="flex-item">item5</div> </div> </body> </html>
HTMLを反映する >>
タグ:
CSS3
Flexible Box
Web Creative Park