오늘은 CSS에서 레이아웃 위주로 배우고 실습해 보았습니다.
우선 display:flex 속성을 추가하면 그 하위 항목들이 한 줄로 붙어서 나열되고 한 블럭처럼 표현됩니다. (원래 줄바꿈을 하던 div 같은 것들도 포함). 그리고 여러 속성들을 추가해 모양을 조절할 수 있습니다.
flex-direction : 하위 항목들의 정렬방향을 조절합니다. default는 row로 왼쪽부터 오른쪽으로 나열합니다. column은 위부터 아래로, row-reverse는 오른쪽에서 왼쪽, column-reverse는 아래부터 위로 나열합니다.
justify-content : 하위 항목들의 나열을 조절합니다. start는 처음에, end는 마지막에 붙이고 center는 가운데로 모읍니다.(한글이나 워드에서 문단정렬과 비슷합니다.) space-between과 같이 처음과 마지막에 맞게 하고 사이를 비우는 것도 있습니다.
align-items : 하위 항목의 수직 방향 나열을 조절합니다. 위의 justify-content와 같은 식으로 조절합니다.
display:flex 속성을 갖는 element(A)의 하위 element(B)에는 flex라는 속성을 추가해 B가 어느 정도의 공간을 차지할 지 조절할 수 있습니다.
flex: 2 1 10px; 에서 2는 grow, 1은 shrink, 10px는 basis가 됩니다. 여기서 A안의 모든 element의 grow 값을 합한 것이 10이면 B는 2/10 = 20%만큼 늘어나게 됩니다. shrink는 반대로 줄어들게 됩니다. 만약 grow가 0이거나 하더라도 최소한 basis인 10px만큼의 크기를 갖게 됩니다.
이런 속성들을 이용해서 여러 항목들을 묶고 간격을 조절하고 나열할 수 있습니다.
