Kimsora✨
article thumbnail
Published 2022. 8. 30. 00:59
css flex (이해해야할것) CSS
320x100
반응형

 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다

부모 요소인 Flex Container(플렉스 컨테이너)와 자식 요소인Flex Item(플렉스 아이템)으로 구성되어 있다
컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치 되어진다

flexbox를 사용하기 위해서 HTML 부모 요소의 display 속성에 flex를 지정한다.

 

1. Flex 컨테이너에 적용하는 속성

  • display: flex;
    • Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼 차지한다. 마치 inline 요소들처럼. height는 컨테이너의 높이만큼 늘어난다. height가 알아서 늘어나는 특징은 column 레이아웃을 만들 때 유용하다.

  • display: inline-flex;
    • block과 inline-block의 관계 처럼 아이템의 배치와 관련있다기 보다는, 컨테이너가 주변 요소들과 어떻게 어우러질지 결정하는 값이다. inline-flex는 inline-block처럼 동작한다.

 

  • flex-direction : row(기본값) / column / row-reverse / column-reverse
    • 배치방향 결정 : 아이템들이 배치되는 축의 방향을 결정하는 속성이다. 즉 메인축방향을 가로 혹은 세로로 정해주는 것.
     

  • flex-wrap : nowrap(기본값) / wrap / wrap-reverse
    • 줄넘김 처리 설정 : 컨테이너가 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성.

  • flex-flow : row wrap;
    • = flex-direction: row +flex-wrap: wrap; 
    • flex-direction과 flex-wrap을 한번에 지정할 수 있는 단축 속성으로 direction   wrap 순으로 한칸 떼고 작성.

 

  • justify-content - 메인축 방향 정렬
    • justify-content : flex-start; (기본값) 
      • 아이템들을 시작점으로 정렬한다. flex-direction이 row(가로배치)일 때는 왼쪽, column(세로배치)일 때는 위.
    • justify-content : flex-end;
      • 아이템들을 끝점으로 정렬한다. flex-direction이 row(가로배치)일 때는 오른쪽, column일 때는 아래.
    • justify-content : center;
      • 아이템 가운데 정렬
    • justify-content : space-between;
    • justify-content : space-around;
    • justify-content : space-evenly;
    •  
     

  • align-items - 수직축 방향 정렬
    • align-items : stretch (기본값)
      • 아이템들이 수직축 방향으로 끝까지 늘어남
    • align-items : flex-start
      • 아이템들을 시작점으로 정렬. flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 떄는 왼쪽이다.
    • align-items : flex-end
      • 아이템들을 끝으로 정렬. flex-direction이 row(가로 배치)일 때는 아래, column(새로 배치)일 떄는 오른쪽이다.
    • align-items : center
    • align-items : baseline
      • 아이템들을 텍스트 베이스라인 기준으로 정렬
  • justify-content: center; 와 align-item: center; 해주면 아이템을 컨테이너 정가운데 놓아진다

  • align-content : stretch / flex-start / flex-end / center / space-between / sapce-aroun / space-evenly
    • flex-wrap:wrap이 설정된 상태에서 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성

 

 

2. Flex 아이템에 적용하는 속성

  • flex-basis: auto; (auto가 기본값)
    • flex 아이템의 기본 크기를 설정한다. flex-direction이 row 일 때는 너비, column일 때는 높이).
    • flex-basis 값으로는 width, height 등에 사용하는 각종 단위가 들어갈 수 있고 기본값 auto는 해당 아이템의 width값을 사용한다. width를 설정하지 않으면 컨텐츠의 크기가 된다.

 

  • flex-grow : 0(기본값) / 1 등...
    • 유연하게 늘리기.
    • flex-grow 는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다. flex-grow 에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅되면 해당 아이템이 유연한 박스(Flexible box)로 변하고 원래 크기보다 커지며 빈 공간을 메우게 된다. 
    • flex-grow에 들어갈 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다. 아래 각 아이템 여백의 비로 생각하면 정확히 1:2:1로 나뉜다.

 

  • flex-shrink : 1(기본값)
    • 유연하게 줄이기
    • flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다. flex-shrink에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅되면 해당 아이템이 유연한 박스(Flexible box)로 변하고 flex-basis보다 작아진다. 기본값이 1이기 때문에 따로 세팅하지 않아도 아이템이 flex-basis보다 작아질 수 있다.

 

  • flex
    • flex-grow, flex-shrink, flex-basis를 한번에 쓸 수 있는 축약형 속성으로 이 세 속성들은 관련이 깊기 때문에 이 축약형을 쓰는 것이 유용하다.
    • 주의할 점은 flex: 1; 으로 flex-basis를 생략하여 쓰면 flex-basis 값은 0이 된다.

 

 

 

내가만든 계산기 

 

이게 잘된건지 아닌건지 잘모르겟다.... 

<!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" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="calculator">
      <div class="Display">
        <span>0</span>
       </div>
       <div class="calculator_button">
        <div class="row ">
          <button>AC</button>
          <button>Enter</button>
        </div>
        <div class="row">
          <button>7</button>
          <button>8</button>
          <button>9</button>
          <button>+</button>
        </div>
        <div class="row">
          <button>4</button>
          <button>5</button>
          <button>6</button>
          <button>-</button>
        </div> 
        <div class="row">
          <button>1</button>
          <button>2</button>
          <button>3</button>
          <button>*</button>
        </div>
        <div class="row">
          <button>0</button>
          <button>.</button>
          <button>/</button>
          </div>
       </div>
      
    <script src="ex.js"></script>
  </body>
</html>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  color: azure;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px solid rgb(158, 160, 185);
}
.calculator {
  display: flex;
  flex-direction: column;
  width: 350px;
  height: 500px;
  border: 4px solid rgb(189, 196, 227);
  background: linear-gradient(
    rgb(235, 245, 245),
    rgb(151, 215, 240),
    rgb(162, 214, 214),
    rgb(138, 157, 233)
  );
  box-shadow: 5px 5px 2px gray;
  border-radius: 10px;
}
.Display {
  height: 100px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  font-size: 50px;
  border-radius: 20px;
  border: 5px solid rgb(242, 245, 249);
  margin: 5px 10px;
  box-shadow: 5px 5px 1px gray;
}
.row {
  display: flex;
  margin: 20px;
  height: 60px;
}
button {
  font-size: 50px;
  font-family: serif;
  color: azure;
  background-color: rgb(239, 213, 243);
  border-radius: 10px;
  box-shadow: 5px 5px 2px gray;
  flex: 1;
}
button:active {
  font-size: 50px;
  font-family: monospace;
}

완전 100% 참고 한 사이트   https://studiomeal.com/archives/197

728x90
반응형

'CSS' 카테고리의 다른 글

CSS 그리드 레이아웃  (5) 2023.02.28
css 박스모델  (0) 2022.08.26
css 길이단위  (0) 2022.08.26
css selector  (0) 2022.08.26
css 개념  (0) 2022.08.26
profile

Kimsora✨

@sorarar

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

검색 태그

WH

티스토리툴바