display

display는 요소의 종류를 선택하는 속성이다.
block 형식은 한 줄 모두를 차지하며, 넓이와 높이 설정이 가능하다.
inline 형식은 내용만큼 차지하며, 넓이와 높이 속성을 지정할 수 없다. 또한 margin 속성은 좌우로만 지정할 수 있다.
inline-~ 형식은 inline 요소처럼 표현되지만 block 처럼 사용할 수 있다.

요즘 가장 자주 사용하는 속성은 flex가 아닐까 싶다.
flex 속성은 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 방법을 제공한다.
flex는 Container, Itmes 두 개념으로 나뉜다. Container는 Items를 감싸는 부모 요소이며, 각 Items를 정렬하기 위해선 Container가 필수이다.

Container에는 display, justify-content, align-items 등의 속성이 사용되며,
Items에는 order, flex, align-self 등의 속성이 사용된다.

참고 - CSS3 Flex 완벽가이드

자주 사용하는 속성들에 대해 알아보자.

flex-direction : Items의 주 축(main axis)을 설정합니다. row가 기본 값이다. column으로 설정할경우 주축이 세로 방향으로 바뀌며, 항목들은 열로 나열된다. *-reverse 로 지정하게 되면 시작 방향이 바뀌게 된다.
flex-wrap : 기본 값은 nowrap이며, 항목들의 넓이의 합이 flex 박스의 넓이를 넘어섰을 때, 줄바꿈을 할지 결정한다.
flex-flow : flex-direction 속성과 flex-wrap 속성을 합친 속성으로, flex-direction, flex-wrap 값 순서로 사용한다.
flex-basis : 항목들의 넓이를 설정한다. flex 컨테이너의 flex-basis 기본 값은 'auto'이다.
flex-grow : flex-grow 값을 양수로 지정하면 항목별로 주축 방향 크기가 flex-basis 값 이상으로 늘어난다.
flex-shrink : flex-shrink 속성은 주축의 공간이 부족할 때 각 항목의 사이즈 줄이는 방법을 정의한다.

위 세 속성은 축약형으로 사용할 수 있으며 flex : flex-grow flex-shrink flex-basis 순서로 사용할 수 있다.

flex 축약형 표현에 사용할 수 있는 미리 정의된 축약 값들도 있다.

• flex: initial
• flex: auto
• flex: none
• flex: <positive-number>

flex 항목을 flex: initial로 지정하면 flex: 0 1 auto 로 지정한 것과 동일하게 동작한다. 이 경우, flex 항목들은 flex-grow가 0이므로 flex-basis값보다 커지지 않고 flex-shrink가 1이므로 flex 컨테이너 공간이 모자라면 크기가 줄어든다. 또, flex-basis가 auto이므로 flex 항목은 주축 방향으로 지정된 크기 또는 자기 내부 요소 크기 만큼 공간을 차지한다.

flex: auto 로 지정하면 flex: 1 1 auto로 지정한 것과 동일하며, flex:initial 과는 주축 방향 여유 공간이 있을 때 flex 항목들이 늘어나서 주축 방향 여유 공간을 채우는 점만 다르다.

flex: none으로 지정하면 flex: 0 0 auto으로 지정한 것과 동일하며 flex 컨테이너의 크기 변화에도 flex 항목 크기는 변하지 않고 flex-basis를 auto로 지정했을 때 정해지는 크기로 결정된다.

이 축약형은 더 축약해서 flex: 1 이나 flex: 2처럼 쓸수도 있는데, 이는 flex-grow 만 지정하고 나머지는 1 0으로 사용한다는 뜻이다. 따라서 flex: 2는 flex: 2 1 0와 동일하게 처리된다.

align-items : 교차축(direction이 row라면 y축)에 따른 항목들의 정렬 방법을 정한다.

• flex-start : 교차축의 시작 부분에 나열
• flex-end : 교차축의 끝 부분에 나열
• center : 중앙에 나열
  기타로 baseline, stretch 가 있다.

align-self : align-items가 항목들의 정렬 방법을 정한다면, align-self는 항목의 정렬 방법을 정한다.
justify-content : 주축의 방향에 따른 flex 항목들의 정렬 방법을 정한다.

• flex-start : 주 축의 시작 부분에 나열
• flex-end : 주 축의 끝 부분에 나열
• center : 중앙에 정렬
• space-between : 주축 방향 여유공간을 각 항목들 사이의 공간에 균등 배분
• space-around: 시작 부분 및 끝 부분과 flex 항목간 공간도 균등 배분에 고려하므로 시작 부분 및 끝 부분과 flex 항목 간의 공간의 크기를 1로 배분한다면 flex 항목 사이의 공간은 2로 배분
• space-evenly : 시작 부분과 끝 부분도 동일한 비율로 공간 배분

참고 - cssreference.io, flexbox의 기본개념

visibility

대상을 보이거나 보이지 않게 지정하는 속성으로 visible, hidden, collapse 등을 값으로 사용할 수 있다.
display: none 과 visibility: hidden 을 비교하는 질문이 나올 수 있다.
display: none은 공간을 차지하지 않고, visibility: hidden은 공간을 차지한다.
즉, display는 레이아웃의 변화를 야기하기 때문에 reflow, repaint 가 발생하지만, visibility 는 레이아웃에 영향을 주지 않으므로 repaint만 발생한다.