[Section1][Publishing] HTML, CSS - 2 [추후 추가 정리 필요]

FlexBox

CSS에서 Layout을 나타낼때 사용하는 기법으로 페이지의 요소들을 쉽고 flex(탄력적, 유연하게)

하게 배치할 수 있게 해준다.

특징으로는 

1. 부모인 flex 컨테이너에서 자식 요소들의 정렬을 조절한다.
2. flex 컨테이너의 방향은 주축과 교차축으로 2가지가 존재한다.

 

사용방법

flexbox를 사용하여 배치할 요소들의 부모 요소에

display : flex; css 스타일을 추가하여 flex컨테이너로 만든다.

flex 컨테이너의 속성

 

• flex-direction 
  플렉스박스 요소들의 주축 방향 설정.
  데이터들이 기본적으로 쌓이는 방향을 설정한다.
  
  속성값
  1. row
  2. row-reverse
  3. column
  4. column-reverse
• flex-wrap
  플렉스박스 요소의 줄바꿈 여부를 설정. (flexbox에서 개념적으로는 둘러싼다고 표현함)
  
  속성값
  1. wrap
  2. wrap-reverse
  3. nowrap
  
  
• justify-content
  플렉스박스 요소들의 주축 방향으로의 정렬 기준 정의 (flex-direction으로 정해진 순서는 유지된다)
  즉, 주축에서 요소들의 나열 방법.
  
  속성값
  1. flex-start (기본값)
  현재 정해진 주축방향 시작점을 기준으로 정렬. 
  
  2. flex-end
  현재 정해진 주축방향 끝점을 기준으로 정렬. 
  
  3. center
  현재 정해진 주축방향 가운데를 기준으로 정렬. 
  
  4. space-between
  주축 방향에서 사이 공간을 기준으로 정렬
  (사이 공간만을 신경 쓰므로 바깥쪽 테두리 여백은 만들지 않음)
  
  5. space-around
  주위 공간을 만들어서 정렬 (바깥쪽 테두리 여백도 만듦)
  그러나, 주축기준 시작점 요소와 끝점 요소의 flex 컨테이너쪽 여백이 요소와 요소 사이의 여백과 다름. (두 요소의 space가 존재하므로 큼)
  
  6. space-evenly
  space-around와 기본적으로 같지만 시작점 끝점의 flex 컨테이너쪽 여백과 요소들 사이사이의 여백이 다른 점만 달라서 모든 요소들의 바깥쪽 여백이 다 같음.
• align-items
  플렉스박스 요소들의 교차축에서의 정렬 방법.
  
  속성값
  1. flex-start
  교차축에서 시작부터 배치
  
  2. flex-end
  교차축에서 끝부터 배치
  
  3. center
  교차축의 범위에서 가운데에 정렬
  
  4. baseline
  요소의 교차축 정렬 기준을 폰트로 한다
  
  5. stretch
  기본값

출처 : https://letsgojieun.tistory.com/49

• align-content
  플렉스박스 요소들의 교차축에서 뭉침 정도와  교차축 시작점 설정
  
  속성값
  1. stretch
  2. center
  3. flex-start
  4. flex-end
  5. space-between
  6. space-around
  
  
  
• flex-flow
  flow-direction, flow-wrap 을 한번에 설정 가능한 속성

flex 요소의 속성

- order
- flex-grow
-flex-shrink
- flex
- align-self


- 유의사항
1. width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.

2. 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.

3. (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.