📌 Flex를 공부해보자!

Flex는 전체적으로 부모요소인 flex container와 자식요소인 flex item 으로 나뉘어 진다!

부모요소에게 display: flex; 속성을 주게되면 자식요소의 아이템들은 가로방향으로 배치가 되고, 자신이 가진 컨텐츠 만큼만의 width를 차지하게 된다! 또한, align-item의 속성의 기본값인 stretch 속성으로 인해 height는 컨테이너의 높이만큼 쭉 늘어나게 된다!

📌 부모요소에 적용되는 속성들

1. display: flex;

2. 배치 방향 flex-direction

아이템들의 배치방향을 결정하는 속성 기본값은 row이다

• flex-direction: row;

• flex-direction: column;

• flex-direction: row-reverse;

• flex-direction: column-reverse;

3. flex-wrap

컨테이너의 여유공간이 없을 때 줄바꿈 여부를 결정하는 속성이다. 기본값은 넘치게 nowrap이다.

• flex-wrap: nowrap;

• flex-wrap: wrap;
  아이템들의 크기가 컨테이너보다 커지게되면 줄바꿈이 된다.

• flex-wrap: wrap-reverse;
  아래로 떨어지는것이 아닌 위로 올라가게 된다.

4. justify VS align

justify는 메인축 align은 수직축이다!
justify는 가로 align은 세로 방향이라고 이해하는 것이 아닌 flex-direction의 방향을 기준으로 가로인지 세로인지 결정되게 된다.
row방향이라면 justify는 메인축을 의미하므로 가로방향이 되고 column 방향이라면 반대로 justify가 세로방향 align이 가로방향이 된다.

5. justify-content

• justify-content: flex-start;
  기본값, 시작점으로 정렬한다.

• justify-content: flex-end;
  끝점 정렬.

• justify-content: center;
  중앙 정렬.

• justify-content: space-between;
  아이템들 간 사이에 동일한 간격을 설정해준다.

• justify-content: space-around;
  아이템들의 양옆에 동일한 간격을 설정해준다.

• justify-content: space-evenly;
  양끝과 아이템들 사이에 동일한 간격을 설정해준다.
  IE와 엣지에서는 지원하지 않는 속성이므로 유의한다!
  

6. align-items

• align-items: stretch; => 기본값

• align-items: flex-start;

• align-items: flex-end;

• align-items: center;

• align-items: baseline;

7. align-content

flex-wrap: wrap; 이 설정된 상태에서, 행이 2줄 이상 되었을 때의 수직축 방향정렬을 하는 속성이다.

🔵 flex-wrap: wrap; 설정 🔵 아이템들이 2줄이상이여야 함

• align-content: stretch; => 기본값

• align-content: flex-start;

• align-content: flex-end;

• align-content: center;

• align-content: space-between;

• align-content: space-around;

• align-content: space-evenly;

📌 자식요소에 설정하는 속성들

1. flex-basis

flex아이템들의 기본크기를 설정한다! flex-direction이 row방향일때는 width, flex-direction이 column방향일때는 height

• flex-basis: auto; => 기본값

• flex-basis: 0;

• basis의 값으로는 우리가 사용하는 각종단위가 들어갈 수 있다. (px, % ,rem ..)

• 기본값 auto는 해당 아이템의 width값을 사용하게 된다.
  만약 width값이 없다면 컨텐츠의 크기가 기본으로 잡히게 된다.
  

• 위 그림에서 basis의 값을 100px로 설정했지만, 컨텐츠의 크기가 적으면 100px로 아이템들의 width가 결정되지만, 컨텐츠가 많아지게되면 basis보다 넓어지게 된다!

• 반면, width값을 100px로 설정하게 되면 basis와 달리 컨텐츠의 크기가 많아지면 아이템의 width는 100px로 고정되고, 컨텐츠가 밖으로 나가게 된다. => 이를 방지하려면 word-wrap: break-word; 값을 주면된다.

• flex-basis VS width
  기본적으로 flex-basis 속성이 width보다 우선하게 된다!
  즉, width를 100px을 주고 basis를 300px로 주게 되면 basis값이 우선시 되어 아이템들의 기본너비가 300px로 잡히게 된다.

2. flex-grow

flex-grow 속성은 flex-basis의 값보다 늘어날 수 있는지 여부를 결정하는 속성이다. 기본값은 0 즉, 늘어나지 않지만 0보다 큰 수를 넣어주게 되면 아이템 자체가 유연하게 변하게 되어 빈 공간을 채우게 된다.
아이템마다 grow에 숫자를 넣어줄 수 있는데 이때 이 숫자는 아이템들의 flex-basis를 제외한 여백 부분을 숫자의 비율대로 나누어 준다고 생각하면 된다!

.item-flex:nth-child(1) {
    flex-grow: 1;
}
.item-flex:nth-child(2) {
    flex-grow: 2;
}
.item-flex:nth-child(3) {
    flex-grow: 1;
}

3. flex-shrink

flex-grow와 반대로 flex-basis보다 작아질 수 있는지를 결정하는 속성이다. 기본값이 1로 줄ㄹ어들수 있지만, flex-shrink를 0으로 값을 주게되면 width로 크기를 고정시킬 수 있다.

4. flex

flex-grow, flex-shrink, flex-basis를 한 번에 쓰는 축약형이다.

• flex: 1;
  순서대로 1 1 0% 의미

• flex: auto;
  순서대로 1 1 auto;

여기서 주의해야 할 점은 원래 flex-basis의 기본값은 auto이지만 flex: 3 이런식으로 basis를 생략한다면 축약형 속성에서의 basis의 값은 0이된다.

=> 따라서 flex: 1; flex: 3; flex: 2; 이런식으로 아이템들에게 각각 1,3,1로 flex값을 주게되면 basis의값은 0이므로 기본 점유된 크기가 0이된다. 즉, 전체 크기가 1:3:2로 설정되게 되는것이다.

5. align-self

align-items는 부모에게 주는 속성으로 전체의 수직축 정렬을 해줬다면, align-self는 아이템들 각각에 주는 개인 속성이다.
기본값은 auto로 align-items의 속성을 상속받게 된다. 또한 align-self는 align-items보다 우선순위가 높아지게 된다!

• align-self : auto;

• align-self : stretch;

• align-self : flex-start;

• align-self : flex-end;

• align-self : center;

• align-self : baseline;

6. order

아이템들의 나열 순서를 결정하는 속성이다.
주의해야 할 점은 단순이 시각적으로만 순서를 바꿔줄 뿐이지 때문에 웹 접근성을 보았을때 사용에 주의해야한다. 우리가 보기에만 순서가 바뀔 뿐이지 HTML 구조가 바뀌는게 아니므로 스크린 리더가 읽었을때 의미가 없어지게 된다.

7. z-index

position에서의 z-index와 동일