css 중앙 - 디스플레이의 차이:인라인-플렉스 및 디스플레이:플렉스




변수 정렬 (6)

속성 display:inline-flex; 이해하는 데 어려움이 display:inline-flex; . display:inline-flex; 의 차이점은 무엇입니까? 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>

JSFiddle 예제

그 차이점은 무엇입니까?


Answers

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

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

표시 : 인라인 플렉스 는 플렉스 항목이나 자식뿐만 아니라 컨테이너 자체에 플렉스 레이아웃을 적용합니다. 결과적으로 컨테이너는 어린이가하는 것처럼 인라인 플렉스 요소로 작동하므로 화면의 전체 너비가 아닌 항목 / 자식에만 필요한 너비를 차지합니다.

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


브라우저가 원하는 것을 알 수 있도록 좀 더 많은 정보가 필요합니다. 예를 들어, 컨테이너의 아이들은 "어떻게"구부릴 필요가 있습니다.

업데이트 된 바이올린

#wrapper > * { flex: 1; margin: auto; } 추가 #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } 를 CSS에 적용하고 inline-flexflex 변경하면 요소가 페이지에서 균일하게 간격을 유지하는 방식을 확인할 수 있습니다.


좋아, 처음에는 약간 혼란 스러울 지 모르지만 display 는 부모 요소에 대해 이야기하고 있으므로 우리가 말할 때 의미합니다. display: flex; , 그것은 요소에 관한 것이고 우리가 display:inline-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 모두 컨테이너의 자식에게 플렉스 레이아웃을 적용합니다. display:flex 컨테이너 display:flex 는 블록 수준 요소처럼 동작하지만 display:inline-flex 는 컨테이너를 인라인 요소처럼 작동합니다.


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

짧은 답변:

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

더 긴 대답 :

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

Flex - 컨테이너 및 해당 하위 컨테이너에는 flex 속성이 있지만 컨테이너는 문서의 정상 흐름에서 벗어나 행을 예약합니다. 문서 흐름과 관련하여 블록 요소처럼 응답합니다. 두 개의 플렉스 박스 컨테이너는 과도한 스타일링없이 동일한 행에 존재할 수 없습니다.

당신이 겪고있는 문제

귀하의 예제에 나열된 요소로 인해 추측 하긴하지만 플렉스를 사용하여 행 단위로 나열된 요소를 표시하지만 요소가 나란히 표시되는 것을 계속하고 싶다고 생각합니다.

문제가있는 이유는 flex 및 inline-flex의 기본 "flex-direction"속성이 "row"로 설정되어 있기 때문입니다. 그러면 아이들이 나란히 표시됩니다. 이 속성을 "column"으로 변경하면 요소를 스택하고 부모의 너비와 같은 공간 (너비)을 예약 할 수 있습니다.

다음은 플렉스 대 인라인 플렉스의 작동 방식과 인라인 대 블록 요소 작동 방식의 빠른 데모를 보여주는 몇 가지 예입니다.

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 tricks


w3schools로 이동하여 편집기에서 이미지 링크를 완전히 시도하거나 이미지 원본 url에서 이미지 src를 바꿀 수 있으므로이 작업을 시도하십시오. 그런 다음 창 크기를 조정하십시오.

당신이 알아 차릴 것입니다 .. 디스플레이의 경우 : 인라인, 텍스트는 단어로 나뉘며 텍스트의 일부 단어는 다음 줄에 나타납니다. float : left의 경우 전체 텍스트가 요소로 함께 표시되며 분할되지 않습니다.

인라인의 목적은 모든 것을 LINE에 표시하는 것입니다. 그러나 float의 목적은 요소를 어떤 차원에 맞추어 정렬하는 것입니다.

<!DOCTYPE html>
<html>
<head>
<style>
.thumb 
{
float:left;
}
.thumbnail 
{
display:inline;
}
</style>
</head>

<body>
<h3>Image Gallery</h3>
<br>Below are the inline elements<br>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<p class="thumbnail">Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<br><br>Below is the floating elements<br><br>
<img class="thumb" src="klematis_small.jpg" width="107" height="90">
<img class="thumb" src="klematis2_small.jpg" width="107" height="80">
<img class="thumb" src="klematis3_small.jpg" width="116" height="90">
<img class="thumb" src="klematis4_small.jpg" width="120" height="90">
<p class="thumb">Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumb" src="klematis_small.jpg" width="107" height="90">
<img class="thumb" src="klematis2_small.jpg" width="107" height="80">
<img class="thumb" src="klematis3_small.jpg" width="116" height="90">
<img class="thumb" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>






css css3 flexbox