css. FlexBox (display: flex) - (下)

FlexBox

 

css. FlexBox (display: flex) - (上)

 

 

 

💡 key points

 

dispaly: flex 선언

가로정렬? 세로정렬? (flex-direction)

무조건 한줄안에 다 정렬? (flex-wrap)

아이템 정렬(align-items, justify-contents)

 

 

 

 

---

flex를 하면 두개의 축이 자동으로 생김. (눈에 보이지는 x)

flex-direction이 무엇이냐에 따라서 축의 위치가 달라진다.

 

 

 

flex-direction에 따라 main 축이 생기고, (default, 즉 row일땐 좌우로)

main축의 수직으로 cross축이 생긴다.

 

 

main axis를 기준으로 정렬하려면, justify-content

cross axis를 기준으로 정렬하려면, align-items(혹은 align-content)

 

 

CSS3 - flex (positioning)

 

📌  jusify-content 

- main axis 기준으로 정렬

flex-start	아이템을 한 덩어리로 묶어, 수평방향 시작 점에 위치시킴
flex-enter	아이템을 한 덩어리로 묶어, 수평방향의 끝 점에 위치시킴
center	아이템을 한 덩어리로 묶어, 수평방향의 중앙에 위치시킴
space-between	아이템을 컨테이너의 양쪽 끝에 맞춰 정렬
space-around	컨테이너의 양쪽 끝을 기준으로 각 아이템의 전, 후에 일정한 간격의 공간을 만들어 정렬

 

space-between	🟥	d	🟥	d	🟥
space-around	d	🟥	2d	🟥	2d	🟥	d
space-evenly	d	🟥	d	🟥	d	🟥	d

 

📌  align-items

- cross axis 기준으로 정렬

flex-start	아이템을 한 덩어리로 묶어, 수직방향의 시작 점에 위치
flex-enter	아이템을 한 덩어리로 묶어, 수직방향의 끝 점에 위치
center	아이템을 한 덩어리로 묶어, 수직방향의 중앙에 위치
baseline	아이템을 컨테이너의 baseline에 맞춰 정렬
stretch	컨테이너의 양쪽 끝을 기준으로 각 아이템의 전, 후에 일정한 간격의 공간을 만들어 정렬

 

 

 

+)

📌  align-content

- flex-wrap을 wrap으로 설정해야 의미있음! (여러줄로)

 

 

flex-wrap이 wrap을 사용하는 순간

flex-line이 두개 생기게 됨. (각 줄마다)

 

각각의 flex-line에 흐르는 cross axis를 기준으로 정렬하므로

아래와 같이 이상한 공백이 생긴것처럼 보인다.

 

flex-wrap: wrap 설정시

 

사실은 공백이 생긴게 아니라 flex-line이 두개여서 이렇게 보이는것.

 

flex-wrap을 wrap으로 했을 때, 각 flex-line을 기준으로 하지 않고

content 전체를 기준으로 정렬하고 싶을때 사용하는 것이 바로

align-content 이다!

 

❕❕

align-items와 마찬가지로 center, flex-start, flex-end 등의 값 사용 가능.

추가로, wrap을 해서 두 줄이 된 것이므로, justify content에서 썼던 값인

align-content: space-around, space-between, space-evenly도 사용 가능.

 

 

 

align-items - CSS: Cascading Style Sheets | MDN

 

 

👍 tip

선 align-items
(해보고 뭔가 이상하면)
후 align-content

 

 

---

 

💡 order 속성

 

 

- flex 사용시 마크업과 상관 없이 css 적용 순서 바꿔도 된다!

- order값을 줘서 순서를 바꿀 수 있음.

 

.flex-container {
   display: flex;
   flex-direction: row;
}

.child1 {
   order: 2
}

.child2 {
   order: 1
}

.child3 {
   order: 3
}

order CSS 속성은 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정합니다.
컨테이너 아이템의 정렬 순서는 오름차순 order 값이고, 같은 값일 경우 소스 코드의 순서대로 정렬됩니다.

 

 

 

 

---

 

ref.

 

flex - CSS: Cascading Style Sheets | MDN

 

+) reference lecture

김버그의 HTML&CSS는 재밌다 - 구름EDU