CSS - flexbox

아직 한번도 코딩할때는 적용해 보지 못한 flexbox. 레이아웃을 위해 CSS3부터 생긴 속성이다.

 

IE11부터 적용되어 아직은 대중적으로 사용하기엔 크로스 브라우징 문제가 있을듯 하다.

display속성의 값으로 사용된다.

 

display: flex;

display: -webkit-flex; //크롬을 위한것. flex속성에는 다 써주기.

 

이 값을 가지고 있는 부모 div 안에 있는 자식들은 자동으로 flex된다.

 

 

 

 

● flex-direction을 이용하여 가로로 정렬할지, 세로로 정렬할지도 정할수 있다.물론 이 값은 여전히 부모에게 주는것.

 

flex-direction : row; //가로정렬

flex-direction : row-reverse;

 

flex-direction : column; //세로정렬

flex-direction : column-reverse;

 

이걸 이용해서 가로로정렬할지, 세로로 정렬할지 정할 수 있다.

 

 

 

 

● 가로로 정렬할 때, 그 가로로 정렬하는 기준을 정하는 속성.

 

justify-content: flex-start;   //디폴트

justify-content: flex-end;   //부모되는 div의 오른쪽 끝부분 기준

justify-content: center;   //부모되는 div의 중앙 기준.

justify-content: space-between;   //부모되는 div 안에서 컨텐츠끼리 동일한 간격을 두고 떨어짐(부모div로부터의 간격도 같음)

justify-content: space-around;

 

 

● 세로로 정렬할 때, 그 기준을 정하는 속성. - 이떄, 안에 컨텐츠가 height값을 가지고 있지 않을수도 있음. 물론 가질수도 있고.

 

align-items : stretch; //디폴트. 컨텐츠가 height가 없으면 부모 div의 높이를 따라감.

align-items : flex-start; // 부모 div의 top기준, height가 없으면  height는 자동으로 가질수 있는 높이만가짐.

align-items : flex-end; //부모 div의 bottom기준, height가 없으면  height는 자동으로 가질수 있는 높이만 가짐

align-items : center; //부모 div의 middle기준, height가 없으면  height는 자동으로 가질수 있는 높이만 가짐

 

*align-content 속성도 있는데, 이건 flex-wrap과 짝꿍... 그때 쓰면됨. align-itemas와 값은 같음.

 

 

 

● 컨텐츠가 자기 넓이를 따라갈건지, 아니면 부모 넓이에 맞출건지 정하는 속성

 

flex-wrap : nowrap; //디폴트. nowrap됨 (자기넓이 무시하고 부모넓이 따라감)

flex-wrap : wrap; //필요한경우 자기 넓이 그대로 가져감

 

 

● flex값을 가진 부모 안에서 컨텐츠들의 순서 정하기

 

order: -1; //이렇게 숫자를 가지면 순서가 바뀜. z-index랑 비슷한 속성으로 이해하면 될듯. z-index는 쌓이는 순서? 라면 이거는 그냥 순서.

 

 

 

● 가로,세로정렬 !

 

flex속성가진 box안에서 margin: auto; 만 써주면 된다!

 

 

● 같은 컨텐츠라도 좀더 많이 영역을 가지고 싶은 경우

 

해당 content에

 

flex: 숫자 ; 이렇게 주면 된다. 이럴 경우, 예를들어 부모div안에 item1 , item2, item3이 있는데 item1이 다른 item들보다 두배의 영역을 가지고 싶다면,

 

item1{ flex: 2; }

item2 { flex: 1; }

item3 { flex: 1; }

 

이럴경우, 부모 div는 자동으로 4개로 나뉘어 지며 item1은 그중에 2만큼의 영역을 차지하게 된다.

 

 

 

https://www.w3schools.com/css/css3_flexbox.asp