[CSS] Flexbox의 속성 정리 (FLEXBOX FROGGY)

https://snupi.tistory.com/154

[CSS] Grid의 속성 정리 (Grid Garden)

 

---

부모 박스

• display: flex;

display: `flex`;
flex-direction: `row-reverse`, `column`, ... 중심축 수평, 수직축 정하기
flex-wrap: `wrap`, ... 줄바꿈
>>> flex-flow: 단축 속성

justify-content: `center`, `flex-end`, `space-between`, `space-evenly`,`space-around`
  , ... 중심축(main axis) 정렬 속성
align-items: `center`, `flex-end`, `stretch`
  , ... 수직축(cross axis)의 아이템 정렬 속성
  // 만약 수직(vertical)에서의 정렬이라면, `부모의 height 값`에서의 정렬을 말한다
  // (흔한 오류: center가 왜 안되지?)
align-content: `center`, `flex-start`, ... 수직축의 컨테이너 사이의 간격 속성

자식 박스

align-self: 아이템 혼자의 `align-items` 속성
order: 자식 태그의 순서 (기본값 0)

flex-grow: 아이템의 커질 때 빈 공간을 가져가는 비율 (기본값 0)
flex-shrink: 아이템의 줄어드는 비율 (기본값 1)
flex-basis: 커지고 작아지기 전 main axis의 크기 (수평(horizonal)이라면, 초기 width)
>>> flex: 단축 속성

 

---

레이아웃 예시

 

기본 Layout

 

<header>Header</header>
<main>
    <article>Article</article>
    <section>
        <aside>Aside</aside>
        <nav>Nav</nav>
    </section>
</main>
<footer>Footer</footer>

 

• main에 `display: flex;` 를 주고 ariticle과 section에 각각 `flex: 4;`, `width: 150px;` 을 준다
• main에 `height: calc(100vh - 200px);` 을 준다 + `width: 80%; margin: 0 auto;`
• 같은 방법으로 section에도 `display: flex;` 를 주고, `flex-direction: column;`으로 주어 flexbox 생성

 

---

Froggy 게임

https://flexboxfroggy.com/#ko

 

 

---

출처 : 드림코딩 엘리, 노마드코더