css display: flex, flex: 1

display flex는 자식 요소들의 정렬을 위하여 사용합니다.

부모 요소에 display: flex를 추가해주면 자식 요소들의 정렬을 제어할 수 있습니다.

자식 요소들이 display: inline 이건 block이건 레이아웃을 설정할 수 있습니다.

 

display: block

display: flex

 

display: flex를 주게 되면 자식 요소들은 자신이 가진 컨텐츠의 크기만큼만 넓이를 가지게 됩니다.

이때 자식요소들에는 width와 height 속성을 부여할 수 있습니다.

원래 inline 속성에는 width, height을 줄 수가 없지만 display: flex를 부모요소에 적용함으로써 위의 이미지와 같이 width, height 을 줄 수 있습니다.

 

flex-direction

자식 요소들의 정렬방향을 제어할 때 사용합니다.

flex-direction:  ['row', 'row-reverse', 'column', 'column-reverse']의 배열값중 하나를 넣어주면 됩니다.

row는 가로방향, column은 세로방향으로 이해하는것이 건강에 좋습니다.

flex-column: row

flex-column: row-reverse

flex-column: column

flex-column: column-reverse

개인적으로 reverse 요소는 꼭 써야하는 경우가 아니라면 선호하지 않습니다. 

코드의 내용과 눈에 보이는 것이 같게 보이지 않아 다른이가 코드를 이해하는데 어려움을 겪을 수 있다고 생각합니다.

 

flex-wrap

자식요소들이 줄바꿈을 필요로 할때 줄 수 있는 옵션입니다.

flex-wrap: ['nowrap', 'wrap', 'wrap-reverse'] 중 하나를 주로 사용합니다.

wrap은 줄바꿈

nowrap은 줄바꿈을 하지 않겠다 입니다.

flex-wrap: wrap

flex-wrap: nowrap

nowrap 에서 확인해야 할것은 개별 요소가 300px을 가지게 했지만 200px로 변경된 모습입니다. 

300*3은 900px 이지만 부모요소의 width에 맞추기 위해 200px들로 수정된 모습을 확인할 수 있습니다.

 

---

 

자식요소들의 넓이, 기본 크기 등을 다루려면 자식요소의 flex property들을 다루어야 합니다.

지금부터 언급이 되는 css 속성들은 자식요소에 부여하는 것 입니다.

 

flex-grow

할당된 공간을 자식들이 어떻게 나눌지에 대한 속성입니다. 비율로 계산이 들어가게 됩니다.

 

flex-grow를 각각 1,2,3 으로 할당하여 영역을 1 : 2 : 3의 비율로 나눠 가진것을 확인할 수 있습니다.

 

 

flex-shrink

공간이부족할때 각 자식들의 영역을 어떻게 줄일지에 대한 속성입니다. 비율로 계산이 들어가게 됩니다.

자식요소들의 넓이를 300px씩 주었습니다.

부모 요소의 넓이는 500px 입니다. 

부모영역에 맞추기 위해 남은 공간을 1 : 2 : 3의 비율로 줄여서 화면에 나오는 것을 확인할 수 있습니다.

 

flex-basis

기본적으로 가지고 있는 값에 대한 속성입니다. auto 혹은 px 단위로 넣어줍니다.

기본값은 auto 입니다.

저는 자식들의 기본 width를 10px씩 부여하고 

각 요소들의 flex-basis 값들을 다르게 설정하였습니다.

화면에 나온 모습은 10px이 아닌 flex-basis의 형태와 같게 나온것을 확인할 수 있습니다.

 

flex 항목에 크기가 지정되어 있지 않으면, flex 항목의 내용물 크기가 flex-basis 값으로 사용됩니다.

 

flex

flex-grow, flex-shrink, flex-basis를 하나씩 추가해서 설정할 수도 있고 

flex만 추가하여서 3개요소를 한 속성에서 제어할 수 있습니다. 

아래와 같은 순서대로 값을 인식하게 됩니다.

 

flex:  flex-grow  flex-shrink  flex-basis

 

사용 예시) 

flex: initial => flex: 0  1 auto

flex: auto => flex: 1 1 auto

flex: none => flex: 0 0 auto

flex: 1 => flex 1 1 0

flex: 2 => flex 2 1 0

 

flex: 양수 => flex-grow는 양수 flex-shrink는 1, flex-basis는 0을 사용하겠다는 뜻

 

저는 flex에서는 축약형을 선호하지 않고 일일히 열거하는 것을 선호합니다.

이 부분은 선호하는 방법대로 작성하시는 것을 추천드립니다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN

 

https://codepen.io/woobottle/pen/XWzorGB

display: flex