본문 바로가기
📌 Front End/└ CSS3

[CSS] CSS Flex(display: flex) 레이아웃 구성과 정렬

by 쫄리_ 2024. 5. 13.
728x90
반응형

display : flex 정리

div 기본정렬입니다

<style>
    .box_wrap{
      width: 500px;
      height: 500px;
      border: 1px solid black
    }
    .box{
      width: 70px;
      height: 70px;
      background-color: yellow;
      border: 1px solid green;
      margin: 10px;
    }
</style>
</head>

<body>
  <div class="box_wrap">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
</body>

display : flex

부모 클래스에 flex 속성을 줘야 나머지 flex 속성을 사용할 수 있다.

.box_wrap{
  display: flex;
}

display : flex-direction : 정렬의 방향을 선택

  •   정방향 : row; 
  •   정방향 + 역순정렬 : row-reverse;
  •   세로방향 : column;
  •   세로방향 + 역순정렬 : column-reverse;
.box_wrap{ 
    display: flex;
    flex-direction : row;
//    flex-direction : row-reverse;
//    flex-direction : column;
//    flex-direction : column-reverse;
}

justify-content : 가로 방향의 여백을 두는 방식

  • justify-content: flex-end; (끝점에 맞춰 정렬)
  • justify-content: flex-start; (시작점에 맞춰 정렬)
  • justify-content: center; (가운데 정렬)
  • justify-content: space-between;
    (처음과 마지막 자식요소는 양끝으로 배치하고 나머지 자식요소들의 여백을 균등하게 정렬)
  • justify-content: space-around; (모든 자식요소들의 여백을 균등하게 정렬)
.box_wrap{
  display: flex;
  flex-direction : row;
  justify-content: flex-end;	
  // justify-content: flex-start;	
  // justify-content: center;	
  // justify-content: space-between;	
  // justify-content: space-around;
}

부모 클래스의 direction에 따라 수평방향의 기준이 달라진다.

align-items : 세로 방향의 여백을 두는 방식

( = 세로정렬과 비슷하다고 생각하면 된다!, 하지만 이것도 부모의 direction에 따라  기준이 달라진다)

  • align-items: center;  ( 세로 기준 가운데정렬 , 부모의 direction이 column이었으면 가로기준 가운데 정렬이 된다) 
  • align-items: flex-end; ( 세로기준 위로 정렬 )
  • align-items: flex-start; ( 세로기준 아래로 정렬 )
.box_wrap{
  display: flex;
  flex-direction : row;
  justify-content: flex-end;	
  align-items: center;
  // align-items: flex-end;
  // align-items: flex-start;
}

 

flex-wrap : 부모의 width에 따른 줄바꿈 여부

  • flex-wrap : wrap; ( 정해놓은 사이즈(자식요소)를 유지한 채 자동 줄바꿈 된다 )
  • flex-wrap : nowrap; ( 배경에 맞게 자신의 사이즈를 조절한다. )
.box_wrap{
  display: flex;
  flex-direction : row;
  flex-wrap : nowrap;
  // flex-wrap : wrap;
}

 

 

 

1) FlexBox (flex)

  • flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계
    1. 가로정렬, 세로정렬 = 1차원정렬
    2. 둘 중 하나만
  • flexbox를 1차원이라 칭하는 것은 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 뜻이다.
  • 부모 요소인 container를 Flex Container(플렉스 컨테이너) 라고 한다.
    1. 정렬하고자하는 요소의 부모
  • 자식 요소인 item들을 Flex Item(플렉스 아이템) 라고 한다.
  • 컨테이너가 Flex의 영향을 받는 부모요소, 설정된 속성에 따라 각각의 아이템들이 배치
  • max-axis(중심축) : flex container 방향에 따라 다르다.
  • cross-axis(반대축) : max-axis(중심축)의 반대방향
    • Ex) flex-direction: row; → 중심축:가로방향, 반대축:세로방향

