I am trying to vertically align elements within an ID wrapper. I gave the property display:inline-flex; to this ID as the ID wrapper is the flex container.
But there is no difference in presentation. I expected that everything in the wrapper ID would be displayed inline. Why isn't it?
#wrapper {_x000D_
display: inline-flex;_x000D_
/*no difference to display:flex; */_x000D_
}<body>_x000D_
<div id="wrapper">_x000D_
<header>header</header>_x000D_
<nav>nav</nav>_x000D_
<aside>aside</aside>_x000D_
<main>main</main>_x000D_
<footer>footer</footer>_x000D_
</div>_x000D_
</body>The answer is
flex and inline-flex both apply flex layout to children of the container. Container with display:flex behaves like a block-level element itself, while display:inline-flex makes the container behaves like an inline element.
The Difference between "flex" and "inline-flex"
Short answer:
One is inline and the other basically responds like a block element(but has some of it's own differences).
Longer answer:
Inline-Flex - The inline version of flex allows the element, and it's children, to have flex properties while still remaining in the regular flow of the document/webpage. Basically, you can place two inline flex containers in the same row, if the widths were small enough, without any excess styling to allow them to exist in the same row. This is pretty similar to "inline-block."
Flex - The container and it's children have flex properties but the container reserves the row, as it is taken out of the normal flow of the document. It responds like a block element, in terms of document flow. Two flexbox containers could not exist on the same row without excess styling.
The problem you may be having
Due to the elements you listed in your example, though I am guessing, I think you want to use flex to display the elements listed in an even row-by-row fashion but continue to see the elements side-by-side.
The reason you are likely having issues is because flex and inline-flex have the default "flex-direction" property set to "row." This will display the children side-by side. Changing this property to "column" will allow your elements to stack and reserve space(width) equal to the width of its parent.
Below are some examples to show how flex vs inline-flex works and also a quick demo of how inline vs block elements work...
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
Also, a great reference doc: A Complete Guide to Flexbox - css tricks
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.
I've added #wrapper > * { flex: 1; margin: auto; } to your CSS and changed inline-flex to flex, and you can see how the elements now space themselves out evenly on the page.
You can display flex items inline, providing your assumption is based on wanting flexible inline items in the 1st place. Using flex implies a flexible block level element.
The simplest approach is to use a flex container with its children set to a flex property. In terms of code this looks like this:
.parent{
display: inline-flex;
}
.children{
flex: 1;
}
flex: 1 denotes a ratio, similar to percentages of a element's width.
Check these two links in order to see simple live Flexbox examples:
If you use the 1st example:
https://njbenjamin.com/flex/index_1.htm
You can play around with your browser console, to change the display of the container element between flex and inline-flex.
Display:flex apply flex layout to the flex items or children of the container only. So, the container itself stays a block level element and thus takes up the entire width of the screen.
This causes every flex container to move to a new line on the screen.
Display:inline-flex apply flex layout to the flex items or children as well as to the container itself. As a result the container behaves as an inline flex element just like the children do and thus takes up the width required by its items/children only and not the entire width of the screen.
This causes two or more flex containers one after another, displayed as inline-flex, align themselves side by side on the screen until the whole width of the screen is taken.
Open in Full page for better understanding
.item {_x000D_
width : 100px;_x000D_
height : 100px;_x000D_
margin: 20px;_x000D_
border: 1px solid blue;_x000D_
background-color: yellow;_x000D_
text-align: center;_x000D_
line-height: 99px;_x000D_
}_x000D_
_x000D_
.flex-con {_x000D_
flex-wrap: wrap;_x000D_
/* <A> */_x000D_
display: flex;_x000D_
/* 1. uncomment below 2 lines by commenting above 1 line */_x000D_
/* <B> */_x000D_
/* display: inline-flex; */_x000D_
_x000D_
}_x000D_
_x000D_
.label {_x000D_
padding-bottom: 20px;_x000D_
}_x000D_
.flex-inline-play {_x000D_
padding: 20px;_x000D_
border: 1px dashed green;_x000D_
/* <C> */_x000D_
width: 1000px;_x000D_
/* <D> */_x000D_
display: flex;_x000D_
}<figure>_x000D_
<blockquote>_x000D_
<h1>Flex vs inline-flex</h1>_x000D_
<cite>This pen is understand difference between_x000D_
flex and inline-flex. Follow along to understand this basic property of css</cite>_x000D_
<ul>_x000D_
<li>Follow #1 in CSS:_x000D_
<ul>_x000D_
<li>Comment <code>display: flex</code></li>_x000D_
<li>Un-comment <code>display: inline-flex</code></li>_x000D_
</ul>_x000D_
</li>_x000D_
<li>_x000D_
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:_x000D_
<ul>_x000D_
<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>_x000D_
<li>A with C</li>_x000D_
<li>A with C & D -- Something wrong ? Keep going !</li>_x000D_
<li>B with C</li>_x000D_
<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>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
</blockquote>_x000D_
_x000D_
</figure>_x000D_
<br/>_x000D_
<div class="label">Playground:</div>_x000D_
<div class="flex-inline-play">_x000D_
<div class="flex-con">_x000D_
<div class="item">1</div>_x000D_
<div class="item">2</div>_x000D_
<div class="item">3</div>_x000D_
<div class="item">4</div>_x000D_
</div>_x000D_
<div class="flex-con">_x000D_
<div class="item">X</div>_x000D_
<div class="item">Y</div>_x000D_
<div class="item">Z</div>_x000D_
<div class="item">V</div>_x000D_
<div class="item">W</div>_x000D_
</div>_x000D_
</div>OK, I know at first might be a bit confusing, but display is talking about the parent element, so means when we say: display: flex;, it's about the element and when we say display:inline-flex;, is also making the element itself inline...
It's like make a div inline or block, run the snippet below and you can see how display flex breaks down to next line:
.inline-flex {_x000D_
display: inline-flex;_x000D_
}_x000D_
_x000D_
.flex {_x000D_
display: flex;_x000D_
}_x000D_
_x000D_
p {_x000D_
color: red;_x000D_
}<body>_x000D_
<p>Display Inline Flex</p>_x000D_
<div class="inline-flex">_x000D_
<header>header</header>_x000D_
<nav>nav</nav>_x000D_
<aside>aside</aside>_x000D_
<main>main</main>_x000D_
<footer>footer</footer>_x000D_
</div>_x000D_
_x000D_
<div class="inline-flex">_x000D_
<header>header</header>_x000D_
<nav>nav</nav>_x000D_
<aside>aside</aside>_x000D_
<main>main</main>_x000D_
<footer>footer</footer>_x000D_
</div>_x000D_
_x000D_
<p>Display Flex</p>_x000D_
<div class="flex">_x000D_
<header>header</header>_x000D_
<nav>nav</nav>_x000D_
<aside>aside</aside>_x000D_
<main>main</main>_x000D_
<footer>footer</footer>_x000D_
</div>_x000D_
_x000D_
<div class="flex">_x000D_
<header>header</header>_x000D_
<nav>nav</nav>_x000D_
<aside>aside</aside>_x000D_
<main>main</main>_x000D_
<footer>footer</footer>_x000D_
</div>_x000D_
</body>Also quickly create the image below to show the difference at a glance:
Using two-value display syntax instead, for clarity
The display CSS property in fact sets two things at once: the outer display type, and the inner display type. The outer display type affects how the element (which acts as a container) is displayed in its context. The inner display type affects how the children of the element (or the children of the container) are laid out.
If you use the two-value display syntax, which is only supported in some browsers like Firefox, the difference between the two is much more obvious:
display: blockis equivalent todisplay: block flowdisplay: inlineis equivalent todisplay: inline flowdisplay: flexis equivalent todisplay: block flexdisplay: inline-flexis equivalent todisplay: inline flexdisplay: gridis equivalent todisplay: block griddisplay: inline-gridis equivalent todisplay: inline grid
Outer display type: block or inline:
An element with the outer display type of block will take up the whole width available to it, like <div> does. An element with the outer display type of inline will only take up the width that it needs, with wrapping, like <span> does.
Inner display type: flow, flex or grid:
The inner display type flow is the default inner display type when flex or grid is not specified. It is the way of laying out children elements that we are used to in a <p> for instance. flex and grid are new ways of laying out children that each deserve their own post.
Conclusion:
The difference between display: flex and display: inline-flex is the outer display type, the first's outer display type is block, and the second's outer display type is inline. Both of them have the inner display type of flex.
References:
- The two-value syntax of the CSS Display property on mozzilla.org
Source: Stackoverflow.com