코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS3 Flexible Box Layout</title> <style> .flexbox { background-color: dimgray; width: 400px; height: 150px; border-radius: 15px; display: -webkit-flex; display: flex; } #row_reverse { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } .item { background-color: darkgray; border-radius: 10px; width: 80px; height: 50px; margin: 10px; color: white; font-size: 26px; text-align: center; line-height: 50px; } </style> </head> <body> <h1>flex-direction 속성을 이용한 row 방향 배치</h1> <h3>flex-direction의 속성값이 row입니다.</h3> <div id="row" class="flexbox"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <h3>flex-direction의 속성값이 row-reverse입니다.</h3> <div id="row_reverse" class="flexbox"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </body> </html>
