flex02 justify-content, flex-wrap, align-item

스터디용, 기록용 입니다. 혹시나 잘못된 정보가 있다면 comment를 남겨주시면 감사하겠습니다.^^

justify-content

justify-content: 는 매인축방향(가로)이다.

justify-content: flex-start; 가 기본값이고(좌측 시작)
justify-content: flex-end; 우측정렬
justify-content: center; 가운데 정렬이 가능하다.

.item:first-child {
            margin-right: auto;
        }

위 상황에서 이렇게 코드를 추가해도 우선순위가 있기때문에 사진과같이 정렬이 된다.

flex-wrap: wrap;

        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .item {
            flex-basis: 200px;
            flex-shrink: 1;
        }

부모에게 flex-wrap: wrap;을 걸어주면 부모의 높이가 커지면서 넘치는 item은 아랫줄로 줄바꿈을 하게된다. 이것은 flex-basis: 200px이 보장된다는 것으로 flex-shrink: 1; 이 기능은 하지만 없어도 괜찮다는 의미가 된다.

align-item

        .item:nth-child(3) {
            background-color:yellowgreen ;
            height: 500px;
        }

우선 align-item은 Y축, 세로정렬 property라고 보면 된다.

사진같은 경우 이것을 보는 순서가 중요하다.
1. 3번째 item의 높이를 300으로 키워준다.
2. 부모의 height값이 auto이기때문에 같이 커진다.
3. 부모의 높이가 커짐으로써 자식들 모두 높이가 커진다.
align-items: normal; 이기때문인데
이것은 align-items: stretchl; (늘이다) 랑 동일하다고 볼 수 있다.

          justify-content: center;
          align-items:center;
          height: 600px;

부모에게 이렇게 height값을 주고 justify-content: 가로 가운데정렬. align-items: 세로 가운데정렬 을 적용시켜 브라우저 크기에 맞게 가운데에 정렬시키는것도 가능하다.

item에게 margin: auto; 를 걸어 이렇게 정렬하는것도 가능하다.

.sidebar {
	flex-basis: 200px;
	flex-shrink: 1
}

.contents {
flex-basis: 0;
flex-shrink: 1;

flex-shrink: 를 0으로 고정하지 않고 1로 놓더라도
contents의 flex-basis가 0이기 때문에 콘텐츠의 크기만큼 자동 으로 줄바꿈이 되어 sidebar각 작아지지 않는다.

 .sidebar {
	flex-basis: 200px;
	flex-shrink: 1
}

.contents {
	flex-basis: 0;
  flex-shrink: 1;
	flex-grow: 1;
	min-width: 0;

최종적으로 grow:1;을 주어 여백을 채워주고
min-width:0; 으로 컨텐츠 크기와 상관없이 만들어주기. 이렇게 추가해주는 것이 제일 이상적이다.