[HTML/CSS] 컴알못의 도전기 14일차

 

 

 

 

 

flex 레이아웃

(display flex를 활용한 레이아웃, 요소들을 추가하거나 모으거나~)

 

flex 레이아웃

text-align을 통해 내부 태그를 가운데 정렬(가로) 할 수 있었는데 세로로 가운데 정렬하려면?

 

비추천 방법)) float, display를 table cell (표의 셀로 변환하여 가운데 정렬) 

 

 

 

🎉 display flex를 활용 : 가운데 정렬된 요소를 자신의 중심으로 오도록 함.

 

flex item: flex 안에 있는 것

flex container: flex item을 포함, display는 무조건 flex

 

 

 

div 태그 x3를 출력하면 inline처럼 우측으로 연속적으로 나타난다.

display flex의 자식에 속하는 것은 자신의 display가 block 이어도 부모가 flex면 flex item이 돼서 block의 특징 잃음(이 특성은 span, inline일 때도 동일함)

 

보통은 자신의 display를 바꾸고 속성을 줌으로써 레이아웃을 변화시킴

하지만 flex 레이아웃은 display flex 속성을 가지고 있는 곳에서 모든 것을 변경

*text-align은 display가 flex인 경우 쓸 수 없다.

 justify contents 또한 display가 flex가 아닐 때 못 쓴다.

 

 

 

 

justify-content, align-items의 속성이 display가 flex 인 경우에만 사용 가능하다. 

 

justify-contents가 가진 속성들: center, flex and, flex start, [space around, space between: 자식 요소가 여러 개일 때 유용]  

 

align-items의 속성에도 flex and, flex start 존재

 

 

 

👾 Space between/-around/-evenly

 

자식 요소 사이의 간격 생성, evenly: 모든 여백 동일 간격

space-between

 

 

 

 

space-around

 

 

space-evenly

 

 

😲 출력되는 데이터의 방향을 바꾸려면?

 

기본 설정은 flex direction: row -> column