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, 그리고 거의 인라인 대응을 갖는 다른 디스플레이 유형 . 1
플렉스 아이템에 미치는 영향에는 전혀 차이가 없습니다. 플렉스 레이아웃은 플렉스 컨테이너가 블록 수준이든 인라인 수준이든 동일합니다. 특히 플렉스 항목 자체는 항상 블록 수준 상자처럼 작동합니다 ( 인라인 블록의 일부 속성 이 있더라도 ). 플렉스 항목을 인라인으로 표시 할 수 없습니다. 그렇지 않으면 실제로 플렉스 레이아웃이 없습니다.
"수직 정렬"이 정확히 무엇을 의미하는지 또는 왜 정확히 내용을 인라인으로 표시하고 싶은지는 확실하지 않지만 flexbox가 달성하려는 모든 것에 적합한 도구가 아니라고 생각합니다. 당신이 찾고 있는 것은 flexbox가 대체 가 아닌 평범한 오래된 인라인 레이아웃 ( display: inline및 / 또는 display: inline-block) 일 것입니다 . flexbox는 모든 사람들이 주장하는 보편적 인 레이아웃 솔루션 이 아닙니다 (오해가 아마 flexbox를 처음 고려하는 이유이기 때문에 이것을 진술하고 있습니다).
1 블록 레이아웃과 인라인 레이아웃의 차이점은이 질문의 범위를 벗어난 것이지만 가장 눈에 띄는 것은 자동 너비입니다. 블록 수준 상자는 가로로 늘어나서 포함하는 블록을 채우고 인라인 수준 상자는 줄어 듭니다. 내용. 사실,이 이유만으로도 display: inline-flexFlex 컨테이너를 인라인으로 표시해야 할 이유가 없다면 거의 사용 하지 않을 것입니다.
flex그리고 inline-flex둘은 컨테이너의 아이 플렉스 레이아웃을 적용 할 수 있습니다. 컨테이너 display:flex는 블록 레벨 요소 자체 display:inline-flex처럼 동작하지만 컨테이너는 인라인 요소처럼 동작합니다.
좋아, 처음에는 약간 혼란 스러울 수 있지만 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 속성을 가지지 만 컨테이너는 문서의 정상적인 흐름에서 제외되어 행을 예약합니다. 문서 흐름 측면에서 블록 요소처럼 반응합니다. 과도한 스타일링없이 두 개의 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페이지에서 요소가 어떻게 고르게 배치되는지 확인할 수 있습니다.
'Programing' 카테고리의 다른 글
| 스토리 보드 로그인 화면 모범 사례, 로그 아웃시 데이터 지우기 처리 (0) | 2020.03.21 |
|---|---|
| 일정 반복 / 반복 이벤트-최상의 저장 방법 (0) | 2020.03.21 |
| 이 핸들러 클래스는 정적이거나 누수가 발생할 수 있습니다. IncomingHandler (0) | 2020.03.21 |
| PHP + MySQL 트랜잭션 예제 (0) | 2020.03.21 |
| 부트 스트랩 4-Glyphicons 마이그레이션? (0) | 2020.03.21 |