1. 항목으로 컨테이너 만들기

HTML

<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
</div>

CSS

.container{
    width: 720px;
    height: 480px;
    background-color: blue;
}

.item{
    font-size: 18px;
    text-align: center;
    padding: 5px 10px;
    border: 1px solid green;
    background-color: orange;
}

2. 컨테이너에 Flex Box 적용

.container{
    display: flex; /* flex box applied here */
    width: 720px;
    height: 480px;
    background-color: blue;
}

3. Flex-Direction 추가

이제 컨테이너에 'flex-direction' 속성을 추가하고 다음 값 중 하나를 할당할 수 있습니다.
flex-direction: row; - 항목을 왼쪽에서 오른쪽으로 가로로 정렬합니다.


flex-direction: column; - 항목을 위에서 아래로 세로로 정렬합니다.


flex-direction: row-reverse; - 항목을 오른쪽에서 왼쪽으로 가로로 정렬합니다.`

flex-direction: column-reverse; - 항목을 세로로 아래에서 위로 정렬합니다.

4. Justify-Content 추가

다음 값 중 하나와 결합된 'justify-content' 속성을 사용하여 컨테이너의 기본 축을 따라 다른 위치에 항목을 배치할 수 있습니다.
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

5. 정렬 항목 추가

다음 값 중 하나와 결합된 'align-items' 속성을 사용하여 컨테이너의 교차 축을 따라 다른 위치에 항목을 배치할 수 있습니다.
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: strech;

우리 기술은 @Doge Algo에서 작동합니다.