CSS [6] – Flexbox(Flex) 주요 속성 정리

keepitupcoding

display: flex

<body>
    <main class="container">
        <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 class="box">6</div>
    </main>
</body>
.container {
  max-width: 800px;
  min-height: 400px;
  margin-inline: auto;
  border: 1px solid #000;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 1rem;
  /* flex-direction: row-reverse;
  flex-wrap: wrap; */
  flex-flow: row wrap;
  align-content: space-evenly;
}

.box {
  /* min-width: 100px; */
  min-height: 100px;
  background-color: #000;
  color: #fff;
  font-size: 2rem;
  padding: 0.5rem;

  display: flex;
  justify-content: center;
  align-items: center;

  flex-basis: 100px;

  flex-shrink: 1;
  flex-basis: 100px;
}

.box:nth-child(2) {
  /* flex-shrink: 2; */
  flex: 2 2 250px;
  order: 0;
}
  • flex는 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다.
  • flex-grow CSS property 는 flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당받습니다. 하지만 flex-grow 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.
  • 보통 flex-grow를 사용할땐, flex-shrink, flex-basis 속성을 함께 사용합니다. 그리고 일반적으로는 모든 값이 설정되었음을 보장하기 위하여 flex 속성을 이용해 축약형으로 사용합니다.
  • flex-shrink CSS property는 flex-item 요소의 flex-shrink 값을 설정하는 속성입니다. 만약 flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소됩니다.
  • flex-basis CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다. box-sizing을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다.

Flexbox Froggy로 flexbox 공부하기

  • justify-content: 가로선 상 정렬
    • flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
    • flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
    • center: 요소들을 컨테이너의 가운데로 정렬합니다.
    • space-between: 요소들 사이에 동일한 간격을 둡니다.
    • space-around: 요소들 주위에 동일한 간격을 둡니다.
  • align-items: 세로선 상 정렬
    • flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
    • flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
    • center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
    • baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
    • stretch: 요소들을 컨테이너에 맞도록 늘립니다.
display: flex;
justify-content: center;
display: flex;
justify-content: space-around;
align-items: flex-end;
  • flex-direction: 정렬해야할 방향 지정
    • row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
    • row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
    • column: 요소들을 위에서 아래로 정렬합니다.
    • column-reverse: 요소들을 아래에서 위로 정렬합니다.
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
display: flex;
flex-direction: column;
justify-content: flex-end;

> Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 뱡향이 가로로 바뀝니다.

*개별 요소에 적용하는 속성

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  order: 1;
  align-self: flex-end;
}
  • order: row나 column의 순서 변경
    • 기본값 0, 양수나 음수
    • 특정값을 맨 앞으로 옮기고 싶을 때 -1
  • align-self: 개별 요소에 적용할 수 있는 또 다른 속성
    • 이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됩니다.
  • flex-wrap: 여러 줄에 걸친 정렬 조정
    • nowrap: 모든 요소들을 한 줄에 정렬합니다.
    • wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
    • wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
display: flex;
flex-wrap: wrap;
  • flex-flow: flex-direction과 flex-wrap 축약해서 사용
    • e.g. flex-flow: row wrap;
  • align-content: 세로선 상 여분의 공간이 있는 경우 여러 줄 사이의 간격을 지정
    • flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
    • flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
    • center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
    • space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
    • space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
    • stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
align-content: center;

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *