css - 중앙 - display:inline-flex와 display:flex의 차이점은 무엇입니까?




css 중앙 정렬 (4)

브라우저가 원하는 것을 알 수 있도록 조금 더 많은 정보가 필요합니다. 예를 들어, 컨테이너의 자식들에게 "어떻게"구부릴 지 말해야합니다.

업데이트 된 바이올린

#wrapper > * { flex: 1; margin: auto; } 추가 #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } 를 CSS에 추가하고 inline-flexflex 변경했으며 이제 요소가 페이지에서 어떻게 고르게 배치되는지 확인할 수 있습니다.

ID 래퍼 내에서 요소를 세로로 정렬하려고합니다. 나는 속성 display:inline-flex; 주었다 display:inline-flex; ID 래퍼가 플렉스 컨테이너이므로이 ID에

그러나 표현에는 차이가 없습니다. 래퍼 ID의 모든 것이 inline 으로 표시 될 것으로 예상했습니다. 왜 그렇지 않습니까?

#wrapper {
    display: inline-flex;
    /*no difference to display:flex; */
}
<body>
    <div id="wrapper">
        <header>header</header>
        <nav>nav</nav>
        <aside>aside</aside>
        <main>main</main>
        <footer>footer</footer>
    </div>
</body>

JSFiddle 예제


좋아, 처음에는 약간 혼란 스러울 수 있지만 display 는 부모 요소에 대해 이야기하고 있으므로 다음과 같이 말할 때 의미합니다. display: flex; , 그것은 요소에 관한 것이고 display:inline-flex; 또한 요소 자체를 inline 만들고 있습니다 ...

div 인라인 또는 블록으로 만들고 아래 스 니펫을 실행하면 display flex 가 다음 라인으로 어떻게 분해되는지 볼 수 있습니다.

.inline-flex {
  display: inline-flex;
}

.flex {
  display: flex;
}

p {
  color: red;
}
<body>
  <p>Display Inline Flex</p>
  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <p>Display Flex</p>
  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>
</body>

또한 아래 이미지를 신속하게 작성하여 차이점을 한눈에 볼 수 있습니다.


flexinline-flex 는 컨테이너의 자식에 flex 레이아웃을 적용합니다. display:flex 컨테이너는 블록 수준 요소 자체처럼 동작하지만 display:inline-flex 는 컨테이너가 인라인 요소처럼 동작하도록합니다.


"flex"와 "inline-flex"의 차이점

짧은 답변:

하나는 인라인이고 다른 하나는 기본적으로 블록 요소처럼 반응합니다 (그러나 일부는 자체 차이점이 있습니다).

더 긴 답변 :

인라인 플렉스-인라인 버전의 flex는 요소와 그 자식이 문서 / 웹 페이지의 규칙적인 흐름을 유지하면서 플렉스 속성을 가질 수 있도록합니다. 기본적으로 너비가 충분히 작 으면 동일한 행에 두 개의 인라인 플렉스 컨테이너를 배치 할 수 있습니다. 이것은 "인라인 블록"과 매우 유사합니다.

Flex-컨테이너와 그 자식에는 flex 속성이 있지만 컨테이너는 문서의 정상적인 흐름에서 제외되어 행을 예약합니다. 문서 흐름 측면에서 블록 요소처럼 반응합니다. 과도한 스타일링없이 두 개의 flexbox 컨테이너가 동일한 행에 존재할 수 없습니다.

발생할 수있는 문제

예제에 나열된 요소로 인해 추측하고 있지만 flex를 사용하여 행 단위로 나열된 요소를 표시하려고하지만 요소를 나란히 계속보고 싶다고 생각합니다.

flex 및 inline-flex의 기본 "flex-direction"속성이 "row"로 설정되어 있기 때문에 문제가있을 수 있습니다. 자식들이 나란히 표시됩니다. 이 속성을 "column"으로 변경하면 요소가 부모의 너비와 동일한 공간 (너비)을 쌓고 예약 할 수 있습니다.

다음은 flex vs inline-flex 작동 방식과 인라인 vs 블록 요소 작동 방식에 대한 간단한 데모입니다.

display: inline-flex; flex-direction: row;

Fiddle

display: flex; flex-direction: row;

Fiddle

display: inline-flex; flex-direction: column;

Fiddle

display: flex; flex-direction: column;

Fiddle

display: inline;

Fiddle

display: block

Fiddle

또한 훌륭한 참조 문서 : Flexbox에 대한 완전한 안내서-CSS 트릭





flexbox