When I try to insert block elements in a flex container, they all stay on the same line as if they were inline-blocks.
I would like the two first div's to be on the same line, and the last one to be on a second line. Sadly, that doesn't seem to work.
Anyone have any idea ?
<div style="display: flex"> <div style="display: inline-block"> This is an inline block element </div> <div style="display: inline-block"> This is an inline block element </div> <div style="display: block"> This is a block element </div> </div>
An initial setting of a flex container is flex-wrap: nowrap
. This means flex items are forced to remain in a single line.
You can override the default with flex-wrap: wrap
.
The display
value of flex items is ignored in flex layout.
A flex container, which is an element with display: flex
or display: inline-flex
, establishes a flex formatting context . Although similar to a block formatting context , there are differences.
One difference is that children of a flex container ignore the display
property.
Another difference is that, in a flex container, margins don't collapse, and the float
and clear
properties have no effect.
A flex container also comes with several default settings. Among them:
justify-content: flex-start
- flex items will stack at the start of the line flex-shrink: 1
- flex items are allowed to shrink and will not overflow the container align-items: stretch
- flex items will expand to cover the cross-size of the container flex-direction: row
- flex items will align horizontally flex-wrap: nowrap
- flex items are forced to stay in a single line Note the last two items.
Flex items will line up in a row and cannot wrap.
If you want to have two flex items on the first line, and a third item on the second line, allow the container to be multi-line with flex-wrap: wrap
.
.container { display: flex; flex-wrap: wrap; } .box { flex: 0 0 45%; height: 50px; margin: 5px; background-color: lightgreen; border: 1px solid #ccc; }
<div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
Also, if you want flex containers to display inline, use display: inline-flex
not display: flex
. These are comparable to display: inline-block
and display: block
.
use flex-wrap:wrap
in parent because by default the flex-wrap
is nowrap
use flex-basis:50%
in child, to divide both inline-block elements in same size.
See more detailed info about flexbox on this article: A Complete Guide to Flexbox
*, *::before, *::after { box-sizing: border-box } body { margin: 0 } .flex { display: flex; flex-wrap: wrap } .flex div { flex: 0 50%; /*change to 1 50% to see the difference */ border: 1px solid black; padding: 10px }
<div class="flex"> <div> This is an inline block element </div> <div> This is an inline block element </div> <div> This is a block element </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.