티스토리 뷰

CSS

CSS - flexbox ✨

김소비요정 2021. 8. 26. 10:00
더보기

Flexbox

  • Box와 item을 행/열로 자유자재로 배치해줄 수 있는 기능
  • 아주 예전에는 모든 브라우저에서 호환 가능한 레이아웃을 만들기 위해 position, float, table 등을 이용하였다. (It's me....😭)
    하지만, flexbox가 나타나면서 float는 순수 목적인 이미지와 텍스트의 배치를 이용할때만 사용하게 되었다.

Flexbox는 크게 두가지만 이해하면 된다.

  1. 컨테이너와 각각의 아이템에 적용 가능한 속성들이 존재한다.
  2. flexbox 두 개의 축이 존재한다. (중심축과 반대축)
container item
display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content		 order
flex-grow
flex-shrink
flex
align-self

flexbox 예제

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <!-- div.container>div.item.item${$}*10 -->
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
  </div>
</body>
</html>
/*
html, body {
  height: 100%;
}

.container {
  background: beige;
  height: 100%;
  height: 100vh;//보이는 부모의 높이와 상관없이 보이는 viewport height의 100% 모두를 쓰겠다는 의미
}
*/

.container {
  background: beige;
  height: 100vh;
  
  /* 1. container에 flexbox 설정 */
  display: flex;
  
  /* 2. container의 중심축 설정 : row, column, row-reverse, column-reverse */
  flex-direction: row;
  
  /* 3. wrapping 여부 (아이템들이 한 줄에 꽉 차게 되면 다음 줄로 넘기는 것) : nowrap(기본 값), wrap, wrap-reverse */
  flex-wrap: nowrap;
  
  /* 2번 + 3번 한번에 작성하기 */
  flex-flow: column, wrap;

  /* 4. 중심축에서 item 정렬 : flex-start, flex-end, center, space-around, space-evenly, space-between*/ 
  justify-content: space-between;
  
  /* 5. 반대축에서 item 배치 : baseline, center*/
  align-items: baseline;/*반대축에서 어떻게 배치할지*/
  
  /* 6. 반대축에서 item 정렬 : justify-content의 속성값을 사용할 수 있음*/
  align-content: center;
  
}

.item {
  width: 40px;
  height: 40px;
  background: red;
}

 

Item 속성 값 예시

/*
html, body {
  height: 100%;
}

.container {
  background: beige;
  height: 100%;
}
*/

.container {
  background: beige;
  height: 100vh;
  display: flex;
  
}


.item {
  width: 40px;
  height: 40px;
  background: skyblue;
  border: 1px solid black;
  
}

.item1 {
  /* flex-grow : 컨테이너가 늘어갈수록 item 늘어드는 비율*/
  flex-grow:1;
  
  /* flex-grow : 컨테이너가 줄어들수록 item 줄어두는 비율 */
  flex-shrink:2;
  
  /* flex-basis : 좀 더 세부적으로 명시하는 것 */
  flex-basis: 50%;
  
  /* item 별로 배치할 수 있음*/
  align-self: center;
}

.item2 {
  flex-grow:1;
  flex-shrink:1;
  flex-basis: 30%
}

.item3 {
  flex-grow:1;
    flex-shrink:1;
  flex-basis: 10%
}

 

flex-box: 게임!

https://flexboxfroggy.com/

'CSS' 카테고리의 다른 글

CSS - Display / Position  (0) 2021.08.25
CSS - 개념 / 선택자  (0) 2021.08.24