Flex

Flex 속성값을 알아보기 위해 박스를 생성한다.

<div class="mother">
    <div class="childeren">
    	childeren1
    </div>
    <div class="childeren">
    	childeren2
    </div>
    <div class="childeren">
    	childeren3
    </div>
</div>

.childeren {
    background-color: blueviolet;
    width: 100px;
    height: 100px;
}

 

부모 요소에 display로 flex속성을 설정하면 모든 요소가 가로 정렬된다.

flex는 부모한테 적용을 하고 자손을 컨트롤하는 것이다.

.mother {
	display: flex;
}

 

이제 이 요소들을 배치를 다양하게 해본다.

 

justify-content는 가로로 요소들을 움직인다.

flex-start, center, flex-end, space-between, space-around 등 다양한 값이 있다.

.mother {
    display: flex;
    justify-content: flex-end;
}

 

여기서 요소들을 세로로 이동시키고 싶다면 부모 요소에 높이 권한을 추가한 후 align-items로 값을 준다.

.mother {
    border: 1px solid red;

    display: flex;
    justify-content: center;

    /* 높이권한 */
    height: 100vh;
    align-items: flex-end;
}

 

flex-direction속성을 column값을 주면 가로와 세로 기준이 바뀐다.

따라서 justify-content는 가로 정렬에서 세로 정렬로 바뀌고, align-items는 세로 정렬에서 가로 정렬로 바뀐다.

.mother {
    border: 1px solid red;

    display: flex;
    justify-content: center;

    /* 높이권한 */
    height: 95vh;
    align-items: flex-end;

    /* 가로, 세로가 바뀐다 */
    flex-direction: column;
}

 

학습을 위한 사이트가 있다.

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

---

 

🔗 강의 링크

https://codingnoona.thinkific.com/