- box-sizing
- display: flex란?
box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 지정한다.
box-sizing: content-box
: content-box는 기본 css 박스 크기 결정법을 사용한다. 요소의 너비를 100px로 설정하면 컨텐츠 영역이 100px를 갖고, 테두리와 안쪽 여백은 이에 더해진다.box-sizing: border-box
: border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려한다. 너비를 100px로 설정하고 테두리와 padding을 추가하면, 컨텐츠 영역이 줄어들어 총 너비 100px를 유지한다.
위 화면을 통해 동일한 너비의 크기가 서로 다른 속성의 값으로 달라지는 것을 볼 수 있다.
display: flex속성은 flex 컨테이너에서 사용 가능한 공간에 맞게 flex 항목을 늘리거나 줄이는 방법을 설정한다.
flex는 레이아웃 배치 전용 기능으로 고안되었다. 그래서 float과 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능이 많다.
컨테이너가 flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것이다.
다시말해, flex의 속성은 2가지로 나뉠 수 있다.
- display: block <-> display: flex의 차이는 flex는 컨텐트의 내용만큼만 차지하지만, block은 컨텐트의 내용과 상관없이 끝까지 차지한다.
row
로 x축을 기준으로 아이템이 왼쪽부터 순서대로 배치된다. (A-B-C )row-reverse
: row뒤에 reverse를 보고 유추할 수 있듯이, x축을 기준으로 하는 것을 똑같지만 x축의 우측에서부터 순서대로 배치된다.( C-B-A)column
: column은 위 2개의 값과는 다르게 y축을 기준으로 배치를 한다. y축의 상단부터 아이템이 순서대로 배치된다.column-reverse
: y축을 기준으로하며 하단부터 순서대로 배치된다.nowrap
으로 말 그대로 줄바꿈을 하지않고 컨테이너의 영역을 넘어서까지 배치된다.wrap
: wrap은 컨테이너를 넘어서 배치되지 않게 줄바꿈을해서 배치한다.wrap-reverse
: wrap과 마찬가지로 줄바꿈을해서 배치하지만, 컨테이너 하단에서 아이템들이 좌->우 방향으로 배치되며 줄바꿈은 윗 줄로 줄바꿈된다.
justify-content
: x축을 기준으로 정렬하는 속성align-items
: y축을 기준으로 정렬하는 속성align-content
: y축을 기준으로 여러 행을 정렬하는 속성
justify-content
의 기본값은 flex-start
로 flex-direction
의 값이 row면 x측을 기준으로 좌->우 정렬을 한다. column이면 상->하 정렬을 한다.
flex-end
: 아이템들을 끝점으로 정렬한다.( A-B-C)
center
: 아이템들을 x축 가운데로 정렬한다.
space-between
: 아이템들 사이에 균일한 간격을 만들어준다.(A=B=C)
space-around
: 아이템들 좌우로 균일한 간격을 만들어준다.(=A==B==C=)
space-evenly
: 아이템들 사이와 양 끝에 균일한 간격을 만들어준다.(=A=B=C=)
align-items
의 기본값은 stretch
로 아이템들이 yx축을 기준으로 끝까지 늘어난다.
center
: 아이템들이 y축을 기준으로 가운데 정렬을 한다.
flex-start
: y축을 기준으로 상->하 정렬을 한다.
flex-end
: y축을 기준으로 하->상 정렬을 한다.
baseline
: 아이템들을 텍스트 베이스라인을 기준으로 정렬한다.
align-content
은 x축을 기준으로하는 justify-content의 값들의 기능은 동일하고 y축을 기준으로 하는 차이점이 있다.
그리고 처음에 align
은 align-items
와 align-content
2개가 존재해서 차이가 뭔지 궁금했는데, align-content
는 align-items
와 달리 flex-wrap의 값을 wrap으로 적용해야 된다는 차이점이 있었다.
order
: 각 아이템들의 시각적인 나열 순서를 결정하는 속성이다.
숫자값이 들어가며, 작은 숫자가 먼저 배치된다. 단, '시각적' 순서이므로 HTML 구조 자체를 변경하는 것이 아니므로 접근성 측면에서 주의해야한다.z-index
: z축 정렬을 할 수 있다. x축-가로, y축-세로, 'z축-높이'. 숫자가 클수록 다른 아이템의 위로 올라온다.align-self
: align이라는 단어를 통해 y축 정렬이 된다는 것을 유추할 수 있다. 단, align-self는 개별 아이템을 y축 정렬을 한다.(align-items보다 우선순위가 높다.)
align-self:auto를 적용하면 부모의 align-items값이 적용된다.
align-self의 다른 값들은stretch
,flex-start
,flex-end
,center
,baseline
이 있고 효과는 align-items와 같다.flex-basis
: flex-basis는 Flex 아이템의 기본 크기를 설정한다.(flex-direction이 row일 때는 너비, column일 때는 높이)
기본값은 auto는 해당 아이템의 width값이 적용된다.flex-grow
: flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다. 기본값은 0이며, 1을 적용하면 빈 공간을 메움. 만약 여러 개의 아이템들에게 값을 적용하면(1 / 2 / 1) 비율로 계산하여 1 : 2 : 1크기로 메워진다.flex-shrink
: flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다. 기본값은 1이기 때문에 아이템이 flex-basis보다 작아진다. 0으로 적용하면 작아지지 않기 때문에 width값을 주면 고정폭을 가진 컬럼을 만들 수 있다.