[100DyasOfCode] 15강

CSS Flexbox Layout Module

flexbox 속성은 float나 position 속성 없이 반응형 레이아웃을 만들 때 유용한 구조이다.

---

예제를 통해 알아보자!

    <header id="container">
      <div>
        <p>Travel Goals</p>
      </div>
      <nav>
        <ul>
          <li>Destinations</li>
          <li>About</li>
        </ul>
      </nav>
    </header>

부모(container) 안에 자식 박스 2개가 있고, 그 중 하나의 자식 박스 안에 또 2개의 <li> 박스가 있는 상태이다.

 

 

부모(container)에 display: flex; 속성을 추가해서 flexbox를 만들 수 있다.

---

flexbox의 다양한 속성들

flex-direction

column(수직 스택), column-reverse, row, row-reverse

 

flex-wrap

웹사이트가 줄어들 때 박스들을 밑으로 밀려나게 할 것인지, 고정할 것인지 결정하는 속성

wrap(박스가 밑줄로 밀려남, width값 X!!), nowrap(박스가 밑줄로 밀려나지 않고 width값이 줄어듬), wrap-reverse

 

flex-flow

flex-direction과 flex-wrap을 동시에 설정하는 속성

 

justify-content

박스들을 컨테이너 안 어느 쪽으로 정렬할 것인지 설정하는 속성

center, flex-start, flex-end, space-around, space-between

 

align-items

컨테이너 height값이 정해져있을 때 박스들을 상하 기준으로 어느 쪽으로 정렬할 것인지 설정하는 속성

center, flex-start, flex-end, stretch, baseline

 

align-content

center, flex-start, flex-end, space-around, space-between, stretch

 

😆 align-content

  justify-content: center;
  align-items: center;

 

 

---

💡 [header]-[nav] 메뉴에 flexbox 개념 적용

    <header>
        <div id = "page-logo"><a href="/index.html">Travel <span>.Dot</span></a></div>
        <nav>
            <ul>
                <li><a href="/places.html">여행지</a></li>
                <li><a href="">소개</a></li>
            </ul>
        </nav>
    </header>

header {
    display: flex;
    justify-content: space-between;

    /* line height값을 높이만큼 주는 것과 비슷 */
    align-items: center;
    padding: 13px 134px;
    position: absolute;
    width: 100%;
    box-sizing: border-box;


}

header ul {
    display: flex;
}