초보자를위한 Flexbox에 대한 친근한 소개

CSS Flexbox : 1 차원 레이아웃 도구

탄성 상자 레이아웃 모듈 인 Flexbox는 일련의 유사한 프로젝트와 같은 1 차원 레이아웃을 생성하기위한 CSS의 강력한 도구입니다. 특히 단일 행 또는 단일 열 레이아웃에 적합하며 이전 브라우저의 그리드 레이아웃에 대한 신뢰할 수있는 대안으로 사용할 수 있습니다. 이 기사는 이해하기 쉬운 Flexbox 가이드를 제공합니다.

CSS 그리드 레이아웃의 출현에도 불구하고 Flexbox는 여전히 고유 한 값을 가지고 있습니다. 둘 사이에 기능의 일부 중첩이 있지만 CSS 레이아웃에서 다른 역할을합니다. 일반적으로 Flexbox는 1 차원 레이아웃 (예 : 일련의 유사한 프로젝트)에 더 적합하지만 그리드는 2 차원 레이아웃 (예 : 전체 페이지의 요소)에 더 적합합니다. 그러나 Flexbox 는 전체 페이지 레이아웃에도 사용할 수 있으므로 그리드를 지원하지 않는 브라우저에서는 그리드 레이아웃의 효과적인 대안으로 사용할 수 있습니다. (대부분의 최신 브라우저에서 그리드가 빠르게 개선되었지만 Flexbox는 여전히 더 넓은 지원을 가지고 있으며 일부 이전 브라우저에서 제대로 작동하기 위해 레이아웃이 필요하면 매우 실용적입니다.)

. Flexbox의 장점

Flexbox의 장점 중 일부는 다음과 같습니다

페이지 컨텐츠는 어느 방향 으로든 (왼쪽, 오른쪽, 아래로 또는 심지어) 배치 할 수 있습니다.

컨텐츠 클립의 시각적 순서를 되돌리거나 재 배열 할 수 있습니다.

항목은 사용 가능한 공간에 대한 응답으로"유연하게 "조정 될 수 있으며 컨테이너 또는 서로 관련하여 정렬 할 수 있습니다.

각 열의 컨텐츠 양에 관계없이 Monospace 열 레이아웃 생성은 매우 쉽습니다. 다양한 속성과 가능성을 설명하기 위해이 기사의 일부 데모의 예로 다음 간단한 레이아웃을 가정 해 봅시다.

첫 번째 단계는 요소를

, 즉 및 에 배치하고 나란히 표시하는 것입니다. Flexbox가 없으면 수레를 사용 하여이 세 가지 요소를 배열 할 수 있지만 이는 그다지 직접적이지 않습니다. 또한 전통적인 방법은 잘 알려진 문제를 가져옵니다. 각 열은 콘텐츠 높이와 높이가 동일합니다. 따라서 세 열 모두 길이를 일관성있게 만들거나 어떤 종류의 트릭을 사용하려면 동일한 높이를 설정해야합니다. Flexbox가 시작되었습니다.

flexbox

를 사용하십시오 flexbox의 핵심은 속성의

값이며 컨테이너 요소로 설정해야합니다. 그렇게하면 자식 요소가 "탄성 항목"으로 바뀝니다. 이 항목은 기본적으로 몇 가지 편리한 속성을 얻습니다. 예를 들어, 그것들은 나란히 배치되며, 지정된 너비가없는 요소는 나머지 공간을 자동으로 차지합니다.
• 따라서 로 를 설정하면 하위 요소는 자동으로
와 사이를 압박합니다. 계산 없이는 매우 편리하지 않습니까? 추가 보너스로,이 세 가지 요소는 마술처럼 높이가 동일합니다.

• <code class="language-html"><div class="example">
    <header>header content here</header>
    <main class="main">
      <nav>nav content here</nav>
      <div class="content">main content here</div>
      <aside>aside content here</aside>
    </main>
    <footer>footer content here</footer>
  </div></code>

  요소 순서 : Flexbox 속성 order Flexbox의 또 다른 속성은 요소 순서를 쉽게 변경할 수 있다는 것입니다. 클라이언트를 위해 위의 레이아웃을 구축했다고 가정하고 이제 전에

  가 나타나기를 원합니다.

  일반적으로 HTML 소스 코드를 파고 주문을 변경해야합니다. Flexbox를 사용하면 CSS를 통해 전적으로이 작업을 수행 할 수 있습니다. 단순히 .content 's <nav></nav> 속성을 ​​-1로 설정하면 컨텐츠 열이 앞에 있습니다.

  이 경우 다른 열에 대한 .content 값을 명시 적으로 선언 할 필요는 없습니다. order CSS 스타일과 무관하게 Flexbox를 사용한 HTML 소스 코드 그러나 고객은 아직 만족하지 않습니다. 그녀는

  가 페이지의 첫 번째 요소, 이전에도 희망합니다. 글쎄, Flexbox는 다시 친구입니다 (이 경우 순종하지 않고 고객을 교육하는 것이 좋습니다). 내부 및 외부 요소를 재 배열해야하므로 에 대한

  <code class="language-css">.main {
    display: flex;
  }</code>

  규칙을 설정해야합니다. 웹 페이지에 플렉스 컨테이너를 중첩하여 원하는 결과를 얻을 수 있습니다. ,

  및 order가 수직으로 쌓여 있기 때문에 먼저 수직 컨텍스트를 설정해야하며

  로 빠르게 수행 할 수 있습니다. 또한

  의 값은 -1이므로 먼저 페이지에 나타납니다. 그렇게 간단합니다. 따라서 요소 행을 열 또는 그 반대로 변경하려면 속성을 ​​사용하여 또는 (

  는 기본값입니다)로 설정할 수 있습니다. > 그러나 능력이 높을수록 책임이 커집니다. 많은 방문자가 키보드를 사용하여 Flexbox 기반 웹 사이트를 탐색 할 것이므로 HTML 소스 코드의 요소 순서가 화면, 접근성은 심각한 문제가 될 수 있습니다.

  <footer></footer> flexbox 를 정렬하는 방법 Flexbox는 어린이들을 매우 직접적으로 수평 적으로 그리고 수직으로 정렬 할 수 있습니다. <header></header> <div>를 사용하여 플렉스 컨테이너 내의 모든 요소에 동일한 정렬을 적용 할 수 있습니다. 각 프로젝트마다 다른 정렬을 설정하려면 <code>display: flex를 사용하십시오. 요소의 정렬은 <header></header> 속성의 값에 따라 다릅니다. 그 값이 (즉, 요소가 수평으로 배열됨) 인 경우 정렬은 수직 축에 적용됩니다. <main></main>가

  (즉, 요소가 수직으로 배열 됨)로 설정되면 수평 축에 적용됩니다. flex-direction: column 예를 들어 컨테이너 요소 내에서 다르게 정렬하려는 모양이 있습니다. 당신은 필요합니다 : <footer></footer>

  • 각 모양의 align-self 속성을 ​​적절한 값으로 설정하십시오. 가능한 값은 다음과 같습니다. , center (요소는 컨테이너에 맞게 배치됩니다), , stretch 및 flex-start (요소는 컨테이너의 기준선에 배치됩니다). flex-end 컨테이너 요소를 로 설정하십시오. baseline 마지막으로, 값은 아동 요소가 정렬되는 방식에 영향을 미치므로 부모 컨테이너의
  속성에주의를 기울이십시오.
  • display: flex
  부모 컨테이너의 모든 요소를 ​​동일한 방식으로 정렬 해야하는 경우 부모 컨테이너에서
  • 속성을 ​​사용할 수 있습니다. 가능한 값으로는 , flex-direction,
  ,

  (기본값 : 항목이 컨테이너에 맞게 뻗어 있음) 및

  <code class="language-html"><div class="example">
    <header>header content here</header>
    <main class="main">
      <nav>nav content here</nav>
      <div class="content">main content here</div>
      <aside>aside content here</aside>
    </main>
    <footer>footer content here</footer>
  </div></code>

  (항목은 컨테이너의 기준선에 위치)가 포함됩니다.

  align-items center Flexbox를 사용하여 컨텐츠를 정렬합니다 flex-start flex-end 또 다른 정렬 속성은 stretch이며, 여러 요소 사이에 사용 가능한 공간을 고르게 할당하려면 매우 편리합니다. baseline 수용 가능한 값은 다음과 같습니다. , , ,

  (항목 사이에 공백이 있습니다)와 (이전, 사이 및 항목 이후 공백이 있습니다).

  <code class="language-css">.main {
    display: flex;
  }</code>

  예를 들어 , 당신이 사용했던 간단한 html 템플릿의

  요소 내에서 , 및 의 세 가지 요소를 찾을 수 있습니다. 현재, 그들은 모두 페이지의 왼쪽으로 밀려납니다. 첫 번째 및 마지막 요소의 왼쪽 및 오른쪽 끝에서 공간을 별도로 작성하는 대신 공간 사이에 공간을 만들기 위해이 세 가지 요소를 어떻게 든 표시하려면 로 설정하십시오. :

  justify-content Flexbox를 사용하여 프로젝트 크기를 조정하십시오

  center 속성을 ​​사용하면 Flex 컨테이너의 다른 요소에 대한 요소의 길이를 제어 할 수 있습니다. flex-start 이 속성은 다음 속성 각각에 대한 약어입니다. flex-end space-between - 다른 탄성 요소에 비해 요소가 얼마나 자라는지를 지정하는 숫자. space-around

  - 다른 탄성 요소에 비해 요소가 얼마나 줄인지 지정하는 숫자.

  <main></main> - 요소의 길이. 허용 가능한 값에는 다음이 포함됩니다. , <nav></nav> 또는 "%", "px", "em"또는 기타 길이 단위가 포함됩니다. .content <aside></aside> 예를 들어, 3 개의 모니 스페이스 열을 얻으려면 각 열에 대해 .main를 설정합니다. justify-content 콘텐츠 영역이 및 space-between보다 두 배나 넓어지면 를 설정하고 다른 두 개를 1에 남겨 두십시오.

  <code class="language-css">.main {
    display: flex;
  }
  
  .content {
    order: -1;
  }</code>

  더 많은 자원

  결론

  보시다시피, 웹 사이트의 요소 위치를 제어 해야하는 경우 Flexbox는 우리의 삶을 훨씬 쉽게 만들 수 있습니다. 그것은 매우 신뢰할 수 있으며, 트릭, 접는 용기 또는 매일 매일 다루어야 할 기타 이상한 것들을 만드는 것은 매우 신뢰할 수 있습니다.

  앞에서 언급했듯이, 오늘날 전체 페이지 레이아웃에 대한 더 나은 옵션은 CSS 그리드이지만 Flexbox 기능의 범위에 대해 여전히 알아야 할 가치가 있습니다. FlexBox는 관련 항목을 한 차원으로 정렬하는 데 가장 적합하지만 필요한 경우 이전 브라우저에서 작업하는 그리드에 대한 편리한 대안이 될 수도 있습니다.

  CSS Flexbox

  에 대한 FAQS (원본 문서와 일치하기 위해 자주 묻는 질문을 여기에 추가해야합니다)