CSS Flex Box

Flex

 

박스와 아이템을 행 / 열 기준으로 자유롭게 배치해줄 수 있음 ⇒ 레이아웃 구성에 필수

cf) float, position, table / float - 이미지 & 텍스트 배치를 위해 만듦

↔ 아이템 크기에 상관없이 동일한 간격으로 배치도 가능

Container ↔ item : 적용하는 속성이 다름.

수평, 수직 축이 중심이 됨 (main axis ↔ cross axis)

```css .container { display: flex; flex-direction: row-reverse; /*기본값은 row, row-reverse는 순서를 뒤집음,수직: column*/ flex-wrap: nowrap; /*기본값. wrap으로 지정 시 다음 줄로 넘어감, wrap-reverse*/ justify-content: flex-start; /*flex-end : 순서 유지하지만 오른쪽에 붙음,space around, space evenly, space between column-순서 유지 하되 아래 붙음*/ align-items: base-line /*작성된 텍스트의 높이가 같도록 배열, justify에서 적용할 수 있는 것 적용 가능*/ } .item { order: 1; /*그 순서에 배치 해줌, 현업에선 잘 안쓰임*/ flex-grow: 1; /*container를 다 채우려고 함. 비율로 나타냄*/ flex-shrink: 1; /*container가 줄어들 때*/ flex-basis: 1; /*커지든 작아지든 상관없이 이 비율 유지하며 크기 바뀜*/ align-self: center; /*container에서 벗어나 이 item에만 속성 지정 가능*/ ```

 

출처 : 드림코딩 by 엘리 - 웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편 : HTML, CSS, Javascript

space around - 일정한 간격으로 떨어지지만 양 끝의 간격이 가장 작음

 

출처 : 드림코딩 by 엘리 - 웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편 : HTML, CSS, Javascript

space evenly - item이 양끝에 붙지 않은 상태로 일정한 간격으로 떨어짐

 

출처 : 드림코딩 by 엘리 - 웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편 : HTML, CSS, Javascript

space between - item이 양끝에 붙은 상태로 일정한 간격으로 떨어짐

 

 

---

Font awesome - 태그 카피해서 사용하기 좋음.

font 취급함

Color tool

버튼일 땐 margin 말고 padding

emmet

vh

---

 

지

 

장고 사이트 클론코딩 할 때 병렬 구조를 float으로 만들었어서 그걸 활용해봄.

밑에 세 가지 상자 나열하는 방법을 찾다가 flex를 알게 돼서 처음 써봄.

 

위에 헤더랑 옆에 별 모양 나와 있는 부분을 우선 container로 묶어주고 float로 해놨던 건 flex로 바꿨다.

그리고 justify-content를 space between으로 설정하니까 원하는 대로 모양이 나왔음

 

문제)

css에서 first child로 구분했던 건 flex에서 align-self를 쓰는 식으로 바꿔보려고 했지만

flex-direction:column으로 하고 나니까 flex-start로 하면 왼쪽 시작에 붙는 게 아니라 위로 붙음