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-flexflexアイテムをインラインで表示しません。それは作るフレックスコンテナの表示をインライン。それは唯一の違いであるdisplay: inline-flexとdisplay: flex。同様の比較は、間にすることができるdisplay: inline-blockとdisplay: blockし、かなりのインライン対応物を有する任意の他のディスプレイタイプ。1
フレックスアイテムへの影響に違いはまったくありません。フレックスレイアウトは、フレックスコンテナーがブロックレベルでもインラインレベルでも同じです。特に、フレックスアイテム自体は常にブロックレベルのボックスのように動作します（ただし、インラインブロックにはいくつかのプロパティがあります）。フレックスアイテムをインラインで表示することはできません。それ以外の場合、実際にはフレックスレイアウトはありません。
「垂直方向に揃える」が正確に何を意味するのか、なぜコンテンツをインラインで表示したいのかは明確ではありませんが、Flexboxは目的を達成するための適切なツールではないようです。あなたが探しているのは、単なる古いインラインレイアウト（display: inlineおよび/またはdisplay: inline-block）であり、これはflexboxに代わるものではありません。フレックスボックスは、誰もが主張するユニバーサルレイアウトソリューションではありません（誤解があるために、そもそもフレックスボックスを検討しているのはおそらくこのためです。
1 ブロックレイアウトとインラインレイアウトの違いはこの質問の範囲外ですが、最も目立つのは自動幅です：ブロックレベルのボックスは水平方向に伸びて包含ブロックを埋めますが、インラインレベルのボックスは縮小して内容。実際、この理由だけで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>また、以下の画像をすばやく作成して、違いを一目で確認できます。
「フレックス」と「インラインフレックス」の違い
短い答え：
1つはインラインで、もう1つは基本的にブロック要素のように応答します（ただし、独自の違いもあります）。
より長い答え：
インラインフレックス-インラインバージョンのフレックスを使用すると、要素とその子がフレックスプロパティを保持しながら、ドキュメント/ Webページの通常のフローを維持できます。基本的に、幅が小さければ、同じ行に2つのインラインフレックスコンテナーを配置できます。幅を十分に小さくして、同じ行にそれらを配置するための余分なスタイルを設定する必要はありません。これは「インラインブロック」によく似ています。
Flex-コンテナとその子にはflexプロパティがありますが、コンテナは行を予約します。これは、ドキュメントの通常のフローから取り出されるためです。文書の流れという点では、ブロック要素のように応答します。2つのフレックスボックスコンテナーは、過剰なスタイリングなしでは同じ行に存在できません。
あなたが抱えている問題
あなたの例にリストした要素が原因で、私は推測していますが、flexを使用して、リストされた要素を行ごとに均等に表示し、引き続き要素を並べて表示したいと思います。
問題が発生する可能性があるのは、flexとinline-flexのデフォルトの "flex-direction"プロパティが "row"に設定されているためです。これにより、子が並べて表示されます。このプロパティを "column"に変更すると、要素を積み重ねて、親の幅と同じスペース（幅）を予約できます。
以下はflexとinline-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また、優れたリファレンスドキュメント： Flexboxの完全ガイド-CSSトリック
Display：flexは、コンテナーのフレックスアイテムまたは子にのみフレックスレイアウトを適用します。したがって、コンテナ自体はブロックレベルの要素のままであり、画面の幅全体を占めます。
これにより、すべてのフレックスコンテナーが画面上の新しい行に移動します。
Display：inline-flexは、フレックスレイアウトをフレックスアイテムまたは子だけでなく、コンテナー自体にも適用します。その結果、コンテナは子と同じようにインラインflex要素として動作し、画面の幅全体ではなく、アイテム/子のみが必要とする幅を占有します。
これにより、2つ以上のフレックスコンテナーが次々に表示され、インラインフレックスとして表示され、画面の幅全体が表示されるまで、画面上で並べて配置されます。
ブラウザーが必要なものを認識できるように、もう少し情報が必要です。たとえば、コンテナの子には、「どのように」フレックスするかを指示する必要があります。
#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によってオリジナルフィドル