CSS Item Flexbox

드림코딩 엘리님의 유튜브 강의를 보고 정리!!!!🤣

0. item 을 감싸고있는 container 는 역시 display: flex; 여야함!

1. order: 0; // 기본값 0
order 는 item 들의 순서를 지정할 수 있다. 현업에선 별로 사용하지않는다고ㅎㅎㅎ

.item1 {
 order: 0;
}

2. flex-grow: 0; // 기본값 0
flex-grow 는 item 이 container 안에서 할당 가능한 공간의 정도를 선언한다. 형제 요소가 모두 같은 값이라면 형제 모두 동일한 공간을 할당 받고 각각 다른 값이라면 각각 다른 공간을 할당받게 된다.

.item1 {
  flex-grow: 1;
}

3. flex-shrink: 0; // 기본값 0
flex-shrink 는 container가 작아졌을 때, 어떻게 행동하느냐를 지정한다. flex-grow 처럼 형제 요소가 모두 같은 값이라면 형제 모두 같은 크기로 작아지고 각각 다른 값이라면 각각 다른 크기로 작아진다. 값이 클수록 더 작게 작아진다!

.item1 {
  flex-grow: 1;
  flex-shrink: 1;
}

4. flex-basis: auto; // 기본값 auto
flex-basis는 공간을 얼마나 차지해야하는지 좀 더 세부적으로 명시할 수 있게 한다.
auto 로 하게되면 flex-grow 나 flex-shrink 에 지정된 값에 맞춰서 item 이 변형된다. auto 가 아닌 width 값을 지정할 수 있다. (ex. px, %, em, ...)

.item1 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 50%;
}

5. flex: 1 1 50%;
flex-grow, flex-shrink, flex-basis 를 묶어 flex 로 사용한다.

.item1 {
  flex: 1 1 50%;
}

6. align-self: auto; // 기본값 auto
align-self 는 item 별로 정렬할 수 있다. cross axis 기준으로 정렬!

.item1 {
  flex: 1 1 50%;
  align-self: center;
}