[CSS] flex 유연한 박스 만들기 / flex-basis/ flex-grow / flex-shrink / flex

아래 속성들은 부모박스에 display:flex; 걸고 자식박스에 직접 적용한다.

flex-basis : 30px	자식박스의 기본 넓이를 설정. 자식의 원래 컨텐츠 사이즈를 유지해준다.
flex-grow : 1;	flex-basis를 제외한 여백 부분을 grow에 지정된 숫자 비율만큼 영역을 나눠 가지겠다.
flex-shrink : 2;	유연하게 줄이기
flex:	한꺼번에 선언. flex-grow의 자리, flex-shrink의 자리, flex-basis의 자리순.

 

 flex-basis 

:유연한 박스의 기본 영역 / 자식박스의 기본 넓이를 설정
  
flex-basis는 flex가 적용된 자식박스(아이템)의 기본 크기를 설정한다. 
flex-basis는 기본적인 넓이를 지정함으로 만약 컨텐츠 중 지정된 크기보다 큰 자식박스가 있다면

자식의 원래 컨텐츠 사이즈를 유지해준다.
만약 지정한 크기보다 컨텐츠가 더 작다면 해당 사이즈로 유동적으로 크기가 지정된다. 

flex-basis: 50px;

지정한 넓이가 컨텐츠보다 작아도,  컨텐츠가 많으면 컨텐츠가 들어가있는 만큼은 매번 유지한다. 

만약 flex-basis 와 width가 함께 지정되면 width가 가진 영역만큼 고정된다.

자식이 width보다 컨텐츠가 더 많은 경우 flex 박스를 뚫고 나간다. 

width: 50px;

flex-basis: 50px;

 width를 물리적으로 줘버리면 영역은 줄어들지만 컨텐츠들이 뚫고 나오게 된다. 

이때 글자의 경우 word-wrap: break-word;를 써주면 컨텐츠 영역에 맞춰 아래로 글자를 내릴 수 있다. 
flex-direction이 row일 경우 넓이가 변하고  flex-direction: column인 경우 높이가 변한다.

[속성값]
   -auto : 기본값. 해당 아이템의 width값을 사용한다. 만약 자식박스의 width가 설정되어 있지 않을 경우 컨텐츠가 차지하는 영역이 기본값이 된다. 
    - 0 : 기본 영역을 없앤다. flex-grow로 영역의 비율을 나눌 때 많이 사용함.
    - px : 고정적인 기본 영역을 지정함.
    - rem / % / content(컨텐츠만큼 차지하겠다는 것)

 

 flex-grow

: 유연하게 늘리기

    
자식박스가  flex-basis의 값보다 커질 수 있는지를 정하는 속성
flex-grow는 기본값이 0이며 0보다 큰 값이 셋팅되면 해당 박스가 유연한(flexible) 박스로 변함.
1이상이면 원래 크기보다 커지며 부모박스 컨테이너의 빈 공간을 메우게 된다. 

grow의 숫자의 의미는 아이템들끼리 flex-basis를 제외한 여백 부분을 grow에 지정된 숫자 비율만큼 영역을 나눠 가지겠다는 의미이다. 

 

그래서 flex-basis가 0이면 기본 영역이 없으므로 모든 컨텐츠 영역을 여백으로 처리하여 원하는 비율대로 컨텐츠 크기를 정할 수 있다. 

flex-grow: 1;

컨텐츠 영역을 제외하고 여백을 1:1:1로 나눠 갖겠다. 

개발자 도구 > 박스는 flex-basis 의 값 화살표는 flex-grow 의 값이다. 

 

flex-shrink

: 유연하게 줄이기

자식박스가 flex-basis 의 값보다 줄일 수 있는지를 정하는 속성
 flex-grow 와 함께 많이 사용됨.

flex-shrink는 숫자로 값을 지정하는데 일단 0보단 큰 값이 셋팅되면 해당 자식박스가 유연한(flexible) 박스로 변하고 flex-basis보다 작아진다. 기본값은 1이기때문에 따로 셋팅하지 않아도 flex-basis보다 작아질 수 있다. 

Container에 공간이 부족해질 때  자식박스의 크기가 얼마나 줄어들 수 있는지 지정하는 값이다.

flex-shrink: 1;

    

 

 

 

flex

: flex-grow, flex-shrink, flex-basis를 한번에 선언할 수 있다.
 
위 세 속성들을 한꺼번에 축약해서 사용하는 속성이다. 세 속성들은 서로 관련이 깊기 때문에 보통 한번에 선언해서 편리하게 사용할 수 있다. 

 

첫 번째 자리는 flex-grow의 자리, 두번째 자리가 flex-shrink의 자리, 세 번째 자리가 flex-basis의 자리다. 
    ex) flex : 1 1 auto;
    ex) flex : 1; -> flex-grow: 1 flex-shrink: 1 flex-basis: 0% 라는 뜻. (균등분배)
    ex) flex : 1 500px; -> flex-grow: 1 flex-shrink: 1 flex-basis: 500px 라는 뜻.

 

 

  /* flex-basis: 25%;

  flex-grow: 1;

  flex-shrink: 1; */

  flex: 1 25%;

flex-basis로 기본 영역은 25% 차지하게 하고 여백은 1씩 나눠갖고 줄어들때도 1씩 줄어들겠다는 의미 

---

 

출처-https://velog.io/@jackma914/CSS-flex-basis-grow-shrink