programing

디스플레이: 인라인 플렉스와 디스플레이: 플렉스의 차이점은 무엇입니까?

bestprogram 2023. 8. 15. 11:18

디스플레이: 인라인 플렉스와 디스플레이: 플렉스의 차이점은 무엇입니까?

ID 래퍼 내에서 요소를 수직으로 정렬하려고 합니다.나는 재산을 줬습니다.display:inline-flex;이 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유연한 항목은 인라인으로 표시되지 않습니다.Flex 컨테이너가 인라인으로 표시되도록 합니다.그것이 사이의 유일한 차이점입니다.display: inline-flex그리고.display: flex유사한 비교는 다음과 같습니다.display: inline-block그리고.display: block그리고 인라인 ¹대응물이 있는 다른 디스플레이 유형과 거의 비슷합니다.

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

"수직 정렬"이 정확히 무엇을 의미하는지 또는 콘텐츠를 인라인으로 표시하려는 이유가 정확히 무엇인지는 분명하지 않지만, Flexbox는 무엇을 달성하려는 경우에도 적합한 도구가 아니라고 생각합니다. 있는 은 플레인 레이아웃일 .display: inline 및/는display: inline-blockflexbox는 대체품이 아닙니다. flexbox는 모든 사람이 주장하는 범용 레이아웃 솔루션이 아닙니다(처음에 flexbox를 고려하는 이유는 오해 때문일 것이기 때문입니다).

¹ _{블록 레이아웃과 인라인 레이아웃의 차이는 이 질문의 범위를 벗어나지만, 가장 눈에 띄는 것은 자동 너비입니다. 블록 레벨 상자는 포함된 블록을 채우기 위해 수평으로 확장되고 인라인 레벨 상자는 내용에 맞게 축소됩니다.사실, 이 이유만으로 당신은 거의 사용하지 않을 것입니다.display: inline-flex플렉스 컨테이너를 인라인으로 표시해야 하는 아주 좋은 이유가 없는 한.}

네, 처음에는 좀 헷갈리겠지만,display요소를 말할를 의미합니다.display: flex;그것은 요소에 관한 것이고 우리가 말할 때.display:inline-flex;를 또한요자만있들습고다니체를소▁the있▁making▁also▁itself다습니▁element▁is만으로 만들고 있습니다.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컨테이너가 인라인 요소처럼 작동하도록 합니다.

값을 사용하는 방법`display` 대신,을 위해 을, 명성위해확구

그display사실 CSS 속성은 외부 디스플레이 유형과 내부 디스플레이 유형의 두 가지를 동시에 설정합니다.외부 디스플레이 유형은 요소(컨테이너 역할)가 컨텍스트에서 표시되는 방식에 영향을 미칩니다.내부 디스플레이 유형은 요소의 하위 요소(또는 용기의 하위 요소)가 배치되는 방식에 영향을 미칩니다.

개의 값을 display구문은 Firefox와 같은 일부 브라우저에서만 지원되며, 둘 사이의 차이는 훨씬 더 분명합니다.

display: block는 와동합다니등다에 합니다.display: block flow
display: inline는 와동합다니등다에 합니다.display: inline flow
display: flex는 와동합다니등다에 합니다.display: block flex
display: inline-flex는 와동합다니등다에 합니다.display: inline flex
display: grid는 와동합다니등다에 합니다.display: block grid
display: inline-grid는 와동합다니등다에 합니다.display: inline grid

유형: 외부디레이유형스:`block`또는`inline`:

이 외디스플유다같요은인 .block그것에 이용 가능한 모든 폭을 차지할 것입니다, 마치.<div> 외부 이 렇습니인 입니다. 외부 디스플레이 유형이 다음과 같은 요소가 있습니다.inline필요한 너비만 차지할 것입니다. 포장과 함께, 예를 들면.<span> 그렇습니다.

유형: 내부디레이유형플:`flow`,`flex`또는`grid`:

타입 부내플이유형레스디형.flow 우 디 형입 니이 레플 부내 본▁display ▁the ▁typeflex또는grid지정되지 않았습니다.그것은 우리가 익숙한 어린이 요소를 배치하는 방법입니다.<p>예를 들어.flex그리고.grid각자의 직책을 맡을 자격이 있는 아이들을 배치하는 새로운 방법입니다.

결론:

의 display: flex그리고.display: inline-flex 첫은 외부디레유이며형, 첫번외디이유레형입니다.block 두은 그고두번외째디부유이은형레입니다.inline두 가지 모두 내부 디스플레이 유형이 있습니다.flex.

참조:

mozzilla.org 에 있는 CSS Display 속성의 두 값 구문

"유연성"과 "인라인유연성"의 차이점

단답:

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

긴 답변:

인라인-Flex - 인라인 버전의 Flex를 사용하면 요소와 하위 요소가 문서/웹 페이지의 일반적인 흐름에 남아 있는 동안 Flex 속성을 가질 수 있습니다.기본적으로 두 개의 인라인 플렉스 컨테이너를 같은 행에 배치할 수 있습니다(폭이 충분히 작으면 동일한 행에 두 개의 인라인 플렉스 컨테이너를 배치할 수 있습니다).이것은 "인라인 블록"과 상당히 유사합니다.

