[CSS] Flex

 웹페이지의 레이아웃을 잡을 때 보통 display, float, position과 같은 css 속성들을 이용하지만 이러한 속성은 특성 상 한계와 복잡도가 존재합니다. 그 한계를 극복하기 위해서 css3에 flex라는 방식이 새롭게 추가되었습니다. flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다.

flex CSS는 부모 요소인 flex 컨테이너 와 자식 요소인 flex 아이템으로 구성됩니다. flex 컨테이너가 flex 태그의 영향을 받는 공간이고, 그 안에서 flex 아이템들의 배치, 정렬이 설정된 속성에 따라 변경되는 것이기 때문에 flex 를 사용하려면 부모먼저 정의한 후 자식 요소에 배치를 고려해야 하겠습니다.

 

 

 

 

# Contents

---

• flex의 이해

 

 

# flex의 이해

---

 서론에서도 이야기하였지만 flex는 컨테이너와 아이템으로 구성됩니다. flex를 사용하려면 컨테이너가 필수적입니다. 즉, 기본적으로 부모 태그에 display: flex; 또는 display: inline-flex 속성이 적용되어 있어야 합니다. 두 방식의 차이점은 컨테이너의 수직 추가, 수평 추가의 차이입니다.

 

부모 요소에 flex 속성을 추가하면, 자식 요소에는 자동으로 flex 속성이 부여됨을 확인할 수 있었습니다.

 

 

 아이템 정렬은 주축(main-axis)에 의해 결정됩니다. 기본 값은 row 이며, 이는 왼쪽에서 오른쪽으로 아이템 이 정렬됨을 의미합니다. 이를 column으로 변경시 주축 방향이 위에서 아래 로 바뀝니다.

 반대는 row-reverse와 column-reverse 가 존재합니다. 주축의 정렬 방향이 바뀔 뿐 주축은 위에 설명드린 거랑 동일합니다.

 

 

양측 정렬 혹은 균등 정렬

두 개의 아이템을 왼쪽에, 하나의 아이템을 오른쪽에 정렬하는 방법입니다. justify-content: space-between; 속성을 사용하면 왼쪽부터 차례로 요소를 균등하게 정렬할 수 있습니다.

 

 

자식 요소를 수직으로 중앙 정렬

양측 정렬(균등 정렬) 상황에서 align-items: center 속성을 추가해주면 다음과 같이 요소가 수직으로 중앙 정렬됩니다.

 

 

네비게이션 정렬: 2개의 요소는 좌측, 1개의 요소는 우측

margin-left: auto; 속성을 사용하면 요소를 우측으로 밀 수 있습니다. 우측 정렬을 원하는 요소에 해당 속성을 부여하면, 요소 바깥이 마진 왼쪽 공간을 차지하며 요소를 오른쪽 미는 원리입니다.

이를 활용하여 margin: auto 0 0 auto;를 적용하면 해당 요소를 우측 하단에 정렬할 수 있습니다.

 

 

margin에 따른 아이템 정렬1. 이미지 출처: 네이버 D2, https://d2.naver.com/helloworld/8540176

margin에 따른 아이템 정렬2. 이미지 출처: 네이버 D2, https://d2.naver.com/helloworld/8540176

 

 

 

 

내용의 출처 : 

https://oneroomtable.tistory.com/entry/flex-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95-%EC%A2%8C%EC%B8%A1-%EC%9A%B0%EC%B8%A1-%EC%A4%91%EC%95%99-%EC%A0%95%EB%A0%AC-%EB%93%B1