아이템 배치하기

# 아이템 배치하기 ## 미션 flex를 사용하여 아래와 같은 페이지를 만드시오. ![클라우드스터딩-flex-box-주요-속성-연습](https://i.imgur.com/JyGBjBZ.png) ## 개념 #### ⭐️ Flexbox의 구성 요소 정렬 및 배치를 위한 문법. 바로 flex다. flex 박스는 두 가지 요소, 컨테이너와 아이템으로 구성된다. #### ⭐️ 컨테이너 주요 속성들 - flex-direction - 주축 설정 - flex-wrap - 아이템 라인 설정 - justify-content - 주축 정렬 - align-items - 교차축 정렬(nowrap) - align-content - 교차축 정렬(wrap) #### ⭐️ 아이템 주요 속성들 - flex - 주축 비율 설정 - order - 순서 설정 ## 구글링 키워드 - CSS flex 사용법 - CSS flex 속성들

by sehongpark

코드: java 1.8

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Flex 박스 연습!</title> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>Flex 박스</h1> <h2>무엇?</h2> <p>정렬 및 배치를 위한 도구</p> <h2>핵심 속성?</h2> <ul> <li>컨테이너: justify-content, align-items, flex-flow</li> <li>아이템: flex, order</li> </ul> <h2>사용법?</h2> <div class="flex-container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div>  </div> </body> </html>

입력

정답이 궁금하다면? 코드를 제출해보세요!