Flexbox의 기본과 정의

See the Pen Flexbox 정의 by nilgi (@nilgi) on CodePen.

 

Flexbox는 콘텐츠(아이템)의 위치를 지정하지 않아도 반응형 레이아웃을 쉽게 만들수 있게 한다.
Flexbox는 Flex컨테이너 안에 Flex아이템을 나열한다.

 

.flex-container {
        background: #333;
        padding: 5px;
        display: flex; /* html에 flex-container div안에 4개의 div가 있다. div의 기본 성질은 block구조로 세로로 쌓으나 display: flex;를 쓰면 마치 inline-block처럼 나열 된다. */
    }

.flex-container > div { /* 선택 요소안에 있는 div만 선택 */
        background: tomato;
        border-radius: 50%;
        padding: 10px;
        margin: 5px;
        color: #fff;
        font-size: 20px;
}