[ CSS: flex ] flex로 nav 생성하기

우리는 화면에서 아이템을 배치할때 수직구조/수평구조로 레이아웃을 잡곤한다.
간단한 것들은 padding, margin을 사용했지만 flex요소를 사용해서 더 쉽고 간결하게 사용할 수 있다.

Flex의 container / items

flex에서 container, items 2개의 개념으로 구조가 나뉜다.
container는 items를 감싸므로 부모요소이고, items를 자식요소로한다.
이렇게 flex는 container와 items로 나눠지는데 적용하는 속성 또한 구분되어있다.

• container: display, flex-direction, justify-content , align-items
• items: order, flex, align-self

Flex의 flex-direction (row/column)

• 수평(주축): flex-direction: row;
• 수직(교차축): flex-direction: column;

container 자주사용하는 속성

• display
• flex-direction
• justify-content
• align-items

.main_container {
	display:flex;
    flex-direction: row;
    justify-content: space-between;
    padding:0 20px 0 20px;
}
.title_name {
	font-size: 30px;
}
.
.nav_menu {
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    font-family: inherit;
    color: white;
}

참고자료

https://heropy.blog/2018/11/24/css-flexible-box/