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, 그리고 거의 인라인 대응을 갖는 다른 디스플레이 유형 . 1
플렉스 아이템에 미치는 영향에는 전혀 차이가 없습니다. 플렉스 레이아웃은 플렉스 컨테이너가 블록 수준이든 인라인 수준이든 동일합니다. 특히 플렉스 항목 자체는 항상 블록 수준 상자처럼 동작합니다 ( 인라인 블록의 일부 속성 이 있더라도 ). 플렉스 항목을 인라인으로 표시 할 수 없습니다. 그렇지 않으면 실제로 플렉스 레이아웃이 없습니다.
"수직 정렬"이 정확히 무엇을 의미하는지 또는 왜 정확히 내용을 인라인으로 표시하고 싶은지는 확실하지 않지만 flexbox가 달성하려는 모든 것에 적합한 도구가 아니라고 생각합니다. 당신이 찾고 있는 것은 flexbox가 대체 가 아닌 평범한 오래된 인라인 레이아웃 ( display: inline및 / 또는 display: inline-block) 일 것입니다 . flexbox는 모든 사람들이 주장하는 범용 레이아웃 솔루션 이 아닙니다 (오해가 아마 flexbox를 처음 고려하는 이유이기 때문에 이것을 진술하고 있습니다).
1 블록 레이아웃과 인라인 레이아웃의 차이점은이 질문의 범위를 벗어난 것이지만 가장 눈에 띄는 것은 자동 너비입니다. 블록 수준 상자는 가로로 확장되어 포함 된 블록을 채우고 인라인 수준 상자는 줄어 듭니다. 내용. 실제로, 이러한 이유만으로도 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"의 차이점
짧은 답변:
하나는 인라인이고 다른 하나는 기본적으로 블록 요소처럼 반응하지만 일부 자체 차이점이 있습니다.
더 긴 답변 :
인라인 플렉스-인라인 버전의 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>
inline-flex및flex: jsfiddle.net/mgr0en3q/1 @ 물고기 그래픽 및 @astridx에 의해 원래 바이올린