CSS_display : flex

flex

• 카테고리상 block 레벨
• flex는 부모, 자식관계 두개만 신경쓴다. (자손은 신경쓰지 않으며, 적용도 안됨)
  (무조건 부모 자식관계로만 만들어야 한다. )
• 부모: container
  자식 : item
• (주의할 점) flex를 쓰게 되면 사이즈를 내 마음대로 할 수 없는 경우들이 생긴다.
• 검사페이지에 빗금쳐져있으면 무조건 flex
  flex의 아이콘을 누르면 부모가 가질 수 있는 속성들을 알 수 있다.
• 부모용 속성
  • ★★display : flex
    • 기본 : 자식들에게 사이즈를 줘도 무시되면서 알아서 한 줄에 다 배치된다. (inline처럼)
      세로는 부모의 100% 먹는다. (자식 자체에 사이즈 있으면 그거 유지)
  1. flex-direction: 주축(메인축)을 설정
     • row(기본) - 가로방향으로 나열
     • column - 세로방향으로 나열
  2. flex-wrap: 한줄에 다 배치 할건지 다음줄로 넘길건지 결정
     • nowrap : 한줄에 배치
     • wrap : 도시락통, 다음줄로 넘어가게 배치
  3. ★★★ justify-content: 메인축 방향에서의 자식들의 위치 결정
     • flex-start : 메인축의 시작지점부터 위치
     • flex-end : 메인축의 끝지점부터 위치
     • center : 메인축 중앙 위치
     • space-between : 양쪽 끝에는 여백 없이, 요소들 사이에만 여백
     • space-around : 각 요소당 좌우 여백(마진겹침 없어서 요소 사이에는 여백이 양 끝보다 2배 넓은 것 처럼 보임)
     • space-evenly : 각 요소당 동일한 좌우 여백(마진겹침)
  4. align-items : 1줄짜리일 때(nowrap), 보조축(교차축, 메인축과 반대축) 방향의 정렬
     • stretch : 자식들한테 사이즈가 없을 때 보조축 방향으로 자식들을 늘려서 꽉 차게 해줌
     • flex-start : 보조축의 시작점 쪽에 배치
     • flex-end : 보조축의 끝지점 쪽에 배치
     • center : 보조축의 가운데 배치
     • baseline : 보조축의(문자 기준선) 가운데 배치 (자주 쓰이진 않음.)
  5. align-content : 2줄 이상일 때(wrap), 보조축 방향의 정렬
     • stretch : 자식들한테 사이즈가 없을 때 보조축 방향으로 자식들을 늘려서 꽉 차게 해줌
     • flex-start : 보조축의 시작점 쪽에 배치
     • flex-end : 보조축의 끝지점 쪽에 배치
     • center : 보조축의 가운데 배치
     • space-between : 양쪽 끝에는 여백 없이, 요소들 사이에만 여백
     • space-around : 각 요소당 좌우 여백(마진겹침 없어서 요소 사이에는 여백이 양 끝보다 2배 넓은 것 처럼 보임)
     • space-evenly : 각 요소당 동일한 좌우 여백(마진겹침)
       -> 4, 5번같은 보조축관련 정렬은 자주 쓰이지 않는다.(세로정렬일때. margin이 편하다. )
• 자식속성
  1. order: flex items(자식)의 순서 변경
     • 단위 : 정수(음수, 양수 다 됨. 양수를 추천). 기본값: 0
     • 무한대로 줄 수 있다. z-index처럼 크게크게 숫자를 주자.
     • 놔지는 순서를 적지 않으면 기본값은 0이므로 제일 먼저나온다. 그래서 다 순서를 줘야지 내가 원하는 대로 놓을 수 있다.
• flex로 감싸고 자식한테 margin을 넣으면 알아서 떨어지고 너비가 조정된다.
  -> 그래서 내가 원하는 영역값이 아니기 때문에 관리하기 힘들다.
  -> margin겹침현상이 일어나지 않는다.
• 부모에게 gap: px 주면 margin과 같은건데 맨 오른쪽 margin값은 안들어가고 자식 영역 사이에만 margin이 들어간다.
  • %보다는 px로 주길 권장한다. %로 주면 부모에게 높이값을 주지 않은 경우 자식들 위 아래 사이 공백이 없다. 왜냐하면 컴퓨터는 위에서부터 아래로 읽기 때문에 부모를 읽고 자식은 아직 읽지 않아 부모의 높이값이 없기때문에 높이 0의 n%는 0이기 때문에 공백을 줄 수 없다.
  • 2줄로 넘어가는 경우 첫번째줄 맨 오른쪽에도 빈공간이 있긴하다.
    • 한줄일때만 사용하길 권장. 이것도 mr_0처럼 라인당 제일 마지막 오른쪽의 공백을 제거해야한다.
      그러나 gap은 부모에게 주는 속성이라 공백을 제거할 수 없다.
      그래서 이것보단 margin을 사용하는 것이 편하다. 나중에 web2배우면 mr_0클래스 만들지 않고도 제거하는 방법이 있어서 편하기 때문이다.
  • gap 값 주는 방법은 margin이랑 비슷하다. 하나만 쓰면 사방에 다 같은 px로 떨어지고, 20px 50px주면 위아래 20px 양옆에 50px이 먹힌다.
    • row-gap, column-gap으로 나눠서 쓸 수도 있다.
  • gap은 부모에게 주는 것이기 때문에 바쁠 때 한 번에 코드를 읽기 불편해서 불호하는 사람이 많다.
• flex-shrink:0 -> 줄어드는 정도
  flex-grow:0 -> 늘어나는 정도
  flex-basis:100%-> 아이템 기본 크기
  정수 : 배수
  플렉스를 쓰면 전체 너비에 맞춰서 알아서 줄어들거나 늘어나는데 그것을 방지하는 속성