유연성 - 컨테이너와 하위 컨테이너는 유연성 속성을 가지고 있지만 컨테이너는 문서의 일반적인 흐름에서 제외되므로 행을 예약합니다.문서 흐름 측면에서 블록 요소처럼 응답합니다.두 개의 Flexbox 컨테이너는 스타일이 과도하지 않으면 동일한 행에 존재할 수 없습니다.

당신이 가지고 있을 수 있는 문제.

예에서 나열한 요소로 인해, 제 생각에는 플렉스를 사용하여 나열된 요소를 행별로 균등하게 표시하되 요소를 나란히 표시하는 것이 좋습니다.

Flex 및 인라인-Flex의 기본 "Flex-direction" 속성이 "row"로 설정되어 있기 때문에 문제가 발생할 수 있습니다.이렇게 하면 어린이가 나란히 표시됩니다.이 속성을 "열"로 변경하면 요소가 쌓이고 부모 너비와 동일한 공간(폭)을 예약할 수 있습니다.

다음은 Flex 대 인라인-Flex의 작동 방식을 보여주는 몇 가지 예와 인라인 대 블록 요소의 작동 방식에 대한 간단한 데모입니다.

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

피들

또한, 훌륭한 참조 문서: 플렉스박스에 대한 완전한 가이드 - css tricks.

디스플레이:유연한 플렉스 레이아웃을 용기의 플렉스 항목 또는 하위 항목에만 적용합니다.따라서 컨테이너 자체가 블록 레벨 요소로 남아 화면의 전체 너비를 차지합니다.

이로 인해 모든 플렉스 용기가 화면의 새 줄로 이동합니다.

디스플레이: 인라인 플렉스 레이아웃을 플렉스 항목 또는 하위 항목뿐만 아니라 용기 자체에도 적용합니다.따라서 컨테이너는 어린이와 마찬가지로 인라인 플렉스 요소로 작동하므로 화면의 전체 너비가 아닌 항목/어린이에 필요한 너비만 차지합니다.

이로 인해 두 개 이상의 플렉스 용기가 차례로 발생하며, 인라인 플렉스로 표시되며, 화면의 전체 너비가 확보될 때까지 화면에서 나란히 정렬됩니다.

화면 판독기 동작에 대한 몇 가지 세부 사항을 추가하고 싶습니다. 놀라운 점이 있기 때문입니다.

일단 배경부터.NVDA 핸들과 같은 일부 화면 판독기display: block그리고.display: inline-block다르게 (그리고 나중에 보시겠지만, 그들은 그렇게 해야 합니다.).

서로 다른 항목 간의 비교`display` 설정

`display: block`

A display: block됩니다. 후 요소를 알리도록 으로 "" "" "와 함께", NVDA는 다음 요소를 합니다).Down화살표 키)를 누릅니다.

<div>This is the first line</div>
<div>This is another line</div>

가 NVDA를 발표하게 될 입니다.This is the first line,그리고 나서.This is another line.

다음은 동일한 결과를 산출합니다.

<span style="display: block">This is the first line</span>
<span style="display: block">This is another line</span>

`display: inline-block`

A display: inline-block는 다른 및 요소와 됩니다.display: inline그리고.display: inline-block).

<span style="display: inline-block">This is the first line</span>
<span style="display: inline-block">This is another line</span>

가 두 를 한에 알 수 있습니다.This is the first line This is another line.

앞서 말한 바와 같이, 그것이 그것인지 아닌지는 중요하지 않습니다.inline또는inline-block요소. 다음과 같은 결과를 생성합니다.

<span style="display: inline">This is the first line</span>     <!-- Inline! -->
<span style="display: inline-block">This is another line</span> <!-- Inline block! -->

`display: flex`

이것은 정확히 다음과 같이 작동합니다.display: block.

`display: inline-flex`

놀랍게도, 이것은 또한 다음과 같이 작동합니다.display: block같지 않은display: inline-block!

`display: grid`/`display: inline-grid`

저는 이것을 테스트하지 않았지만, 저는 그것과 같은 것을 기대합니다.flex/inline-flex여기서.

그게 왜 문제야?

용사를 합니다.display: inline-block시각적으로 매우 구별되는 요소를 만들 수 있지만 의미론적으로는 "하나로" 취급됩니다.

예를 들어 온라인 뉴스 플랫폼의 다음 헤드라인을 생각해 보십시오.

<h2>
  <span class="category">Rain forests</span>
  They need our love
</h2>

카테고리에.Rain forests의 사랑을 는 진짜 제목과는 . 줄에 "은 우리의 사랑이 필요하다"는 것입니다.

