CSS - 플렉스(정렬): flex container, flex items, justify-content,

flex

display: flex;는 CSS의 속성 중 하나로, 요소들을 가로 또는 세로 방향으로 정렬하고 공간 배분을 조정하기 위한 도구

 

1.Flex Container:
Flex Container는 Flexbox 레이아웃을 적용하기 위한 부모 요소입니다. 

lex Container에 display: flex; 또는 display: inline-flex;를 설정하여 Flexbox 레이아웃을 활성화시킨다.

Flex Container에 적용되는 주요 속성:

display: flex 또는 inline-flex 값을 사용하여 Flex Container를 정의
flex-direction: Flex Items의 배치 방향을 결정 (row, column, row-reverse, column-reverse 등).
justify-content: Flex Items를 가로 축 방향으로 정렬 (flex-start, center, flex-end, 등).
align-items: Flex Items를 세로 축 방향으로 정렬 (flex-start, center, flex-end, 등).
flex-wrap: Flex Items가 한 줄에 배치되지 않을 경우 줄 바꿈 여부를 설정한다.

 

2.Flex Items:
Flex Items는 Flex Container 내의 자식 요소들로, 유연한 레이아웃에 따라 배치된다

Flex Items에 적용되는 주요 속성:

order: Flex Items의 순서를 변경할 수 있다.
flex-grow: Flex Items의 확장 비율을 결정한다.
flex-shrink: Flex Items의 축소 비율을 결정한다.
flex-basis: Flex Items의 초기 크기를 결정한ㄷ다.
align-self: 특정 Flex Item을 세로 축 방향으로 정렬한다.

 

 

diplay:flex 속성을 부여하기 전 -> 세로로 정렬된다

 

flex-container(부모요소)에 display:flex 속성 부여 -> 가로로 정렬된다

---

justify-content란?

Flexbox 레이아웃에서 Flex Container의 가로 공간 내에서 Flex Items의 정렬 방식을 지정한다.

이 속성을 이용하여 Flex Items를 시작점, 중앙, 끝점, 공간 사이, 동일한 간격 등에 배치할 수 있다.

 

flex-start: Flex Items를 Flex Container의 시작점에 정렬 (기본값)
flex-end: Flex Items를 Flex Container의 끝점에 정렬
center: Flex Items를 가로 축 방향으로 가운데에 정렬
space-between: Flex Items를 동일한 간격으로 배치하되, 첫 번째와 마지막 아이템은 Flex Container의 끝점에 붙인다
space-around: Flex Items를 동일한 간격으로 배치하며, 주위에도 공간을 만든다
space-evenly: Flex Items를 동일한 간격으로 배치하고 첫 번째와 마지막 아이템도 시작점과 끝점에 동일한 간격을 유지한다

 

---

flex, inline-flex

 

display: flex;

:flex 값은 Flex Container를 블록 레벨 요소로 만듭니다. 이것은 Flex Container가 다른 블록 레벨 요소와 같은 줄에 위치하고, 내부의 Flex Items를 가로 또는 세로 방향으로 배치할 수 있도록 합니다. Flex Container가 새로운 블록 컨텍스트를 생성합니다.

 

display: inline-flex;

:inline-flex 값은 Flex Container를 인라인 레벨 요소로 만듭니다. 이것은 Flex Container가 일반 텍스트와 같은 줄에 위치하고, 내부의 Flex Items를 가로 또는 세로 방향으로 배치할 수 있도록 합니다. Flex Container가 새로운 인라인 컨텍스트를 생성합니다.

 

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<div class="inline-flex-container">
  <div class="flex-item">A</div>
  <div class="flex-item">B</div>
  <div class="flex-item">C</div>
</div>

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background-color: lightgray;
  }

  .inline-flex-container {
    display: inline-flex;
    margin: 10px;
    padding: 10px;
    background-color: lightblue;
  }

  .flex-item {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    margin: 5px;
  }

 

: 첫번째 flex-container은 display:flex를 사용, 두번째 inline-flex-container은 display:inline-flex;를 사용