flex 01 basis, grow, shrink, min-width

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

display:flex;

가로배치하고싶은 요소의 부모에 적용,
부모를 flex container라 부르고 자식들을 flex items 라 한다. content의 크기만큼만을 남긴다.
(가로로 정렬되어 content 크기만큼만 공간을 차지한다 하여 inline-block이라 착각을 하면 안된다. display: flex;는 자식요소를 가리지않고 저와같은 형태로 만든다.)

flex-basis

flex-basis 기본값은 auto;
여기에서 하나의 content를 선택하여 크기를 키워줄 수 있는데 flex-basis:200px;을 주면 크기가 200px만큼 커지게 된다.

방향에 해당하는 콘텐츠의 크기.

여기서 중요한것은 방향이다.
basis라는것이 한 방향으로 정해져있는것이 아니라
flex-direction: row;, column;, 이렇게 direction에 따라서 바뀌게된다.

flex-grow

flex-grow:0;이 기본값으로 각 content들이 차지하는 비율정도로 말할 수 있을 것 같다.
flex-grow: 1;을 각 content에 적용시 남은 여백을 균등한 비율로 나눠갖게된다.

        .item {
            background-color: cadetblue;
            border: 1px solid white;
            flex-grow: 1;
        }
        .item:nth-child(2) {
            flex-grow: 2;
        }

앞서 말한대로 grow는 비율이다. 남은 여백을 모두 똑같이 나눠갖고자 하는 경우 grow의 숫자는 1이상이기만 하면 되지만 코드와 같이 하나의 item을 지정하여 키워줄 수도 있다. 이렇게 될 경우 1:2:1:1:1 만큼 공간을 차지하게 되는것이다.

        .item {
            background-color: cadetblue;
            border: 1px solid white;
            flex-grow: 0;
        }
        .item:nth-child(2) {
            flex-grow: 2;
        }

이럴 경우 2번째 item의 grow값은 0제외, 1이나 그 이상이나 달라지는것은 없다.

.item {
flex-grow: 1;
}

flex-basis: auto; flex-grow:1; 은 남은 여백을 균등하게 배분하는것이라 그 item content의 크기가 크다면 그만큼 차지하는 공간은(content크기+여백) 크다.
하지만 flex-basis: 0; flex-grow: 1;을 주게된다면 content의 양과는 상관없이 균등하게 공간을 차지하게 된다.

flex-shrink 들어가기 전

flex-basis를 200만 주었다 하여도 브라우저 창이 200보다 더 작아진다면 화면과 같이 남아있는 여백은 2번째 item밖에 없기 때문에 스크롤바가 생기는것이 아니라 2번쨰 item의 크기가 줄어든다.

flex-shrink;

이럴 때 사용할 수 있는 property가 flex-shrink이다.
기본값은 flex-shrink: 1; 이고 이것을 flex-shrink:0; 으로 주게되면 basis로 준 넓이를 보장해주게되고 브라우저크기가 줄어들어도 2번째 item은 줄어들지 않고 스크롤바가 생기게 된다.

        .item:nth-child(1) {
            flex-basis: 500px;
            flex-shrink:1
        }
        .item:nth-child(2) {
            flex-basis: 500px;
            flex-shrink: 2;
        }

문제는 2개 이상의 item에 shrink값을 양수로 주었을 때인데 브라우저의 화면이 넉넉할 경우 basis값을 유지하지만 화면이 축소되어 브라우저가 basis값들의 전체 크기보다 작아지기 시작하면 shrink를 입력한 item들도 작아지기 시작한다.
여기서 nth-child(1)은 flex: shrink값이 1, nth-child(2)은 flex: shrink값이 2인 상황. 1 대 2 비율을 유지할 것이라 생각했는데 반대였다. 몇배속으로 줄어드는지?라고 하는 표현이 맞을까 싶다. 나중에 분명 또 여기서 헷갈릴듯

특정 item(content)만 움직이기

        .item:last-child {
            margin-left: auto;
        }

margin-left: auto; 마진 auto란 선택자 기준 어떠한 방향으로 여백을 몰아준다.. 라는 느낌으로 기억하면 좋을것같다. 사진과 같이 우측 끝 하나의 flex상자만을 옮기고 싶을 때 margin-left: auto; 를 주게되면 '마지막 item 좌측으로 여백을 몰아준다.'

응용

        .item {
            background-color: cadetblue;
            border: 1px solid white;
            margin: 0 auto;
        }

모든 item에게 좌우마진을 주어 이런 사진과 같은 정렬도 가능하다.

min-width: auto; 내부의 컨텐츠 크기; (기본값)

flex-item은 contents의 내부크기만큼 크기가 강제된다.
그래서 flex-basis: 0; 코드를 적용시켜도 그림과같이 상자들이 살아있는것을 볼 수 있다. 이것이 min-width: auto; 기본값 떄문이다.
이것을 0으로 해주면 글씨(contents)가 박스를 벗어나는것을 볼 수 있다.

            flex-basis: 0;
            min-width: 0;
            flex-grow: 1;

min-width: 0; 을 적용시키면 '내부컨텐츠의 크기 유지'라는 조건을 내려놓기때문에 flex-grow:1;을 사용하여 컨텐츠 크기와 상관없이 균등하게 만들 수 있다.

flex1탄