6. Responsive Web Design - CSS Flexbox

6번째 Chapter는 CSS Flexbox입니다. 그리 내용이 많지는 않아서 1시간이면 충분히 학습하실 수 있는 분량으로 보입니다.

• Use display: flex to Position Two Boxes
  • flex는 기본적으로 특정 공간에서 한 방향으로 element들이 어떻게 위치할지를 정하는 방식입니다.
  • 따라서 본문에서 display: flex값을 넣으면 기본값인 row방향으로 2개의 element가 배치하게 되는 것입니다.
  • 앞서 설명했듯이 div는 기본적으로 block속성을 갖고 있어서 한 행을 차지하게 되어 옆에 다른 원소가 오지 않습니다만, display: flex로 주면 flex의 영향을 받아 row 방향으로 배치됩니다.
• Add Flex Superpowers to the Tweet Embed
  • flex는 해당 element의 자식 들에게 영향을 미치는 값입니다. 잘 기억해두시기 바랍니다. css property를 갖는 값 뿐만 아니라 자식의 자식들에게는 영향을 미칠 수 없습니다.
• Use the flex-direction Property to Make a Row
  • flex는 2차원 공간에 layout을 하게 해줍니다. 가능한 방향은 가로(row방향), 세로(column방향) 및 정방향과 반대방향이 있습니다.
• Apply the flex-direction Property to Create Rows in the Tweet Embed
  • flex-direction: row; 를 header와 footer element에 주면 되는 문제이나, row가 default값이라 넣나 넣지 않나 동일 합니다.
• Use the flex-direction Property to Make a Column
• Apply the flex-direction Property to Create a Column in the Tweet Embed
• Align Elements Using the justify-content Property
  • justify-content를 잘 해석하는게 중요합니다. justify는 (인쇄되는 텍스트의) 행의 끝을 맞추다 라는 의미가 있습니다. 앞서서 한번 언급한 적이 있습니다. 앞에서는 text-align에서 justify라는 값을 주어 행 전체의 글씨가 배열되도록 한 적이 있습니다. 참고로 행 전체에 글씨가 배열되는 것도 방식이 여러가지입니다. text-jusify property를 참고하시길 바랍니다.
  • justify-content는 content를 justify하는 것입니다. 여기서 content는 display: flex의 적용을 받는 element의 자식을 의미하게 됩니다. 그리고 여기서 말하는 행(언급되는 바로는 main axis)은 당연히 content가 되므로 flex의 방향이 row일때는 가로 방향, column일 때는 세로 방향이 되겠습니다.
• Use the justify-content Property in the Tweet Embed
  • space-between, space-around, space-evenly는 이와 같은 의미를 고려하고 어떤 기능일지가 명확해 보입니다. 나머지인 center, flex-start, flex-end는 그 자체로 의미가 명확하기 때문에 이로서 6가지 값 모두 이해를 하실 수 있습니다.
• Align Elements Using the align-items Property
• Use the align-items Property in the Tweet Embed
  • align-items는 justify-content와는 다룬 축 방향의 배열을 도와주는 property입니다. 여기서 align의 방향은 justify-content와 cross되는 방향, 즉 flex-direction이 column일 때 row 방향이 됩니다.
  • 여기서 알아두면 좋은 것은 items가 가리키는 게 무엇이냐는 것입니다. 여기서 items는 사실 box-model 상의 content를 의미하는 것으로 보입니다. content는 글씨나 그림 등을 내용을 의미하는데, 여기서 align-items값의 초기값인 stretch, 즉 펴서 보여주는 것을 제외한 나머지들은 content의 위치를 지정하고 있습니다.
• Use the flex-wrap Property to Wrap a Row or Column
  • wrap, 즉 감싸기를 하려면 감싸는 것(보자기)과 감싸지는 것(도시락)이 필요합니다. 감싸는 것은 하나의 행, 혹은 Width 100%의 block으로 생각하시면 될 것 같고, 감싸지는 것은 개별 Flex Item이라고 생각하시면 되겠습니다.
  • default인 nowrap상태에서는 감싸줄 것이 없기 때문에 하나의 행에 모두 들어가게 되는 것이고 wrap에서는 도시락들이 이미 보자기에 담길 만큼이 되면 감싸버리기 때문에 다른 도시락을 안에 더 넣을 수 없게 됩니다. 즉, 다른 도시락 들은 다른 보자기에 감싸지도록 만들어 버리게 되어 행이 바뀌게 됩니다.
• Use the flex-shrink Property to Shrink Items
  • flex와 관련된 property는 크게 2가지로 나뉩니다. 자식에게 영향을 미치는 property(display: flex, justify-content, align-items 등)과 자기 자신에게 영향을 미치는 property(flex-shrink 등)로 나뉩니다. 그 첫번째 property인 flex-shrink 입니다.
  • 설명만 보고 이해하기가 힘들 수 있는데, 여기서 shrink는 원래 자기가 가질 크기에 대비해서 얼마나 작아질지에 대한 이야기 입니다.
  • box-1과 box-2 모두 100% width를 갖고 있는데 이 상황에서 box-1에 flex-shrink를 3으로 주면 default값인 flex-shrink: 1을 가진 box-2보다 3배 더 작아지겠다는 것입니다.
• Use the flex-grow Property to Expand Items
  • flex-grow는 얼마나 items을 넓힐 수 있는지에 대한 것으로 기본값은 0이라 값을 따로 세팅 하지 않으면 커지지 않습니다.
  • 초기값에 width가 없어 보이지 않았다가 flex-grow를 1을 box-1, 2 에 주니 반반씩 자리를 차지하게 됩니다.
  • 이 때 flex-basis값이 있다면 이 값을 제외하고 items가 차지하지 못하고 있던 공간을 flex-grow값의 비율로 나눠 갖는다고 보시면 됩니다.
• Use the flex-basis Property to Set the Initial Size of an Item
  • flex-basis의 기본값은 0이기 때문에 기본적으로 display: flex의 적용을 받는 child 들의 크기는 0이 됩니다.
  • flex를 어차피 쓸 것이면 flex-direction이 row인 경우에는 width, column인 경우에는 height값을 변경하지 말고 flex-basis 값을 수정하는 것이 좋아 보입니다.
• Use the flex Shorthand Property
  • 축약형은 편하긴 하나 순서를 항상 잘 기억하고 있어야 합니다. flex-grow flex-shrink flex-basis 순입니다.
• Use the order Property to Rearrange Items
  • order를 사용하면 arrange되는 순서를 바꿀 수 있습니다. html은 고정되어 있는데 동적으로 순서를 변경 해야되는 경우 쓰일 것입니다.
• Use the align-self Property
  • flex item은 float, clear, vertical-align property의 적용을 받지 않습니다.
  • align-items는 자식들에게 영향을 미치는 property임에 반해 align-self는 자기 자신에게 영향을 줍니다. 따라서 우선순위는 align-self가 높습니다.

flex에 관해서는 1분 코딩의 이번에야말로 CSS Flex를 익혀보자 를 읽어보시는 걸 추천합니다. page 내에서 flex attribute가 어떻게 동작하는지 볼 수 있어서 머리 속에 넣기 정말 좋습니다. 저는 다른 프로젝트를 하면서 레퍼런스 용으로 활용하고 있습니다.