css 가로 정렬 쉽게하기, Flexbox

 

 

이전에 가로 정렬을 하려면 float : left; 를 사용했었습니다.

그러나 더 좋은 방법이 있습니다.

부모 div안에 자녀 엘리먼트가 많다면?

부모 div 안에 display : flex; 를 넣어주시면 쉽게 가로 정렬이 됩니다.

 

.flex-container {   display : flex;   justify-content : center;  /* 좌우정렬 */   align-items : center;  /* 상하정렬 */   flex-direction : column; /* 세로정렬 */   flex-wrap : wrap;  /* 폭이 넘치는 요소 wrap 처리 */ }

 

요소의 폭이 커도 넘어가지는 않습니다. 

그러나  flex-wrap : wrap 사용하면, 요소의 폭이 넘어가면...

다음 줄로 넘어가게 됩니다.

 

 

flex-grow 사용하기

웹페이지의 상단의 메뉴바를 만들 때 사용을 합니다.

.flex-container {   display : flex;   justify-content : center;     align-items : center;     flex-wrap : wrap; } .box1 {   flex-grow : 2;  /* 폭이 상대적으로 몇배인지 결정 */ } .box2 {   flex-grow : 2;  /* 폭이 상대적으로 몇배인지 결정 */ }