2) 부모(container)  속성설정

  1. display: flex;
  2. display: inline-flex;
  3. flex-direction
    • 가로정렬할래? 세로정렬할래? ⇒ 중심축을 어떻게 할래?
    • flex-direction: row; → 기본이 가로방향
    • flex-direction: column; → 세로방향
    • flex-direction: column -reverse; → 세로방향, 순서반대
  4. flex-wrap
    • flex-wrap: nowrap; → 기본이 넘치지 않는다.
    • flex-wrap: wrap; 하위요소가 많으면 다음 행으로 넘쳐 흐른다.
    • 넘치지 않는 모습
    • 넘쳐 흐르는 모습
  5. flec-flow
  6. justify-content⭐⭐⭐
    • 중심축 방향으로 item을 정렬한다,
    • gnb(가로정렬)에서 가장 많이 사용한다.
    • flex-direction: row; 상태에서
      • justify-content: flex-start; → 하위요소가 기본배치(앞 부터)(기본)
      • justify-content: flex-end; → 하위요소가 기본배치(끝 부터)
      • justify-content: center; → 하위요소가 기본배치(가운데부터)
      • justify-content: space-between; → 하위요소가 처음과 끝 사이에 같은 간격으로 배치(가장 많이 사용한다.)
        • 같은 간격으로 배치된 모습
  7. align-content
    • 반대축에서 item배치 → 높이 설정
    • 한줄인 경우 align-content
    • align-items: center; → 반대축 가운데
      • 확인
    • align-items: baseline; → 텍스트 중심
    • align-items: strectch; → 기본 **height: auto일 경우는 container height의 100%이다.
    • align-items: flex-start; → 처움
    • align-items: flex-end; → 끝
  8. align-items
    • 두 줄인 경우 align-items
    • align-content: space-between; → 반대축 끝에 items를 배치하고 간격 같게
      • 확인
    • align-content: center; → 반대축 중간에 items를 배치
      • justify-content: center;
      • align-content: center;

3) 자식(item) 속성설정

  1. order
    • 1, 2, 3 → item의 순서를 지정
    • 기본 0
    • 큰 수가 뒤로 간다.
    • 1 → 5순서
  2. flex-grow
    • 기본: 0, 원래지정값
    • 1, 2, 3 크기가 상대적으로 변한다.
    • 같은 비율로 변화
    • 커진다.
  3. flex-shrink
    • 기본: 0
    • 1, 2, 3 items이 줄어들었을 때 상대적으로 변한다.
    • 2 → 2배로 줄어든다.
    • 작아진
  4. ****flex 1 1 100px;**** ⭐
    • flex: flex-grow flex-shrink flex-basis
    • flex자식요소크기를 설정한다.
    • 예시
    • flex: 0 0 300px;
      • 해당 item은 고정값이 된다.
  5. flex-basis
    • auto (지정값)
    • 30% 지정값대로 상대적으로 변화
  6. align-self
    • 특정 item의 위치를 배치
  7. **flex: 1**
    • 선택된 item 전체의 상대비율이 1이다.
    • 부모에 대해서 동일비율

 

 

참고 : https://thdud4479.tistory.com/255

참고 : https://velog.io/@luna001631/CSS-flex

 

728x90
반응형
저작자표시

'📌 Front End > └ CSS3' 카테고리의 다른 글

[CSS] CSS 속성 선택자(Selector) 종류  (0) 2024.05.22
[CSS] CSS 미디어쿼리(Media Query) 기본 사용법  (0) 2024.05.20
[CSS] CSS Flex 완벽 가이드  (0) 2024.05.20
[CSS] CSS Position 속성 5가지 정리 (static, relative, absolute, fixed, sticky)  (0) 2024.05.13
[CSS] 4K(3840x2160)해상도 배경이미지 화면에 맞게 꽉차게 지정하기  (0) 2024.05.08

관련글

티스토리툴바