flex and display:flex

2018-06-27 01:31:24

I have difficulty understanding the property display:inline-flex; . What is the difference between display:inline-flex; and display:flex; ?

I am trying to vertically align some elements within the ID wrapper. That's why I gave the property display:inline-flex; to this ID; because 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 .

#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 does not make flex items display inline. It makes the flex container display inline. That is the only difference between display: inline-flex and display: flex . A similar comparison can be made between display: inline-block and display: block , and pretty much any other display type that has an inline counterpart.1

There is absolutely no difference in the effect on flex items; flex layout is identical whether the flex container is block-level or inline-level. In particular, the flex items themselves always behave like block-level boxes (although they do have some properties of inline-blocks). You cannot display flex items inline; otherwise you don't actually have a flex layout.

It is not clear what exactly you mean by "vertically align" or why exactly you want to display the contents inline, but I suspect that flexbox is not the right tool for whatever you are trying to accomplish. Chances are what you're looking for is just plain old inline layout ( display: inline and/or display: inline-block ), for which flexbox is not a replacement; flexbox is not the universal layout solution that everyone claims it is (I'm stating this because the misconception is probably why you're considering flexbox in the first place).

1 The differences between block layout and inline layout are outside the scope of this question, but the one that stands out the most is auto width: block-level boxes stretch horizontally to fill their containing block, whereas inline-level boxes shrink to fit their contents. In fact, it is for this reason alone you will almost never use display: inline-flex unless you have a very good reason to display your flex container inline.

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;

Fiddle

display: flex; flex-direction: row;

Fiddle

display: inline-flex; flex-direction: column;

Fiddle

display: flex; flex-direction: column;

Fiddle

display: inline;

Fiddle

display: block

Fiddle

Also, a great reference doc: A Complete Guide to Flexbox - css tricks

链接地址: http://www.djcxy.com/p/75664.html

上一篇: CSS

下一篇: flex和display：flex