[드림코딩] 프론트엔드 입문편3 - CSS의 Flex Box

#드림코딩 #프론트엔드_입문편

1. float 택스트와 이미지를 배치

• float: left
• float: right
• float: center

2. Flex Box

1) container 안에 item이 있음

• container : display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
• item : order, flex-glow, flex-shrink, flex, align-self

2) 수직과 수평 축

• 왼쪽 부터 오른쪽으로 정렬 main axis ↔ 위쪽 부터 아래로 정렬 cross axis
• 위쪽 부터 아래로 정렬 maim axis ↔ 왼쪽 부터 오른쪽으로 정력 cross axis

3. 실습 HTML

• div.container>div.item.item${$}*10 + Tab

 <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
  </div>

4. 추천 사이트

• COLOR TOOL : 색 조합 찾기 편함
• CSS Tricks for Flexbox : FlexBox에 들어가는 정렬 정리
• MDN Float : float 사용 방법
• MDN Flexbox : Flexbox 사용 방법
• FlexboxFroggy : 개구리 게임으로 배우는 Flexbox

flex-direction: column-reverse;
flex-wrap:wrap-reverse;
align-content:space-between;
justify-content:center

실습은 jsbin.com