빠른 팁 : Flexbox에서 Z-INDEX 및 자동 여백이 작동하는 방법

Flexbox는 끈적 끈적한 바닥 글 및 윤곽 열과 같은 일반적인 레이아웃 문제를 해결하는 데 널리 사용됩니다. 이러한 기능 외에도 덜 인기있는 다른 실용적인 기능을 제공합니다. 그들 중 두 명을 탐색합시다!

키 포인트

flexbox를 사용하면 플렉스 프로젝트의 속성이 로 설정된 경우에도

속성 (예 : Flex 프로젝트)에 적용 할 수 있습니다. 이것은 요소의 스태킹 순서를 제어하는 ​​데 사용할 수 있습니다.
• Flexbox의 자동 마진을 사용하여 스핀들을 따라 Flex 품목의 맞춤형 정렬을 구현하는 데 사용될 수 있습니다. 그들은 여분의 공간을 흡수하고 인접한 프로젝트를 밀어내어 고유 한 UI 패턴을 가능하게합니다. position 는 시각적으로 비슷해 보이지만 자동 마진과 static 특성을 사용하면 특히 계산 된 너비 또는 요소 높이 측면에서 다른 레이아웃 결과를 생성 할 수 있습니다. 원하는 레이아웃과 가장 일치하는 메소드를 선택하는 것이 중요합니다. z-index
Flexbox 및 z-index 당신은 이미 속성이 포지셔닝 요소에만 적합하다는 것을 이미 알고있을 것입니다. 기본적으로 모든 요소의 속성은
• 이며 배치되지 않습니다. 요소의 속성이 , , flex-grow 또는 로 설정되면 요소는 "포지셔닝"요소입니다.
그러나 그러나 FLEX 항목과 같은 에산 된 요소 (예 : Flex 항목)도

속성을받을 수 있습니다. CSS 탄성 상자 레이아웃 사양이 지적합니다

플렉스 프로젝트는 문서의 순서가 원래 문서 순서 대신 순서 대신 수정되고 인 경우에도 (

)도 스택 컨텍스트를 만듭니다.

z-index 이 동작을 이해하려면 다음 예를 고려하십시오 Codepen Demo Link position static 여기서, 우리는 두 가지 요소의 요소를 정의합니다. 요소에는 숫자 "1"이있는 하위 요소가 있습니다. 요소 자체는 절대적으로 배치되어 있습니다. 구체적으로, 그 속성은 position이며 전체 뷰포트를 다룹니다. relative absolute 우리의 fixed 요소는 플렉스 컨테이너입니다. 여기에는 "2"및 "3"숫자가있는 상자가 포함되어 있습니다. 위에서 논의한 내용을 바탕으로 요소가 위치하지 않더라도 플렉스 프로젝트의 sticky 속성을 ​​설정할 수 있습니다 (즉, 속성은 ).

위의 데모에서 버튼을 클릭하여 플렉스 프로젝트에

를 추가 할 때 z-index 요소 위에 있습니다.

Flexbox 및 자동 마진 우리는 플렉스 프로젝트에 자동 마진을 적용하여 일반적인 UI 패턴을 해결할 수 있습니다. 먼저이 전형적인 제목 레이아웃을 구축하고 싶다고 가정 해 봅시다.

를 만들려면 Flexbox를 사용합니다. 부동, 고정 너비 또는 그와 비슷한 것이 필요하지 않습니다.

이것은 우리의 마크입니다 :

우리의 CSS는 다음과 같습니다

이 예에서는 요소가 플렉스 컨테이너이며 로고, 메인 메뉴 및 소셜 메뉴는 플렉스 항목입니다. 이전 시각화에서 볼 수 있듯이, 처음 두 개의 플렉스 항목은 메인 축을 따라 플렉스 컨테이너의 왼쪽으로 정렬됩니다. 대신 소셜 메뉴는 기본 축을 따라 부모 요소의 오른쪽 가장자리와 정렬됩니다.

이 사용자 지정 정렬을 달성하는 한 가지 방법은 기본 메뉴에

를 추가하는 것입니다. 하나의 코드 라인만으로 소셜 메뉴의 기본 정렬을 무시하고 컨테이너 오른쪽으로 완전히 밀어 넣을 수 있습니다. 마찬가지로

