Flexbox: 플렉스 컨테이너 및 플렉스 항목

3846 단어 htmlcodenewbiecss
사진 제공: chuttersnap on Unsplash

Flexbox는 저에게 신의 선물이었습니다. 그것은 내 CSS 게임을 향상시켰고 웹사이트에서 위치 지정을 더 잘 제어할 수 있게 해주었습니다.

flexbox를 사용하기 위해 가장 먼저 이해해야 할 것은 플렉스 컨테이너와 플렉스 항목이 무엇인지입니다.

이를 이해하는 것이 flexbox 사용의 기초입니다.

컨테이너와 항목의 작동 방식을 이해하려면 다음과 같이 생각하십시오.

우리가 당신의 집에서 방을 가져가는 경우.

방에 우리는 다양한 유형의 가구를 배치합니다. 서랍장, 찬장, 옷장이 있습니다.

그리고 이 가구들에는 다른 품목들이 있습니다. 하나에는 바지와 양말이 있고 다른 하나에는 모든 옷이 있고 다른 하나에는 자정 간식이 있습니다.

가구는 방의 다른 부분에 배치할 수 있습니다. 그리고 가구에는 우리가 배치한 방식으로 항목이 배치됩니다.

이것은 flexbox가 웹 페이지에서 작동하는 방식과 유사합니다.

이 예의 방은 웹페이지입니다. 가구는 웹 페이지를 구성하는 다양한 구성 요소입니다. navbar, 갤러리 또는 기능 섹션과 같은.

그리고 가구의 오브제는 구성 요소를 구성하는 아이템입니다.

따라서 navbar는 회사 로고와 링크가 있는 정렬되지 않은 목록으로 구성될 수 있습니다.

갤러리는 5개의 이미지로 구성될 수 있습니다.

기능 섹션은 다른 카드로 구성될 수 있으며 그 안에 헤더 텍스트와 본문 텍스트가 있을 수 있습니다.

이러한 생각을 가지고 flexbox 세계에 적용하면 flex 컨테이너와 flex 항목이 서로 어떻게 작동하는지 알면 flexbox를 이해하는 데 도움이 됩니다.

Flexbox의 힘을 손에 넣을 수 있도록 제어하고, 정렬하고, 컨테이너에 넣고 싶은 항목 집합을 유지하는 것이 전부입니다.

이를 컨텍스트에 넣기 위해 navbar 예제를 살펴보겠습니다. 이것이 우리가 목표로 하는 결과입니다. 왼쪽에 로고가 있고 오른쪽에 탐색 링크가 있는 탐색 모음.



이 예에서 방은 웹페이지입니다. 우리가 이 방에 두는 가구는 navbar(컨테이너에 사용할 것입니다)입니다. 항목은 로고와 탐색 링크입니다.

우리는 navbar(컨테이너) 내에서 로고와 nav 링크(항목)의 위치를 ​​제어하려고 합니다.

이를 간단히 수행하기 위해 navbar의 이 CSS에 display: flex를 적용하여 navbar를 flexbox 컨테이너로 바꿉니다.

nav {
  display: flex;
}

그러면 컨테이너 내의 항목을 정렬하기 위해 flex-container에 flexbox의 다양한 속성을 적용할 수 있습니다.

navbar 예제에서는 align-items 속성을 적용하여 navbar 내의 항목을 중앙에 정렬하고 justify-content 속성을 적용하여 항목 사이에 공간을 적용했습니다.

더 보기 좋게 만들기 위해 다른 CSS 스타일을 추가했으며 목록 항목도 flexbox의 제어하에 있도록 정렬되지 않은 목록에 또 다른 flex-container를 만들었습니다.

nav {
  background-color: #2a2a2a;
  color: white;
  display: flex;
  font-size: 1.5em; 
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5em;
}

ul {
  list-style: none;
  display: flex;
}

li {
  margin-left: 1em;
}

Flex-Container 및 Flex-Items에 대한 이 소개가 FlexBox를 사용하는 데 도움이 되기를 바랍니다.

저는 최근에 Flexbox Answered: Answers to the most common flexbox questions이라는 flexbox에 대한 무료 책을 발표했습니다. 이 책은 여러분이 가질 수 있는 flexbox에 대한 추가 질문에 답변하는 데 도움이 될 수 있습니다.

내 웹사이트www.craigdennis.me에서 사본을 무료로 다운로드할 수 있습니다.

전체 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Navbar</title>
  </head>
  <body>
    <nav>
        <div>MY LOGO</div>
      <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Contact Us</li>
      </ul>
    </nav>
  </body>
</html>




nav {
  background-color: #2a2a2a;
  color: white;
  display: flex;
  font-size: 1.5em; 
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5em;
}

ul {
  list-style: none;
  display: flex;
}

li {
  margin-left: 1em;
}
Log4j 지정한 클래스의 로그가 지정한 파일에 기록됨
petalinux-config 오류: "ERROR: generating meta-plnx-generated layer"

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage