[코드스피츠/CSS] Display Model, Flex Box

전부 다 정리하기보다는 새롭게 알게 된 것들이나 기억하고 싶은 것들을 정리했다.

풀 강의는 유투브에서 확인하는 것이 좋다. 

 

 

Display Model

---

박스 생성

• display: none;
  • box를 무시할 때 사용

• display: contents;
  • 마찬가지로 box 모델을 무시한다.  
  • 자기 자신의 content를 무시하고, layout 상으로 부모 요소로 승격시켜그릴 수 있다. 

 

 

Flex Box

---

출처: 코드스피츠

justify-content는 메인 축에 적용되는 속성이다. 

• flex-start
• flext-end
• center
• space-between
• space-around

align-items는 cross 축에 적용되는 속성이다. 

출처: 코드스피츠

 

flex는 원래 한 줄을 사용하는 것이 기본값이다.

하지만 flex-wrap: wrap;을 사용하면 부모 콘텐츠 사이즈에 맞춰서 사이즈가 부족할 경우 다음줄로 넘어가서 flex line을 다시 그린다. 이때 이전 flex line 중에서 가장 하단이 큰 놈의 밑에 새로운 flex line을 그린다. 

 

flex-wrap이 적용되야 align-content 속성을 사용할 수 있다. align-content는 wrapping할 때 flex-line을 어떻게 정렬 할 건지를 정의하는 속성이다. 

출처: 코드스피츠

 

 

Flex Item

---

order

order를 사용하면 아이템 순서를 원하는대로 바꿀 수 있다. 아래 코드는 화면에 a, b 순으로 출력될 것 같지만 order 속성에 의해 b, a 순으로 출력된다. 

<div display:flex>
  <div order:2>a</div>
  <div order:1>b</div>
</div>

 

기본값

flex-basis: auto | content

• auto는 현재 모든 브라우저가 content 값을 가리키고 있다.(auto와 content는 같다.)

 

최대로 어디까지 늘릴 수 있는지

flex-grow: 0 | 1~

• 0은 100%를 차지하려고 한다. 
• 나머지는 가중치에 따른 값

 

최대로 어디까지 줄일 수 있는지

flex-shrink: 1

• 1은 밀리지 않고 자기 값을 유지하려고 한다.

참고로, flex-grow 또는 flex-shrink를 사용하면서 max, min 속성을 주면 flex 속성은 무시하고 max, min 값으로 적용된다. 

 

 

flex: initial | none | auto | 1~

• initial: 확장만 되고 축소는 되지 않는다. 
• none: flex가 적용되지 않는 고정된 값이다. 
• auto: flex-grow만큼 커지고, flex-shrink만큼 줄어드는 처리를 할 수 있다.
• 1~: 자식의 순서에 맞춰서 가중치를 부여해준다. 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