FlexBox 이해하기

css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox | CSS-Tricks

 

flexbox?

flexbox가 나타나기 전에는 position, float(원래 목적이 텍스트랑 이미지 배치), table을 이용해서 레이아웃을 했는데

너무 복잡하고 시간도 많이 소요되고 또 얘네들로 할 수 없는게

박스안의 아이템들을 가운데로 정렬한다거나 아이템들의 사이즈와 상관없이 

동일한 간격으로 박스안에 배치하는 것들이 까다로워서 flexbox가 나타났다.

 

플랙스박스는 컨테이너, 즉 박스에 적용되는 속성이랑 그 안에있는 각각의 아이템들에 적용할 수 있는 속성값들이 존재.

컨테이너에 적용할 수 있는 것들은 display, justify-content, flex-wrap, align-content

아이템에 적용할 수 있는 것들은 order(순서지정), flex 이런것들 있음.

 

또 플랙스박스에는 중심축과 반대축이 있는데 

예를들어 아이템들이 왼 -> 오로 가면 수평축이 메인축이 되고 수직축이 반대축이 됨.

justify-content는 중심축에서 아이템을 어떻게 배치할지 결정

align-content은 반대축에서 아이템을 어떻게 배치할지.

 

-Container 속성 값들:

 

display

flex-direction

flex-wrap

flex-flow

justify-content : 아이템들을 어떻게 배치할 것인가?

align-items

align-content

 

-기본 세팅

 

-display: flex;

-flex-direction: row; (기본값)

row: 왼 -> 오 로 가는 방향

 

-flex-direction: row-reverse;

 

-flex-direction: column;

 

-flex-wrap: nowrap; (기본값)

아이템 수가 많아지면 아이템들이 한줄에 자동적으로 빼곡히 붙어있는 것. = wrapping 을 안하겠다.

 

-flex-wrap: wrap;

아이템들이 한줄에 꽉 차게 되면 자동으로 다음 라인으로 넘어감

-flex-flow: flex-direction + flex-wrap (한 줄에 줄여쓸 수 있음)

-justify-content : flex-start; (기본값) 왼쪽에서 오른쪽으로

justify-contents는 중심축에서 아이템을 어떻게 배치하는지!! 

 

-justify-content : flex-end; (아이템의 순서는 유지하되 오른쪽으로 배치)

-justify-content : center; 

-justify-content : space-around; 

박스를 둘러싸며 spacing을 두는 것

-justify-content : space-evenly; 

-justify-content : space-between; 

왼쪽과 오른쪽 양 옆 화면에 맞게 붙이기

 

align-items는 반대축에서 아이템들을 어떻게 배치하는지!

-align-items : center; 

-align-items : baseline; 

텍스트가 균등하게 보여질 수 있도록 함.

-align-content: space-between; 

-align-content: center; 

 

-Item 속성 값들:

 

order

flex-grow

flex-shrink

flex

align-self

 

-기본 세팅

 

-order: 0 (기본값)

 

-flex-grow: 0;(기본값) 

박스들이 공간을 메꿀려는 노력을 하지 않음.

flex-grow 안쓰면 웹사이트가 이렇게 작아질 때 크기를 40*40으로 했음에도 불구하고 저렇게 찌부됨

 

-flex-grow:1 

컨테이너를 꽉 채우려고 아이템들이 늘어나게 됨

 

-flex-shrink: 0;

컨테이너가 점점 작아졌을 때 어떻게 행동하냐를 지정

 

item1은 줄어들었을 때 item2, 3보다 2배로 더 줄어듦.

flex-grow, shrink는 컨테이너의 사이즈가 바뀌었을 때 아이템들이 얼마나 어떻게 더 줄어들고 늘어나는지 정리해줌

 

-flex-basis: auto; (기본값)

아이템들이 공간을 얼마나 차지해야하는지 세부적으로 명시

 

커질때나 작아질때나 알아서

 

-align-self: 

아이템별로 아이템 정렬

컨테이너에서 지정된 것을 벗어나서 아이템 하나만 특별하게 배치하고 싶다!

 

 

 

CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript - YouTube