속성을 ​​사용하여 크로스 축을 따라 플렉스 항목의 기본 정렬을 무시합니다.

자동 마진 외에도 두 번째 방법을 사용하여 필요한 레이아웃을 구축 할 수도 있습니다. 먼저, 우리는 메인 메뉴에서 속성을 ​​제거하고

를 추가합니다.

<header>
  <nav>
    <h1 id="LOGO">LOGO</h1>
    <ul class="menu">
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
    </ul>
    <ul class="social">
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Facebook</a></li>
      <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Twitter</a></li>
    </ul>
  </nav>
</header>

두 경우 모두 결과가 동일하게 보이더라도 큰 차이가 있습니다. 첫 번째 솔루션을 사용하면 우리의 메뉴에는 초기 계산 너비가 있습니다. 예를 들어, 뷰포트 너비가 1100px 인 경우 메뉴 너비는 다음과 같습니다.

반면에 두 번째 솔루션을 사용하면 를 지정하여 메뉴 너비가 커집니다. 뷰포트 너비가 1100px 인 경우 해당 너비는 다음과 같습니다.

header {
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333;
}

nav {
  display: flex;
  align-items: center;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.menu {
  margin-left: 60px;
  margin-right: auto;
}

Codepen Demo Link nav

이제 제목 레이아웃을 수정하고 싶다고 가정 해 봅시다. 새로운 필수 레이아웃은 다음과 같습니다

margin-right: auto 마크는 동일하게 유지됩니다. 우리는 단지 CSS를 변경하면됩니다. align-self 이 예에서 소셜 메뉴는 상위 요소의 하단 가장자리와 일치합니다. 다시 말하지만, 이것은 메인 메뉴에

를 추가하여 수행됩니다. 물론, 우리는 또한

를 사용할 수 있지만 메뉴의 높이가 증가합니다. margin-right Codepen Demo Link flex-grow: 1

주목해야 할 또 다른 점은 예를 들어

속성을 ​​정의하면 시각적 차이가 보이지 않을 것입니다. 이는 자동 마진을 사용하여 플렉스 항목을 정렬하기 때문에 발생합니다. 자동 마진을 삭제할 때만 justify-content 속성이 적용됩니다. 사양에 따라 : justify-content 여유 공간이 자동 마진에 할당되면, 마진이 Flex 이후 남은 모든 여유 공간에서 공간을 차지하기 때문에 정렬 속성은 해당 차원에서 작동하지 않습니다.

다음, 제목의 새로운 변형을 만들어 봅시다 :

이것은 의심의 여지없이 를 플렉스 컨테이너로 설정하여 쉽게 달성 할 수 있습니다. 그러나 다시, 우리는 자동 마진을 사용하여 동일한 레이아웃을 생성 할 수있었습니다. 우리가해야 할 일은 메인 메뉴에

를 적용하기 만하면됩니다.

Codepen Demo Link

결론 이 기사에서는 두 가지 알려진 Flexbox 팁을 소개합니다. 우리가 끝나기 전에, 검토합시다 :

justify-content: space-between Flex 프로젝트의 margin: 0 auto 속성이 인 경우에도

속성을 ​​Flex 프로젝트에 적용 할 수 있습니다.

우리는 자동 마진을 사용하여 스핀들을 따라 Flex 품목의 맞춤형 정렬을 달성 할 수 있습니다. 프로젝트에서 이러한 팁을 사용하는 경우 아래 의견에 알려주십시오.

z- 인덱스의 경우 FAQ 및 FlexBox Flexbox의 z-index 란 무엇입니까? 어떻게 작동합니까?

는 겹치는 요소의 수직 스태킹 순서를 제어하는 ​​CSS 속성입니다. Flexbox에서 속성을 ​​사용하여 Flex 항목이 z 축을 따라있는 순서를 제어 할 수 있습니다.

는 포지셔닝 요소에만 적합하다는 점에 유의해야합니다. 기본값은 이며, 이는 스태킹 순서가 상위 요소와 동일하다는 것을 의미합니다. 양수가

에 할당되면 요소는 상위 요소 위에 있습니다.

내 Z-index가 Flexbox에서 작동하지 않는 이유는 무엇입니까?
• position 귀하의 static는 몇 가지 이유로 Flexbox에서 작동하지 않습니다. 일반적인 이유는 z-index 속성이 포지셔닝 요소에만 적합하기 때문입니다. 요소가 배치되지 않으면 (즉, ,
• 또는 가 아님)
는 영향을 미치지 않습니다. 또 다른 이유는 부모 요소에

값 세트가있어 어린이 요소의 스태킹 순서에 영향을 미치기 때문일 수 있습니다.

Flexbox에서 자동 마진은 어떻게 작동합니까?

Flexbox에서 자동 마진에는 특별한 기능이 있습니다. 추가 공간을 흡수하고 인접한 프로젝트를 밀어 낼 수 있습니다. Flex 프로젝트에서 자동 마진을 설정하면 스핀들을 따라 남은 공간을 차지하여 다른 프로젝트를 효과적으로 밀어 넣습니다. 이것은 플렉스 컨테이너 내에서 품목을 정렬하는 데 매우 유용합니다.

z-index를 사용하여 플렉스 항목의 순서를 제어 할 수 있습니까?

예,

속성을 ​​사용하여 z 축을 따라 플렉스 항목의 순서를 제어 할 수 있습니다. 그러나 는 포지셔닝 요소에만 적합하다는 것을 기억하십시오. Flex 프로젝트가 배치되지 않으면

는 영향을 미치지 않습니다.

내 플렉스 프로젝트가 자동 마진과 제대로 정렬되지 않는 이유는 무엇입니까?

Flex 프로젝트가 자동 마진과 제대로 정렬되지 않으면 몇 가지 이유가 발생할 수 있습니다. 일반적인 이유는 플렉스 컨테이너의 높이 또는 너비가 고정되어있어 여백이 이용 가능한 공간을 제한하기 때문입니다. 또 다른 이유는 Flex 프로젝트에 고정 된 크기가있어 여유가 추가 공간을 흡수하지 못하게하기 때문일 수 있습니다. Z-Index Flexbox에서 z-index 문제를 해결하는 방법은 무엇입니까? Z-Index flexbox에서 Z-Index 문제를 해결하려면 일반적으로 요소가 배치되고

값이 올바르게 설정되도록하는 것과 관련이 있습니다. 가 작동하지 않으면 요소가 배치되어 있는지 확인하십시오. 그렇지 않다면 , 자동 마진을 사용하여 플렉스 항목을 중앙에 할 수 있습니까? 예, 자동 마진을 사용하여 Flex 컨테이너의 Flex 품목을 중앙으로 사용할 수 있습니다. Flex 프로젝트의 모든 측면에 자동 마진을 설정하면 Flex 컨테이너 내에서 수직 및 수평으로 중앙에 있습니다.

Flexbox에서 z-index의 기본값은 얼마입니까?

flexbox에서 의 기본값은

입니다. 이는 Flex 항목의 스태킹 순서가 상위 요소와 동일하다는 것을 의미합니다. 스태킹 순서를 변경하려면 양수 또는 음수를

에 할당 할 수 있습니다.

z- 인덱스는 요소의 스태킹 순서에 어떤 영향을 미칩니 까? Z-Index Z-Index 다른 요소 위에 어떤 요소가 나타나는 지 결정하여 요소의 스태킹 순서에 영향을 미칩니다. 값이 높은 요소는 Z-Index 동일하면 HTML 이후에 나타나는 요소가 상단에 나타납니다. relative flexbox와 함께 z-index를 사용하여 겹치는 요소를 만들 수 있습니까?

예, Flexbox와 함께

속성을 ​​사용하여 겹치는 요소를 생성 할 수 있습니다. Flex 프로젝트에 다른 는 포지셔닝 요소에만 적합하므로 가 적용하려면 Flex 프로젝트를 배치해야합니다.

나는 모든 이미지 링크를 원래 형식으로 유지했으며 텍스트를 의사 조직화하여 원래 의미를 바꾸지 않고 기사를 더욱 다양한 것으로 만들기 위해 노력했습니다. Codepen 링크에 액세스 할 수 없으므로 원본 텍스트의 링크를 " Codepen Demo Link Z-Index

위 내용은 빠른 팁 : Flexbox에서 Z-INDEX 및 자동 여백이 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!