플렉스박스란?

Flexbox는 무엇이든 정해진 순서대로 만드는 데 사용되는 컨테이너 구성 도구입니다. 목록은 수직일 뿐이지만 Flexbox는 어떤 방식으로든 설정됩니다.

사용하는 방법

먼저 div 목록을 만듭니다.
각 div는 목록 항목의 개별 컨테이너입니다. 이러한 div 순서 및 속성은 웹 사이트에서 상호 작용하고 작동하는 방식을 결정합니다.

<div class="flex-container">
  <div>img1</div>
  <div>img2</div>
  <div>img3</div>
</div>

(클래스는 CSS를 올바르게 사용하는 한 원하는 것이 무엇이든 될 수 있습니다.)
목록의 순서를 결정하기 전에 Flexbox가 나타나도록 설정해야 합니다. CSS에서 이것을 넣으십시오.

.flex-container {
  display: flex;
}

이렇게 하면 div가 flexbox로 표시되며 원하는 방향으로 배치할 수 있습니다.
다음은 실제로 방향을 결정하는 것입니다. 아래는 그렇게 하기 위한 코드입니다.

.flex-container {
  display: flex;
  flex-direction: (enter the direction you want);
}

그러나 이것이 귀하의 사이트에 가장 적합하도록 가변 상자를 변경하는 방법의 끝이 아닙니다. 바로 아래는 flexbox가 작동하는 방식을 결정하는 데 사용할 수 있는 몇 가지 방향과 속성입니다.

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

이제 그것들은 단지 단어의 순서일 뿐입니다. 아래에서 각각의 의미와 flexbox에서 작동하는 방법에 대해 알아봅니다.
css flex-direction
: 컨테이너가 플렉스 항목을 쌓으려는 방향을 정의합니다. 열과 행과 마찬가지로 행과 열 내의 순서는 뒤바뀔 수 있습니다.flex-wrap : flex wrap은 만들고 있는 행/열이 한 쪽 끝에 도달한 경우 다시 줄바꿈할지 여부를 결정합니다. 이 텍스트가 게시물의 가장자리에 부딪히고 아래 줄로 래핑되는 방식과 같습니다.
css flex-flow
: 하나의 명령에서 flex-direction 및 flex-wrap 속성을 모두 설정하기 위한 것입니다.
css justify-content
: flexbox가 기울어질 방향을 결정합니다. 텍스트에 패딩을 사용하여 특정 위치에 놓이는 것과 같습니다.
css align-items
: justify-content가 수평 변화이고 justify-content가 수직 변화라는 점을 제외하면 align-items와 유사합니다.
css align-content
: 컨테이너를 기준으로 하는 위의 항목 대신 서로에 대한 flexbox의 줄입니다. 여기에서 거리와 선을 서로 비교하는 방법을 결정합니다.

사용할 것을 결정했으므로 이제 그 의미를 설명할 수 있습니다. 이제 내 Figma를 위해 오른쪽을 향한 래핑 이미지 Flexbox를 선택했습니다. 일명 왼쪽에서 오른쪽으로 가는 보기 좋은 목록입니다. 그래서 div에 몇 가지를 넣고 싶습니다. 거기에 이미지를 넣고 싶다고 가정해 보겠습니다. 그래서 id는 각 개별 div에 들어가 각각의 이미지를 제공해야 합니다.

<div class="flex-container">
  <div><img src="monkey.jpg" alt="monkeyimg"></div>
  <div><img src="giraffe.jpg" alt="giraffeimg"></div>
  <div><img src="zebra.jpg" alt="zebraimg"></div>
</div>

(이 목록은 필요한 만큼 계속할 수 있지만 읽기 쉽도록 3에서 중지합니다.)
이제 "Flex-container"클래스 내에 있는 이러한 각 div는 만든 flexbox와 함께 이동합니다.

참조

https://www.w3schools.com/css/css3_flexbox.asp
Figma로 만든 예도 있습니다. https://www.figma.com/file/m5ZzK2tTM0Ft8fWIbF7xcu/climt-chnge-is-baaed
https://SturdyIntentWorker.flexboxpost.repl.co