Flex

🔆 flex연습 개구리 사이트 : http://flexboxfroggy.com/#ko
🔆 mdn flex개념 읽기 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
🔆 flex에 대해
https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/#wrapping

• 기본 코드

<!--html-->
<div id="container">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
  </div>

<!--css-->
.box {
  width: 100px;
  height: 100px;
  background-color: rosybrown;
  border: 1px solid black;
}

🔶flex 컨테이너

: items를 정렬하기 위해 flexbox container이 필요함.
: "바로 위" 부모요소에 display:flex를 해야, 자식요소인 items가 가로 정렬 됨.

  #container{
  height: 1000px;
  display : flex;
  }

🔶flex-direction

flex-direction: row(기본값) / row-reverse/ column/ column-reverse ;

* flex-direction : "row일 때"

 #container{
  flex-direction: row(기본값) ;
  justify-content: space-around; (가로축 정렬)
  align-items: center; (세로축 정렬)
  }

* flex-direction : "column일 때" : 가로축,세로축이 뒤바뀜

 #container{
  flex-direction: column;
  justify-content: space-around; (세로축 정렬)
  align-items: center; (가로축 정렬)
  }

🔶justify-content

(flex-direction이 row일 때)
주축을 따라 콘텐츠 항목 간 및 그 주위에 공간을 분배하는 방법을 정의합니다. / 가로 정렬을 설정한다는 의미.

justify-content:flex-start // 요소들을 컨테이너의 왼쪽으로 정렬합니다.
justify-content:flex-end // 요소들을 컨테이너의 오른쪽으로 정렬합니다.
justify-content:center // 요소들을 컨테이너의 가운데로 정렬합니다.
justify-content:space-between // 요소들 사이에 동일한 간격을 둡니다.
justify-content:space-around // 요소들 주위에 동일한 간격을 둡니다.

🔶align-items

(flex-direction이 row일 때)
교차 축에 있는 항목의 정렬을 제어합니다. / 세로 정렬을 설정한다는 의미.

align-items: flex-start // 요소들을 컨테이너의 꼭대기로 정렬합니다.
align-items: flex-end // 요소들을 컨테이너의 바닥으로 정렬합니다.
align-items: center // 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
align-items: baseline // 요소들을 컨테이너의 시작 위치에 정렬합니다.
align-items: stretch // 요소들을 컨테이너에 맞도록 늘립니다.

🔶align-self

• 부모요소가 아닌 개별 item에 적용함

• align-self는 align-item과 같이 동작한다.
  다시 말해 세로축 방향에 있는 item의 위치를 바꾸게 된다.

• align-items와 align-self의 차이점
  : align-items는 flex container인 부모요소에 적용,
  : align-self는 자식items 중 한 item에 개별적으로 적용함.

🔶order (grid에서도 마찬가지)

• 부모요소가 아닌 개별 item에 적용함

• item요소 각각의 순서를 바꾼다.
  (HTML을 통해 순서를 바꾸기 힘들 때 사용하면 좋다.)

• 기본 값은 0
  :order를 1(양수)로 줄 경우, 해당 item이 젤 뒤에 위치하게 된다.
  :order를 -1(음수)로 줄 경우, 해당 item이 젤 앞에 위치하게 된다.

🔶flex-wrap

• flex-wrap :nowrap(기본값)
  : item들이 모두 같은 "한 줄에" 있도록 유지함.
  그래서 지정한 너비가 깨지더라도 줄여서 가로정렬 됨.

• flex-wrap :wrap
  : item들의 너비를 유지한 채, 너비가 꽉차면 "다른 줄로" 바뀌게 됨.

• flex-wrap :reverse
  : flex-wrap을 반대로 함.

• 코드1
  flex-direction와 flex-wrap을 이용한 정렬

.container {
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

🔶flex-flow

• flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 한번에 대신할 수 있음.

• 이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받음.

• 코드2
  flex-direction와 flex-wrap을 이용한 정렬 → flex-flow로 한번에 사용가능.
  (위에 코드1과 코드2는 같은 결과가 나옴)

.container {
  height: 300px;
  display: flex;
  flex-flow: column wrap;
}

🔶align-content

• line을 변경함
  : item들이 여러 행에 걸쳐 나올 때, 행간 공백을 얼마나 둘 건지에 관한 것.

• justify-content는 한 행에 대한 정렬, align-content는 행간에 대한 정렬임.

• 사용코드
  : 두 행간의 사이가 끝에서 끝으로 멀어지게 됨.

.container {
  height: 600px;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
}

🔶flex-shrink , flex-grow

flex-shrink

• 모든 item의 크기가 플렉스 컨테이너보다 크면, item들은 축소되는데, 이 때 item의 수축률을 설정함.
• 각 item에 설정
• 기본값 1

.box:nth-child(4) {
  background-color: cadetblue;
  flex-shrink: 2;
}

flex-grow

• item이 늘어날 떄, 똑같은 간격으로 느는게 아니라, box옆에 남아있는 공간의 n배를 가져가게 됨.
• 각 item에 설정
• 기본값 0

.box:nth-child(4) {
  background-color: cadetblue;
  flex-grow: 2;
}

🔶flex-basis

• 아이템의 처음 크기를 지정하는 것.(item의 width,height를 대신할 수 있음.)
  : flex-direction 이 row 일 때, width 지정하는 것과 비슷
  : flex-direction 이 column 일 땐, height 지정하는 것과 비슷

.box {
  flex-basis: 100px;
  height: 200px;
  background-color: rosybrown;
}

/* 
1.크기를 직접 지정
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

2.원본 크기 키워드
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

3.플렉스 아이템 내용 크기에 따라 조절
flex-basis: content;
*

🔶 축약형 속성 flex

• 보통은 flex-grow, flex-shrink, flex-basis 값을 각각 사용하지 않고 이 세 속성을 한번에 지정하는 flex 축약형을 많이 사용함.
• flex 축약형의 값은 flex-grow, flex-shrink, flex-basis 순서로 지정됨.

/* css */
 #wrapper {
        display: flex;
        width: 400px;
      }

      .one {
        background-color: blueviolet;
        flex: 1;
      }

      .two {
        background-color: rgb(217, 226, 43);
        flex: 2;
      }

      .three {
        background-color: rgb(34, 173, 34);
        flex: 1;
      }
      
      
 /* html */
  <div id="wrapper">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
  </div>

→ 1:2:1로 너비가 나눠짐
→ 1(100px) , 2(200px) , 3(100px)

🔶 flex 지정된 요소 사이의 간격설정

※ grid에서도 마찬가지임
1) column-gap: 10px; - 열과 열 사이의 간격
2) row-gap: 10px; - 행과 행 사이의 간격
3) gap: 10px; - 열과열, 행과행 사이의 간격 한번에 설정