prologue,
꼭 모든 div에 class를 줄 필욘 없다.
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/test.css"> <title>Document</title> </head> <body> <header></header> <main> <div class="box1">1</div> <div class="box2"> <div>1</div> <div>1</div> <div>1</div> </div> <div class="box3"> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> </div> <div class="box4"> <div>1</div> <div>1</div> </div> </main> </body> <html>
css
*{ margin: 0; padding: 0; } body{ background-color: #ccc; } header{ width: 100%; height: 10vh; background-color: black; } main{ width: 800px; margin: auto; overflow: hidden; /* 자식 요소에게 마진 주었을 때 같이 끌려내려가는 현상을 방지하기 위해 overflow hiddien 을 준다 */ } .box1{ height: 200px; background-color: #fff; margin: 10px 0; } .box2{ display: flex; gap: 10px; margin-bottom: 10px; } .box2 div{ background-color: #fff; flex: 1; height: 100px; } .box3{ display: flex; gap: 10px; margin-bottom: 10px; } .box3 div{ flex: 1; background-color: #fff; height: 100px; } .box4 { display: flex; background-color: black; padding: 10px; gap: 10px; } .box4 div{ flex: 1; background-color: #fff; height: 150px;
위와 같이 flex를 이용해서 레이아웃을 잡는다.
이때까지 flex 하면 간격을 일정하게 수평, 혹은 수직정렬을 할 때 유용하게 쓰이는 방법으로 알고 있었지만, 나는 굉장히 얕고 기본적인 것만 사용하여 적용하고 있었다. 더구나 헷갈리는 부분 또한 많았기에😬 내친김에 기본부터 다시 정리해보기로 했다.
먼저 flex 는 부모요소와 자식요소에 적용하는 속성들이 나누어져있다.
flex 부모 요소 (컨테이너) 속성들
display=flex;flex-direction= ;flex-wrap= ;flex-flow= 'flex-direction and flex-wrap';
(flex-flow는flex-direction과flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다.)justify-content= ;align-items= ;align-contents= ;(두 줄 이상일 때 수직 정렬)
flex 자식 요소 속성들 (flex items)
-
flex-basis: 아이템들의 너비나 높이를 설정하는 값이다.
(ex.flex-basis= 50%;)
* 기본값은 auto로, 아이템의 너비만큼을 뜻한다.
-
flex-grow: 컨테이너의 너비에 따라 아이템의 기본 너비(flex-basis)보다 늘어날 수 있을지를 결정하는 값이다.
* 기본값은 0이고,flex-basis를 제외하고 나머지 여백을 숫자만큼의 비율로 동일하게 나누게끔 한다. 0보다 커지면 아이템이 유연한 박스로 변하고 컨테이너의 남은 여백을 채우면서 늘어나게 된다.
-
flex-shrink: 아이템의 기본 너비(혹의 높이, 즉flex-basis)보다 줄어들 수 있을지를 결정하는 값이다.flex-grow와 반대.
* 기본값은 1이고, 0보다 큰 수를 적어넣으면 그 비율로 유연하게 줄어들 수 있다. 즉, 기본값이 1이기 때문에 따로 세팅하지 않아도 아이템의 크기가
flex-basis보다 작아질 수 있다.flex-shrink를 0으로 세팅하면 아이템의 크기가flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들 수 있으며, 고정 크기는 width로 설정한다.
그렇다면 flex : 1 은?
flex: 1은 풀어서 보면flex-grow: 1; flex-shrink: 1; flex-basis: 0%; (축약형 순서 동일)를 의미한다.
즉, flex-basis가 0이므로 점유 크기를 0으로 만든 후 화면 비율에 따라 유연하게 늘어나거나 줄어들 수 있음을 만드는 속성이다.
💡 발췌 mooongs.log
gap
gap의 경우 간단하다. 말 그대로 display=flex; 가 적용된 컨테이너, 즉 부모 요소에 적용하면 각 아이템들(=자식요소)에게 주어진 숫자(=간격)만큼 일정하게 간격이 띄워지게 된다.
