CSS 레이아웃

1. display:flex

• 부모 박스요소에 display: flex를 적용해, 자식의 박스의 방향과 크기를 결정하는 레이아웃 구성방법.
• display: flex가 적용된 부모 박스의 자식요소는 왼쪽부터

2. flex-direction

• flexbox는 박스가 수직으로 분할되는 것이 기본값.
• 그러나 방향을 설정해주면, 수평으로도 분할할 수 있음.
• flex-direction 속성은 부모박스요소에 적용함.
• 자식 박스에 특별한 속성을 주지 않아도, 부모 요소에 의해 자식용소가 영향을 받음
• 속성: row(기본값), column
• 자식요소 flex 기본값 - flex: 0 1 auto

3. flex: grow shrink basis

• 자식박스에 어떠한 속성도 주지 않으면, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됨. 자식요소의 flex 속성을 추가 하지않으면 다음과 같이 기본값 적용

flex: 0 1 auto;

• margin, padding의 속성처럼 따로 지정할 수 있음.

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

3.1 grow

• grow,shrink는 속성의 단위가 없고, 비율에 따라 달라짐
• 부모 박스안의 n개의 자식 박스가 있다고 가정
• 각 자식 박스가 갖는 총합은 n
• grow 속성을 1로 설정하는 것은 1/n 가로 또는 세로길이를 적용한다는것
• grow 속성의 값을 2로 지정하면, 2/n의 길이
  
• 위의 코드는 클래스 target flex 속성을 주어 레이아웃을 변경해 주었다.
• grow가 1인 경우 자식박스의 가로크기는 100%지만 다른 자식박스들로 인해 80% 정도만 주어진 걸 알 수 있다.
• 다음 클래스 box에 flex 속성을 주어진 경우
  
• 다음은 box와 target 클래스의 속성을 다르게 주었을 경우
  
• box의 flex 1 1 auto로 속성을 주었고, target은 flex: 2 1 auto 로 주었다. 자식들의 요소의 크기는 1대1로 주어졌지만, target의 flex속성의 grow가 2로 지정해줘서 2+1+1= 4
  target 크기는 전체의 50%를 차지하게 됩니다.

3.2 shrink

• grow 속성과 반대로 설정한 비율만큼 박스 크기가 작아짐
• shrink속성을 함께 사용하는 일은 추천하지 않음
• 비율로 레이아웃을 지정할 경우 flex: grow 1 auto와 같이
  grow값만 변경하는 걸로.
• flex-shrink 속성은 width나 이후 설명할 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어려움
• 기본값인 1로 두고 사용하는게 좋다.

3.3 basis

• 자식 박스가 grow나 shrink에 의해 변경이 있기 전에 가지는 기본 크기.
• flex-grow:0 일 때, basis크기를 지정하면 그 크기는 유지
  
• 위의 코드를 보면 left 클래스에 grow는 0, basis에 100px를 주어 left는 100px의 크기만 갖고, 크기의 나머지는 right가 갖게 된다.
• 참고
  • width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됨
  • 콘텐츠가 많아 자식박스가 넘치는 경우, width가 정확한 크기를 보장하지 않음
  • flex-basis를 사용하지 않는다면, 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width 사용추천

4. 콘텐츠 정렬 방법

• flexbox를 원하는 대로 제어하기 위해선 axis의 개념에 대한 이해 필요
• axis는 main axis와 cross axis로 구분
  • main axis는 flex-direction 속성에 의해서 결정됨.
  • 기본값인 경우 main axis는 가로축
  • cross axis는 main axis와 수직을 이루는 방향. 위와 같이 가로인 경우 cross axis는 세로가 됨.
• 이 axis들을 기준으로 정렬할 수있는 속성들에 justify-content와 align-items가 있음
• justify-content속성은 main axis를 기준으로 정렬
• align-items 속성은 croos axis를 기준으로 정렬

4.1 콘텐츠 수평정렬(justify-content)

• 부모박스에 justify-contnent속성을 적용하면, 자식 박스를 수평으로 정렬할 수 있음. 다음은 justify-contnent속성들
  • flex-start: 왼쪽에서부터 수평정렬
  • flex-end: 오른쪽에서부터 수평정렬
  • center: 가운데를 기준으로 수평정렬
  • space-between: 자식사이를 띄워서 수평정렬

4.2 콘텐츠 수직정렬(align-items)

• 수직으로 정렬
  • flex-start: 위를 기준으로 수직으로 정렬
  • flex-end: 아래를 기준으로 수직으로 정렬
  • center: 수직정렬해서 가운데
  • stretch: 수직 전체를 채움

###참고

BEM 방법론(CSS 방법론)

프로토타입 프로그램
제플린, 피그마