Skip to content

Latest commit

 

History

History
249 lines (147 loc) · 4.2 KB

04_Grid_System.md

File metadata and controls

249 lines (147 loc) · 4.2 KB

Grid System



HTML / CSS 배치

  • 배치 핵심

    : 왼쪽 위에 쌓인다 (박스모델)

    • 어떻게?
      • block
      • inline

  • 배치 흐름을 바꾸는 방법

    • float
    • position
      • flex: flexible box


flex

flex 이전에는 배치를 위해서 float , position 지정을 해야했음


img


flex 주요 개념

  • container
  • item
<style>
    .container {
        display: flex;
    }
</style>


<div class="container">
    <div class="item"></div>
    <div class="item"></div>
</div>

  • 축

    • main axis

      : 주축

      • flex-direction: row; 일 때 가로 축
      • flex-direction: column; 일 때 세로 축
      • flex-direction: column-reverse; 일 때 밑에서 위로 올라가는 세로 축
      • flex-direction: row-reverse; 일 때 오른쪽에서 왼쪽으로 가는 가로 축

    • cross axis

      : 크로스축



flex 정의 시

  1. 모든 항목들은 main axis (주축)을 기준으로 배치가 시작됨
    • 기본은 row
    • 만약, row-reverse로 지정하게 되면, 오른쪽 끝부터 배치가 시작됨
  2. 모든 item은 기본적으로 row를 기준으로 배치됨
    • flex-direction : row 값으로 기본 설정 됨
  3. 모든 item은 cross axis를 모두 채운다
    • 높이를 모두 채운다
      • align-items: stretch; 가 기본값이기 때문
  4. 모든 item은 본인의 너비 혹은 content 영역만큼 너비를 가지게 된다
    • 경우에 따라서, 본인이 지정받은 너비보다 작을 수 있다
      • flex-wrap: nowrap 이 기본값이기 때문
      • ex) 전체 item의 너비의 합이 container의 너비보다 작을 때 보다 작을 때
  5. 각 영역은 content 크기 / 너비만큼 영역을 차지함
    • 더 작을 수도 있음!
  6. 모든 영역은 cross axis (크로스 축)을 채우고 있는 모습임

image-20200323112512435



flex 속성


1. flex-wrap

  • 기본 값 nowrap
    • 한 줄안에 무조건 담는다
  • wrap
    • 각각의 너비만큼 가지게 되고 자리가 없으면 밑으로 내려감
    • 흘러 넘치지 않게 설정해주는 것!
  • wrap-reverse
    • Items wrap round to additional lines in reverse

2. flex-grow

flex-grow는 남은 너비를 각각 비율로 나눠서 가져감

  • 기본값 0

3. flex-flow

Shorthand property for flex-direction and flex-wrap

  • 기본값 row wrap

    image-20200323132416926

  • row-reverse nowrap

    image-20200323132522691

  • column wrap-reverse

    image-20200323132557885

  • column wrap

    image-20200323132931108


4. justify-content

main 축을 기준으로 정렬한다

  • 기본값: flex-start
  • flex-start
  • flex-end
  • center
  • space-around
  • space-between
  • space-evenly

5. align-items

crosss 축을 기준으로 정렬한다

  • stretch

    : 기본값

  • flex-start

    : 상단 정렬

  • flex-end

    : 하단 정렬

  • baseline

    : items are aligned such as their baselines

  • center

    : 중앙 정렬

    image-20200323135424441


6. align-content

Sets the distribution of space between and around content items along a flexbox's cross-axis or a gird's block axis


align-content has no effect when there is onlyl one line of flex items!


  • 기본값: stretch

  • flex-start

  • flex-end

  • center

  • space-between

  • space-around

    image-20200323135336671


7. order

item의 순서를 정의할 수 있다

  • 기본값: 0
  • 음수값도 가질 수 있음

8. align-self

item에 직접 align을 지정할 수 있음



flex는 margin-top: auto가 가능하다!



Wrap-up

  • justify - main 축

  • align - cross 축

  • content - 여러축

  • items - 한 줄

  • self - 개별요소