만약 당신이 카테고리를 a로 만든다면.display: block요소를 선택하면 화면 판독기가 다음과 같이 두 개의 별도 행으로 제목을 표시합니다.Rain forests, heading level 2,그리고나서They need our love, heading level 2이것은 사용자에게 혼란을 줍니다: 페이지에 두 개의 다른 제목이 있습니까?첫 번째 항목에 대한 내용이 없는 이유는 무엇입니까? (그 대신, 즉시 명백한 두 번째 제목이 뒤따르는 것 같습니다.)

를 카테고리로 display: inline-block을 한: 요를선택화판면독제가한목번알을에립다니기소면하,▁element알다▁the▁reader립니▁in▁announce번▁heading▁would.Rain forests They need our love, heading level 2.

슬프다, 그것은display: inline-flex 아마)inline-gridtoo. too)는 행동을 모방합니다.따라서 완벽한 접근성을 제공하려면 다음과 같이 사용할 수 있습니다.inline-block이런 경우에는

우선 유연한 인라인 항목을 원하는 것을 기준으로 가정할 경우 유연한 항목을 인라인으로 표시할 수 있습니다.유연성을 사용하면 유연한 블록 수준 요소를 의미합니다.

가장 간단한 방법은 자식이 Flex 속성으로 설정된 Flex 컨테이너를 사용하는 것입니다.코드 측면에서 이것은 다음과 같습니다.

.parent{
   display: inline-flex;
}

.children{
   flex: 1;
}

flex: 1요소 너비의 백분율과 유사한 비율을 나타냅니다.

간단한 실시간 Flexbox 예제를 보려면 다음 두 링크를 확인하십시오.

첫 번째 예제를 사용하는 경우:

https://njbenjamin.com/flex/index_1.htm

당신은 당신의 브라우저 콘솔을 가지고 놀 수 있고, 그것을 변경할 수 있습니다.display이▁element 사이의 컨테이너 flex그리고.inline-flex.

브라우저가 원하는 내용을 알 수 있도록 정보가 조금 더 필요합니다.예를 들어, 용기의 아이들에게 유연성을 "어떻게" 지어야 하는지를 알려줄 필요가 있습니다.

업데이트된 피들

추가했습니다.#wrapper > * { flex: 1; margin: auto; }의 CSS와 된 CSS로 되었습니다.inline-flexflex이제 요소들이 페이지에서 어떻게 균등하게 간격을 두는지 볼 수 있습니다.

이해를 돕기 위해 전체 페이지 열기

.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>

언급URL : https://stackoverflow.com/questions/27418104/whats-the-difference-between-displayinline-flex-and-displayflex

'programing' 카테고리의 다른 글

Java EE에 대한 RESTful 인증 (0)	2023.08.15
단추를 클릭할 때 jQuery를 사용하여 오디오 파일 재생 (0)	2023.08.15
스프링 보안 로그인 페이지에서 추가 매개 변수 전달 방법 (0)	2023.08.15
Vue.js 응용 프로그램에서 Excel 파일을 올바르게 다운로드하는 방법은 무엇입니까? (0)	2023.08.15
새 버전의 Android Emulator 문제 - 에뮬레이터 프로세스가 종료되었습니다. (0)	2023.08.15

현재글디스플레이: 인라인 플렉스와 디스플레이: 플렉스의 차이점은 무엇입니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

sql-server, Angular, json, Oracle, c, python, mongodb, angularJS, bash, Android, MYSQL, reactjs, ASP.NET, Excel, ajax, jquery, mariadb, git, Wordpress, spring-boot,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

bestprogram

디스플레이: 인라인 플렉스와 디스플레이: 플렉스의 차이점은 무엇입니까?

디스플레이: 인라인 플렉스와 디스플레이: 플렉스의 차이점은 무엇입니까?

값을 사용하는 방법`display` 대신,을 위해 을, 명성위해확구

유형: 외부디레이유형스:`block`또는`inline`:

유형: 내부디레이유형플:`flow`,`flex`또는`grid`:

결론:

참조:

서로 다른 항목 간의 비교`display` 설정

`display: block`

`display: inline-block`

`display: flex`

`display: inline-flex`

`display: grid`/`display: inline-grid`

그게 왜 문제야?

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

디스플레이: 인라인 플렉스와 디스플레이: 플렉스의 차이점은 무엇입니까?

디스플레이: 인라인 플렉스와 디스플레이: 플렉스의 차이점은 무엇입니까?

값을 사용하는 방법display 대신,을 위해 을, 명성위해확구

유형: 외부디레이유형스:block또는inline:

유형: 내부디레이유형플:flow,flex또는grid:

결론:

참조:

서로 다른 항목 간의 비교display 설정

display: block

display: inline-block

display: flex

display: inline-flex

display: grid/display: inline-grid

그게 왜 문제야?

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바

값을 사용하는 방법`display` 대신,을 위해 을, 명성위해확구

유형: 외부디레이유형스:`block`또는`inline`:

유형: 내부디레이유형플:`flow`,`flex`또는`grid`:

서로 다른 항목 간의 비교`display` 설정

`display: block`

`display: inline-block`

`display: flex`

`display: inline-flex`

`display: grid`/`display: inline-grid`