HTML & CSS flex 정리

 

웹페이지 혹은 어플리케이션 화면을 만들때 우리는 수평적 요소들에 대한 배치를 할때 고민을 합니다. float, grid, flex중에 어떤 것을 사용할지에 대한 것을 말이죠.

우리가 많이 사용하는 요소들 예를 들어 div, p, footer등은 블럭의 개념으로 표시됩니다. 이 친구들은 블럭요소로 화면의 width를 다 차지해 버립니다. 

요소들을 옆에 두지 않고 밑에(?)두죠. 이런 비 사교적인 친구들을 사교적으로 만들수 있는 flex에 대한 설명을 해보겠습니다.

 

---

이미지에서 주축과 교차축 flex-direction이 보이시나요???

이것들은 화면에 보이는 컨테이너들 즉 요소들을 어떻게 배치하느냐에 중요한 키워드 들입니다.

---

flex-direction

• 컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정합니다.
• row : 기본값. 왼쪽에서 오른쪽 (주축이 행 방향)
• column: 위에서 아래 방향 (주축이 열 방향)
• row-reverse: 오른쪽에서 왼쪽
• column-reverse: 아래에서 위 방향

justify-content

• 주축을 기준으로 배열의 위치를 조절하거나 아이템 간의 설정을 할 수 있습니다.

align-items

• 교차 축을 기준으로 정렬합니다.

 

백견이 불여일행! 한번 해보겠습니다.

⚠️사용전 부모 요소에 display: flex를 설정해 줍니다.

 

flex-direction: row, justify-content: center

주축인 (왼쪽- > 오른쪽) 방향으로  정렬된 모습을 볼 수 있을 겁니다. 이런 식으로 사용하기 때문에 flex-direction 에서 어떤 속성을 사용할  것인지 미리 사용전 정해 놓는 것이 좋습니다!.

 

 

flex-direction: row, justify-content: center, aligh-items: center

주축인 (왼쪽- > 오른쪽) 방향으로 중앙과 교차축인(위 -> 아래) 방향으로  정렬된 모습을 볼 수 있습니다.

 

 

flex-container에 사용하는 속성

gap

• 아이템 사이의 간격을 설정할 때 사용 할 수 있는 속성입니다.
• 플렉스 요소 안에서 사용하면 컨테이너들에게 갭을 줄 수 있습니다. 마진처럼요.

flex-wrap

• 한 줄에 배치되게 할 것인지, 가능한 영역 내에서 여러 행으로 나누어 표현할 것인지 결정합니다.
• 브라우저 크기에 유연하게 반응시키고 싶으실 때 사용하면 됩니다.

flex

• 단축속성
• flex-grow flex-shrink flex-basis
• flex-grow: 브라우저 크기를 늘릴 떄 유연하게 반응하기 위해서.
• flex-shrink: 브라우저 크기를 줄일 떄 유연하게 반응하기 위해서.
• flex-basis: 요소들의 초기 값을 지정해 줍니다.