flexbox

css selector

• #label.center {…}
  #label이면서 .center인 엘리먼트 선택

• #label .center {...}
  #label의 자손 요소 중 .center인 엘리먼트 선택

flexbox

flex-container에 주는 속성

• flex-direction: 주축 설정
  row(default), row-reverse, column, column-reverse

• justify-content: 주축을 기준으로 정렬
  flex-start(default), flex-end, left, right, space-around, space-between, space-evenly 등

• align-items: 교차축을 기준으로 정렬
  stretch(default), flex-start, flex-end, center, baseline(텍스트에 균등하게 아이템 배치), inherit,initial, unset

• align-content: 교차축을 기준으로 정렬
  normal(default), flex-start, flex-end, center, stretch(default), baseline 등
  아이템의 크기가 크거나 개수가 많아서 여러줄에 걸쳐 나타날 경우, 각 줄에 대한 공백을 설정한다.

• flex-wrap: 주축을 기준으로 정렬
  nowrap(default), wrap, wrap-reverse
  아이템이 컨테이너 영역을 벗어날 경우, 같은 줄에 배치시킬 것인지 여러줄로 나누어 표현할지를 설정한다.

• flex-flow
  flex-direction, flex-wrap 속성을 한 번에 정의한다.

flex-item에 주는 속성

• flex: flex-grow, flex-shrink, flex-basis
  display: flex;를 설정하면 기본적으로 flex:0,1,auto로 설정된다.
  0은 flex-grow 값이고, 컨테이너에 빈 여백이 있을때 아이템의 크기를 늘리지 않겠다는 의미이다.
  1은 flex-shrink 값이고, 컨테이너의 크기가 줄어들때, 같은 비율로 줄이겠다는 의미이다.
  auto는 flex-basis이고, 절대 혹은 상대 단위가 아닌 auto로 설정되어 있으므로, 아이템의 콘텐츠 크기만큼 주축의 크기를 차지한다.

• flex-grow (default 0)
  모든 아이템의 flex-grow 값이 1이면 컨테이너가 커질때 같은 비율로 늘어난다. 모든 아이템의 flex-grow 값이 같고 1보다 큰 경우도 같은 비율로 늘어난다.

• flex-shrink와 flex-basis (기본값 각각 1, auto)
  flex-basis와 flex-shrink를 활용한 사례는 다음과 같다. holy-grail-layout의 경우, 컨테이너의 크기를 줄일때 nav, aside의 크기는 고정되어 변하지 않고, main 영역만 줄어든다.

<style>
  nav,aside{
  /*flex-basis값이 있고, flex-shrink=0일 경우,컨테이너의 크기를 줄여도 해당 아이템의 너비값은 유지되고, 
  flex-shrink가 0이 아닌 아이템만 줄어든다.*/
    flex:0 0 200px;
  }
</style>

<div id="container">
  <header>
     <h1>생활코딩</h1>
  </header>
  <section class="content">
    <nav>
      <ul>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
      </ul>
    </nav>
    <main>It is a long established fact. It is a long established fact</main>
    <aside>AD</aside>
  </section>
  <footer><a href="www.naver.com">네이버</a></footer>
</div>

• order (default 0)
  아이템의 개별적인 순서를 바꾸고 싶은 경우, order 속성을 사용할 수 있다. order 속성이 일치하는 경우, 소스코드 순서에 따라 배치된다. 만약, 다른 아이템의 order 속성은 변경하지 않고, 한 아이템을 가장 먼저 배치하고 싶다면, 그 아이템에 "order = -1" 속성을 적용하면 된다. 이 경우, 다른 아이템들은 기본값인 0이므로 소스코드 순서대로 이어서 배치된다.
  그러나, order 속성을 이용하면 화면 속 콘텐츠의 순서와 실제 DOM 순서가 일치하지 않으므로 사용자 접근성에 문제가 발생한다. 탭키를 이용할 경우, 화면 순서와 다르게 이동하거나 스크린 리더 등 보조 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있다.

• align-self (default auto)
  이것은 align-items의 값을 우세하여 적용된다. (The align-self CSS property overrides a grid or flex item's align-items value)