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

ID 래퍼 내에서 요소를 세로로 정렬하려고합니다. 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>

스 니펫 확장

답변

display: inline-flex플렉스 항목을 인라인으로 표시 하지 않습니다 . 그것은 만드는 플렉스 컨테이너 디스플레이 인라인. 즉, 유일한 차이점이다 display: inline-flex하고 display: flex. 유사한 비교 사이에 통신이 가능 display: inline-block하고 display: block, 그리고 거의 인라인 대응을 갖는 다른 디스플레이 유형 . ¹

플렉스 아이템에 미치는 영향에는 전혀 차이가 없습니다. 플렉스 레이아웃은 플렉스 컨테이너가 블록 수준이든 인라인 수준이든 동일합니다. 특히 플렉스 항목 자체는 항상 블록 수준 상자처럼 동작합니다 ( 인라인 블록의 일부 속성 이 있더라도 ). 플렉스 항목을 인라인으로 표시 할 수 없습니다. 그렇지 않으면 실제로 플렉스 레이아웃이 없습니다.

“수직 정렬”이 정확히 무엇을 의미하는지 또는 왜 정확히 내용을 인라인으로 표시하고 싶은지는 확실하지 않지만 flexbox가 달성하려는 모든 것에 적합한 도구가 아니라고 생각합니다. 당신이 찾고 있는 것은 flexbox가 대체 가 아닌 평범한 오래된 인라인 레이아웃 ( display: inline및 / 또는 display: inline-block) 일 것입니다 . flexbox는 모든 사람들이 주장하는 범용 레이아웃 솔루션 이 아닙니다 (오해가 아마 flexbox를 처음 고려하는 이유이기 때문에 이것을 진술하고 있습니다).

¹ _{블록 레이아웃과 인라인 레이아웃의 차이점은이 질문의 범위를 벗어난 것이지만 가장 눈에 띄는 것은 자동 너비입니다. 블록 수준 상자는 가로로 확장되어 포함 된 블록을 채우고 인라인 수준 상자는 줄어 듭니다. 내용. 실제로, 이러한 이유만으로도 display: inline-flexFlex 컨테이너를 인라인으로 표시해야 할 이유가 없다면 거의 사용 하지 않을 것입니다.}

답변

좋아, 처음에는 약간 혼란 스러울 수 있지만 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>

스 니펫 확장

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

답변

flex그리고 inline-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;

깡깡이

display: flex; flex-direction: row;

깡깡이

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

깡깡이

display: flex; flex-direction: column;

깡깡이

display: inline;

깡깡이

display: block

깡깡이

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

답변

Display : flex Flex 아이템 또는 컨테이너의 자식에만 Flex 레이아웃을 적용합니다. 따라서 컨테이너 자체는 블록 레벨 요소를 유지하므로 화면의 전체 너비를 차지합니다.

이렇게하면 모든 플렉스 컨테이너가 화면의 새 줄로 이동합니다.

Display : inline-flex 플렉스 레이아웃은 플렉스 아이템이나 어린이 및 컨테이너 자체에 적용됩니다. 결과적으로 컨테이너는 어린이와 마찬가지로 인라인 플렉스 요소로 작동하므로 화면의 전체 너비가 아닌 항목 / 어린이 만 필요한 너비를 차지합니다.

이로 인해 두 개 이상의 플렉스 컨테이너가 차례로 인라인 플렉스로 표시되고 화면의 전체 너비가 확보 될 때까지 화면에 나란히 정렬됩니다.

답변

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

업데이트 된 바이올린

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

답변

더 나은 이해를 위해 전체 페이지에서 열기

.item {
  width : 100px;
  height : 100px;
  margin: 20px;
  border: 1px solid blue;
  background-color: yellow;
  text-align: center;
  line-height: 99px;
}

.flex-con {
  flex-wrap: wrap;
  /* <A>    */
  display: flex;
  /* 1. uncomment below 2 lines by commenting above 1 line */
  /* <B>   */
/*   display: inline-flex; */

}

.label {
  padding-bottom: 20px;
}
.flex-inline-play {
  padding: 20px;
  border: 1px dashed green;
/*  <C> */
  width: 1000px;
/*   <D> */
  display: flex;
}

<figure>
  <blockquote>
     <h1>Flex vs inline-flex</h1>
    <cite>This pen is understand difference between
    flex and inline-flex. Follow along to understand this basic property of css</cite>
    <ul>
      <li>Follow #1 in CSS:
        <ul>
          <li>Comment <code>display: flex</code></li>
          <li>Un-comment <code>display: inline-flex</code></li>
        </ul>
      </li>
      <li>
        Hope you would have understood till now. This is very similar to situation of `inline-block` vs `block`. Lets go beyond and understand usecase to apply learning. Now lets play with combinations of A, B, C & D by un-commenting only as instructed:
        <ul>
					<li>A with D -- does this do same job as <code>display: inline-flex</code>. Umm, you may be right, but not its doesnt do always, keep going !</li>
          <li>A with C</li>
          <li>A with C & D -- Something wrong ? Keep going !</li>
          <li>B with C</li>
          <li>B with C & D -- Still same ? Did you learn something ? inline-flex is useful if you have space to occupy in parent of 2 flexboxes <code>.flex-con</code>. That's the only usecase</li>
        </ul>
      </li>
    </ul>
  </blockquote>

</figure>
<br/>
 <div class="label">Playground:</div>
<div class="flex-inline-play">
  <div class="flex-con">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="flex-con">
    <div class="item">X</div>
    <div class="item">Y</div>
    <div class="item">Z</div>
    <div class="item">V</div>
    <div class="item">W</div>
  </div>
</div>

스 니펫 확장