blocks|key|4550435|text|您需要更多信息，以便浏览器知道您想要什么。例如，容器的子节点需要被告知“如何”伸缩。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4550436|Updated+Fiddle|offset|length|4550437|我已经将#wrapper+>+*+{+flex:+1;+margin:+auto;+}添加到您的CSS中，并将inline-flex更改为flex，您可以看到元素现在是如何在页面上均匀分布的。|style|CODE|4550438|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/fishgraphics/vUSmV/93/^0|0|0|E|0|0|4|13|1J|B|1X|4|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@$D|X|E|Y|H|I]|$D|Z|E|10|H|I]|$D|11|E|12|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>You need a bit more information so that the browser knows what you want. For instance, the children of the container need to be told "how" to flex.</p>

<p><a href="http://jsfiddle.net/fishgraphics/vUSmV/93/" rel="nofollow">Updated Fiddle</a></p>

<p>I've added <code>#wrapper &gt; * { flex: 1; margin: auto; }</code> to your CSS and changed <code>inline-flex</code> to <code>flex</code>, and you can see how the elements now space themselves out evenly on the page.</p>


blocks|key|4550462|text|flex和inline-flex都将flex布局应用于容器的子容器。具有display:flex的容器本身的行为类似于块级元素，而display:inline-flex使容器的行为类似于内联元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4550463|entityMap^0|0|4|5|B|10|C|1T|J|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

<p><code>flex</code> and <code>inline-flex</code> both apply flex layout to children of the container. Container with <code>display:flex</code> behaves like a block-level element itself, while <code>display:inline-flex</code> makes the container behaves like an inline element.</p>


blocks|key|4550481|text|整页打开，以便更好地理解|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4550482|​|4550483|.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;
}|code-block|syntax|javascript|4550484|<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>|4550485|4550486|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Open in Full page for better understanding</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  /* &lt;A&gt;    */
  display: flex;
  /* 1. uncomment below 2 lines by commenting above 1 line */
  /* &lt;B&gt;   */
/*   display: inline-flex; */
	
}

.label {
  padding-bottom: 20px;
}
.flex-inline-play {
  padding: 20px;
  border: 1px dashed green;
/*  &lt;C&gt; */
  width: 1000px;
/*   &lt;D&gt; */
  display: flex;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;figure&gt;
  &lt;blockquote&gt;
     &lt;h1&gt;Flex vs inline-flex&lt;/h1&gt;
    &lt;cite&gt;This pen is understand difference between
    flex and inline-flex. Follow along to understand this basic property of css&lt;/cite&gt;
    &lt;ul&gt;
      &lt;li&gt;Follow #1 in CSS:
        &lt;ul&gt;
          &lt;li&gt;Comment &lt;code&gt;display: flex&lt;/code&gt;&lt;/li&gt;
          &lt;li&gt;Un-comment &lt;code&gt;display: inline-flex&lt;/code&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        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 &amp; D by un-commenting only as instructed:
        &lt;ul&gt;
					&lt;li&gt;A with D -- does this do same job as &lt;code&gt;display: inline-flex&lt;/code&gt;. Umm, you may be right, but not its doesnt do always, keep going !&lt;/li&gt;
          &lt;li&gt;A with C&lt;/li&gt;
          &lt;li&gt;A with C &amp; D -- Something wrong ? Keep going !&lt;/li&gt;
          &lt;li&gt;B with C&lt;/li&gt;
          &lt;li&gt;B with C &amp; D -- Still same ? Did you learn something ? inline-flex is useful if you have space to occupy in parent of 2 flexboxes &lt;code&gt;.flex-con&lt;/code&gt;. That's the only usecase&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/blockquote&gt;
  
&lt;/figure&gt;
&lt;br/&gt;
 &lt;div class="label"&gt;Playground:&lt;/div&gt;
&lt;div class="flex-inline-play"&gt;
  &lt;div class="flex-con"&gt;
    &lt;div class="item"&gt;1&lt;/div&gt;
    &lt;div class="item"&gt;2&lt;/div&gt;
    &lt;div class="item"&gt;3&lt;/div&gt;
    &lt;div class="item"&gt;4&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="flex-con"&gt;
    &lt;div class="item"&gt;X&lt;/div&gt;
    &lt;div class="item"&gt;Y&lt;/div&gt;
    &lt;div class="item"&gt;Z&lt;/div&gt;
    &lt;div class="item"&gt;V&lt;/div&gt;
    &lt;div class="item"&gt;W&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I am trying to vertically align elements within an ID wrapper. I gave the property <code>display:inline-flex;</code> to this ID as the ID wrapper is the flex container.</p>

<p>But there is no difference in presentation. I expected that everything in the wrapper ID would be displayed <code>inline</code>. Why isn't it?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
    display: inline-flex;
    /*no difference to display:flex; */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="wrapper"&gt;
        &lt;header&gt;header&lt;/header&gt;
        &lt;nav&gt;nav&lt;/nav&gt;
        &lt;aside&gt;aside&lt;/aside&gt;
        &lt;main&gt;main&lt;/main&gt;
        &lt;footer&gt;footer&lt;/footer&gt;
    &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>


What's the difference between display:inline-flex and display:flex?

我正在尝试垂直对齐ID包装器中的元素。我为这个ID赋予了属性display:inline-flex;，因为ID包装器是flex容器。但在表现上没有区别。我希望包装器ID中的所有内容都显示为inline。为什么不是呢？​#wrapper {    display: inline-flex;    /*no differe...

问display:inline-flex和display:flex有什么区别？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问display:inline-flex和display:flex有什么区别？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问display:inline-flex和display:flex有什么区别？
EN