본문 바로가기
웹 프로그래밍/HTML | CSS

CSS Flex Box

by 청량리 물냉면 2022. 7. 4.
반응형

Container에 적용되는 속성 값

  • display
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
 

Item에 적용되는 속성 값

  • order : 순서 지정
  • flex-grow
  • flex-shrink
  • flex
  • align-self
 
중심축main axis  (수평) →
(수직) ↓
 
반대축cross axis  (수직) ↓
(수평) →
 
div*10 + Tab
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
div.container>div.item.item${$}*10 + Tab : 아래와 같은 body 손쉽게 작성 가능
<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width"> 
  <title>JS Bin</title> 
</head> 
<body> 
  <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 class="item item10">10</div> 
   
    <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 class="item item10">10</div> 
  </div> 
</body> 
</html>
 

CSS

.container{ 
  background: beige; 
  height: 100vh; 
  /* 
  height: 100%; 
  height이 들어있는 부모의 높이의 100% 채우기 
  ->여기서 container의 부모는 body 
   
  height: 100vh; 
  부모와 상관없이 보이는 웹 페이지 100% 전부 쓰겠다는 의미 
  == 
  .body, html { 
  height: 100%; 
  } 
  */ 
   
  display: flex; 
  /*오른쪽으로 박스들이 정렬됨*/ 
   
  flex-direction: row; 
  /* 
  flex-direction 
  메인축: 수평 
  row: 기본. 열, 왼->오 
  row-reverse: 오->왼 
  메인축: 수직 
  column: 행. 위->아래 
  column-reverse: 행. 아래->위 
  */ 
   
  flex-wrap: wrap; 
  /* 
  flex-wrap 
  nowrap: 기본. 창 사이즈가 아무리 작아져도 아이템들이 한 줄로 붙어있음 
  wrap: 아이템이 한 줄에 가득 차면 다음 줄로 넘어감 
  wrap-reverse: 위에서부터 반대로 wrapping 
  */ 
 
  /*
  flex-flow: column nowrap; 
  이렇게 한번에 작성하는 것도 가능*/
 
  justify-content: space-between; /*main axis*/
  /*
  justify-content: 아이템을 어떻게 배열할 것인지 결정
  flex-start : 기본. 중심축이 수평이라면 왼->오. 수직이라면 위->아래
  flex-end : 중심축이 수평이라면 아래->위. 수직이라면 오->왼 축으로 아이템 배치
            column-reverse와 달리 상자의 배치 순서(열)는 달라지지 않음
  center: 맨 위축 중앙 배치
  space-around: 박스를 둘러싼 스페이싱 넣어주기
  space-evenly: 박스를 둘러싼 균일한 간격의 스페이싱
  space-between: 왼쪽 오른쪽은 화면에 딱 붙어있고 중간에 있는 상자들만 스페이싱
  */
  align-items: baseline;
  /*
  justify-content의 반대축에서 아이템 배치
  center: 가운데 배치
  baseline: 상자의 크기가 달라져도 그 안의 텍스트는 동일한 라인에 보이도록 배치
  */
  align-content: space-between;
  /*
  justify-content의 반대축에서 아이템 배치
  justify-content와 기능은 같지만 반대축이라는 점만 다름
  */
} 
.item{ 
  width: 40px; 
  height: 40px; 
  border: 1px solid black; 
} 
.item1{ 
  background: #ef9a9a; 
  /*padding: 20px;*/
} 
.item2{ 
  background: #f48fb1; 
} 
.item3{ 
  background: #ce93d8; 
} 
.item4{ 
  background: #b39ddb; 
} 
.item5{ 
  background: #90caf9; 
} 
.item6{ 
  background: #a5d6a7; 
} 
.item7{ 
  background: #fff59d; 
} 
.item8{ 
  background: #ffcc80; 
} 
.item9{ 
  background: #ffab91; 
} 
.item10{ 
  background: #ef9a9a; 
}
 
 

속성값들

HTML
<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width"> 
  <title>JS Bin</title> 
</head> 
<body> 
  <div class="container"> 
    <div class="item item1">1</div> 
    <div class="item item2">2</div> 
    <div class="item item3">3</div> 
</body> 
</html>
 
CSS
.container{ 
  padding-top: 100px;
  background: beige;
  height: 100vh;
  display: flex;
} 
.item{ 
  width: 40px; 
  height: 40px; 
  border: 1px solid black; 
} 
.item1{ 
  background: #ef9a9a; 
  /*order: 3;
    order: 기본 0, 아이템의 순서를 바꿀 수 있다. 잘 쓰이지는 않는 속성 */
 
  /*flex-grow: 2;
    flex-grow: 기본 0, 고유의 사이즈 유지.
    flex-grow: 1, 비율 1 유지하면서 창 전체 꽉 채움.
    flex-grow: 2, 늘어날 때 다른 박스에 비해 2배 사이즈 유지 */
 
  /*flex-shrink: 2;
    flex-shrink: 기본 0, 고유의 사이즈 유지
    flex-shrink: 2, 줄어들 때 다른 박스에 비해 2배 사이즈로 줄어든다 */
   
  /*flex-basis: 60%;
    기본: auto
    지정한 퍼센테이지대로 늘거나 줄어든다 */
 
  flex: 2 2 auto; /*grow, shrink, basis*/
  align-self: center;
  /*컨테이너를 벗어나서 아이템 하나만을 단독 배치 가능*/
 
} 
.item2{ 
  background: #f48fb1; 
  flex-basis: 30%;
} 
.item3{ 
  background: #90caf9; 
  flex-basis: 10%;
}
 
 
색상툴 사이트(Color Tool)
 
 
 
반응형
저작자표시 비영리 변경금지

'웹 프로그래밍 > HTML | CSS' 카테고리의 다른 글

[오류해결] 반응형 웹 적용되지 않는 오류  (0) 2023.03.24
CSS Display & Position  (0) 2022.07.04
CSS 선택자  (0) 2022.07.04
HTML/CSS 참고 블로그 및 사이트  (0) 2021.11.26

관련글

티스토리툴바