𝐖

정보를 원활하게 구성할 수 있습니다

.

소규모 레이아웃에 사용됨

사용이 전혀 복잡하지 않음

.

flexbox 사용을 시작하기 위해 가장 먼저 해야 할 일은 flexbox를 정의하는 것입니다

.

HTML에서는 먼저 div에 원하는 이름을 지정할 수 있는 클래스를 지정해야 합니다.

그런 다음 CSS에서 .flexbox {}를 입력하고 중괄호 안에 display: flex;를 입력하면 flexbox가 시작됩니다

.

올바르게 수행하면 div에 넣은 항목만 연속으로 표시됩니다. 이는 시작이 순조롭다는 것을 의미합니다. flexbox에 더 추가하여 더 많은 기능을 제공할 수 있습니다.

div에 한 행에 넣는 것 대신 flexbox를 더 발음하기 쉽게 만드는 데 사용할 수 있는 몇 가지 간단한 태그는 background-color: black; , margin: 20px padding:, 20px font-size: 50px;입니다. 이러한 태그는 CSS에 삽입됩니다. 그리고 flexbox에 더 많은 특성을 부여할 뿐이며 올바르게 수행된 경우 다음과 같아야 합니다

.

. . . . . .

이제 플렉스를 작동하는 방법에 대한 기본적인 이해를 마쳤으므로 더 잘 정렬하는 데 사용할 수 있는 몇 가지 태그가 있습니다

.

flex-direction 정보 방향을 변경할 수 있습니다

.

flex-wrap 귀하의 정보가 한 줄에 맞지 않는 경우 다음 줄로 이동하여 더 깔끔하게 보이도록 합니다

.

flex-flow는 방향과 래핑 여부를 모두 제어할 수 있는 바로 가기입니다

.

justify-content를 사용하면 가변 상자에서 정보가 들어가는 위치를 제어할 수 있습니다

.

align-items 콘텐츠 정렬과 유사하지만 주 축 대신 교차 축에서 정보가 이동하는 위치를 제어할 수 있습니다

.

align-content 플렉스 라인 및 정보 배치 방법 제어 가능

𝐂𝐒𝐒 𝐅 결국 으

메이드 인 피그마

나와 내 파트너는 우리가 flexbox로 무엇을 할 수 있는지 보여주고 싶었기 때문에 유럽 음식 레시피 웹사이트를 기반으로 웹사이트를 만들었고 단순히 flexbox를 사용하여 이 웹사이트를 만들고 싶었기 때문에 이와 같은 샘플을 만들었습니다.
HTML, CSS로 만든 후의 예

그리고 이것이 어떻게 되었는가

.

사용하기 쉽기 때문에 flexbox를 사용해야 합니다. 너무 쉬워서 저와 제 파트너가 이미 웹사이트에 flexbox를 사용하고 구현하기 시작하는 데 불과 2주밖에 걸리지 않았습니다. flexbox가 전문 웹사이트에서 자주 사용된다는 사실은 말할 것도 없고 따라서 실제로 웹사이트에 flexbox를 사용해야 할 이유가 없습니다.

. . . . .

시간이 좀 걸렸지만 요점을 이해한 후 웹사이트를 유럽 기반 레시피 웹사이트처럼 보이게 만드는 것이 가장 좋은 방법을 알아냈습니다.

<div class="recipe-gallary">
    <div class="recipe-card">
      <img src="./Images/Crepes.jpg" alt="">
      <div class="recipe-info">
        The best crepes in all of France!
        <a href="https://www.delish.com/cooking/recipe-ideas/recipes/a52114/easy-basic-crepe-recipe/">recipe</a>
      </div>
    </div>

사진, 링크를 가져오고 모두 div에 넣고 분류한 후 CSS로 이동합니다.

.recipe-gallary{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-between;
}
.recipe-card{
  display: flex;
  flex-direction: column;
  height: 450px;
  width: 400px;
  background-color:black;
  flex-wrap: wrap;
  align-content: space-between;
  margin: 10px 15px;
}

CSS에서 우리는 모든 사진에 영향을 미치는 레시피 갤러리를 돕기 위해 플렉스 태그를 사용했고 레시피 카드의 개별 정보를 돕기 위해 플렉스 항목을 사용했습니다.

𝐂

Flexbox는 환상적이고 사용하기 쉬운 태그로 많은 웹사이트에서 사용할 수 있으며 몇 개의 태그만으로 쉽게 형식을 지정하고 웹사이트를 전문적으로 보이게 할 수 있습니다. 이것은 내가 알고 있는 하나의 태그이며 동료들은 우리 웹 사이트가 가능한 한 깨끗해 보이도록 우리가 얻을 수 있는 모든 기회를 활용할 것입니다. 이 블로그가 동일한 작업을 수행하도록 설득하는 데 도움이 되기를 바랍니다.

사용한 웹사이트

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.w3schools.com/css/css3_flexbox.asp