코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS3 Flexible Box Layout</title> <style> .flexbox { background-color: dimgray; width: 400px; height: 250px; border-radius: 15px; display: -webkit-flex; display: flex; } #end { -webkit-justify-content: flex-end; justify-content: flex-end; } .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>justify-content 속성을 이용한 수평 정렬</h1> <h3>justify-content의 속성값이 flex-start입니다.</h3> <div id="start" class="flexbox"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <h3>justify-content의 속성값이 flex-end입니다.</h3> <div id="end" class="flexbox"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </body> </html>
