[CSS] 배치(position)와 정렬(flex)

Nine·2022년 3월 2일
0

css

목록 보기
1/2
post-thumbnail

배치 (Position)

  • 요소의 위치는 반드시 반드시 어떠한 기준을 잡고 설정해야 해요!

    속성기능구체적 내용
    position요소의 위치를 지정기본 : static / 가능값 : relative(요소 자신 기준), absolute(부모 요소 기준), fixed(뷰포트 기준), sticky(스크롤 영역 기준)
    top bottom left right위치 지정기본 : auto, 가능값 : 양수 음수

    ❗️❗️ position : relavtive를 이용하는 배치는 거의 사용하지 않아요. 대부분 absolute 써요. 다른 요소들의 위치가 혼동이 올 수 있기 때문이예요.


  • relative를 쓰면 동급 친구들과의 상호작용이 유지됩니다.

  • 반면에 absolute를 쓰면 동급 친구들과의 상호작용이 무너집니다.

  • position : absolute를 쓰려면 위치상 부모 요소를 지정해줘야 해요. 따라서 구조 상에서 부모한테 position: relative를 써줘야해요. ( position : relavtive 는 대부분 이 때만 사용됩니다.)

  • 개념이 헷갈릴 수 있어요. 부모를 계속 찾아간다고 생각하세요. 부모를 찾아갔는데 그 부모가 position : 값으로 지정이 되어있다면 사용가능하겠죠?

    ※ absolute(부모 요소 기준), fixed(뷰포트 기준)를 사용하면 display: block이 기본적으로 적용됩니다.


    정렬 (flex)

  • 수평, 수직 정렬을 위해 사용합니다.

  • 부모 요소에 dispaly : flex; 주면 child들이 수평정렬 됩니다. 그러면, 부모를 flex container라고 부르고 child들을 flex items라고 부릅니다.

      body {
        display : flex; /* inline-flex, inline, block을 넣을 수 있어요. */
      }
    부모요소 속성기능자세히
    flex-direction주축 설정기본:row(수평), row-reverse, column(수직), column-reverse
    justify-content주축의 정렬 방법(수평정렬, 가로정렬)기본:flex-start 가능값:flex-end,center
    align-content교차 축의 여러 줄 정렬 방법(수직정렬 느낌)기본:stretch 가능값:flex-start,flex-end,center
    stretch는 부모 container를 꽉 채우면서 정렬 그니깐 쭉 늘인다는거죠, flex-start는 child들이 다닥다닥 붙게 모두 start를 기준으로 정렬합니다.
    align-items한 줄의 수직 정렬기본:stretch 가능값:flex-start,flex-end,center,baseline(문자 기준선)

그림으로 확인해볼까요?

  • align-content : 한 덩어리 전체를 움직인다고 생각하세요.

  • align-items : 각 개별 요소에 대한 정렬이라고 생각하면 됩니다.


    자식요소 속성기능자세히
    flex-wrap자식요소 줄바꿀까 말까 기본:no-wrap, wrap no-wrap은 한줄에서 다하려고해서 찌그러지고 wrap은 넘치면 줄바꿈해줘요
    flex-grow각 child가 가로로 늘어나는 비율기본:0 가능값:1, ...
    flex-shrink가로로 줄어드는 비율기본:1 가능값: 감소비율 0으로 두면 parent 너비가 child 너비보다 작아도 child는 줄어들지 않아요.
    flex-basisflex-grow를 위한 기준,기본 너비기본:auto(content(글자) 너비) 가능값: 0 0으로 설정하면 눈으로 봤을 때 레이아웃이 정말 제가 원하는 기준만큼 나뉩니다.
    orderflex item의 순서기본:0 (순서없음) 가능값 : 숫자 숫자가 작을수록 먼저 나와요. html구조 안바꿔도 원하는대로 출력할 수 있어요.

    flex-grow, flew-basis 예시

    image

    image

    저는 가로 비율을 맞춰서 레이아웃을 작성해야 한다면 편하게 flex-basis를 0으로 설정하고 flex-grow를 설정할 것 같아요.


    👉 flex를 가로라고 생각하세요 align을 세로라고 생각하세요. 여러 줄이면 align-content 한 줄이면 align-items 사용하면 됩니다!!

profile
함께 웃어야 행복한 개발자 장호영입니다😃

0개의 댓글