float, flex비교

float을 이용한 방법

<div class="container clearfix">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  border: 2px solid red;
}

.container .item {
  width: 100px;
  height: 100px;
  border: 2px solid;
  border-radius:10px;
  float:left;
}

.clearfix::after {
  content:'';
  display:block;
  clear:both;
}

 

---

flex 이용한 방법

container와 item에 들어갈 속성은 정해져있다.

 

container

container에 적용할 수 있는 display 종류 2가지

flex : container들이 세로로 정렬된다. (item들은 그대로 가로로 정렬)

inline-flex : container들이 가로로 정렬된다. (item들 마찬가지로 가로로 그대로)

 

flex-direction: row(가로) / column(세로)

flex-wrap: no-wrap(무조건 가로로 쭉나온다.) / wrap(넘치면 줄바꿈)

 

justify-content : 주축을 기준으로 flex-start 부분에 붙일 것인지 flex-end 끝날 부분에 붙일 것인지

center인지 등등을 조정가능.

 

align-content : 교차축에 여백이 반드시 있어야 하고, 두 줄 이상일 때 사용한다.

교차축에 대한 배열을 설정한다.

 

align-items : 한 줄일때 사용한다.

보통 justify-content: center와 align-content: center로 한 줄일 때 가운데 정렬을 많이 한다.

 

---

items에 적용할 수 있는 속성들

order : 순서를 조절할 수 있다.

flex-grow: 정확한 가로사이즈를 알지 못하더라도 비율로 나눌 수 있다.

만약에 3번 아이템에 100px로 지정해놓는다고 하면

나머지를 100%로 기준해서 1, 2번이 flex-grow로 나눠쓴다고 생각하면 된다.

 

flex-basis : auto로 두면 글자를 썼을 때 글자를 제외한 나머지 여백을 기준으로 flex-grow가 반영되고

0으로 하면 글자와 상관없이 flex-grow의 영향을 그대로 받고 flex-basis는 item안에 여백을 지정해서 그 여백을 제외한 나머지가 flex-grow의 영향을 받게 하는 것.

 

flex-shrink 설명은 여기서 제외했다.

 

flex로 단축명령어를 사용하게 되면

flex-grow, shrink, basis 순으로 입력하면 된다.

flex : 0 1 0 // 이게 단축명령어 쓸 때 기본값이다. 원래 basis의 기본값은 auto인데 단축 flex를 사용하게 되면 0이 기본으로 바뀐다.

 

추가로 아이템에도 교차축에 대한 정렬을 할 수 있다.

align-self. 사용할 떄 검색해서 쓰자.