Making a child of a flex container NOT a flex item - html

Question

I believe this goes exactly against the way the display: flex property is supposed to work, but I wonder if it's possible, or if there's a hack for it.
Is it possible to have a child of a flex container not behave as a flex item? Example:
http://jsbin.com/jusehedumi/edit?html,css,output
Is there any way in which child three could be made behave as a normal display block? Without it automatically aligning due to the justicity-content: center of the parent flex container?
A purely css solution would be awesome. Thinking about it, adding some extra HTML would probably make this issue easier to fix/solvable.
.flex{
display: flex;
justify-content: center;
width: 400px;
height: 400px;
background: #ccc;
}
.child{
width: 100px;
height: 100px;
background: red;
margin: 20px;
}
.child.three{
background: blue;
display: block;
}
Is there any way to make child three not behave as a flex child?
<div class="flex">
<div class="child one"></div>
<div class="child two"></div>
<div class="child three"></div>
</div>
Edit: I know a child can be taken out of the flex container by using position: absolute or the likes. What I'm looking for is a way of making one of the children behave as a block element (or inline for that matter) while remaining a child of the flex container.

Answer 1

Updated based on a question edit
No, there is no property that can be set, to make a flex container child stop being a flex item.
What can be done though, is to not use any flex properties on one, and by that make it behave as a block or inline-block element.
E.g., combined with flex-wrap: wrap enabling items to wrap, giving the third item flex: none will make it behave as an inline block, giving it width: 100% it will behave as a block (as shown below).
When it comes to flex container properties, some can be overridden on the item, like align-items / align-self, some cannot, like justify-content.
To mimic justify-content in your given code sample, auto margins could be used, and with that, together with a trick using the order property and a pseudo element, one could make the third behave like an inline block:
.flex{
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 400px;
height: 400px;
background: #ccc;
}
.child{
width: 100px;
height: 100px;
background: red;
margin: 20px;
}
.child.one{
margin-left: auto;
}
.child.two{
margin-right: auto;
}
.flex::after{
content: '';
width: 100%;
order: 1;
}
.child.three{
background: blue;
order: 2;
}
Is there any way to make child three not behave as a flex child?
<div class="flex">
<div class="child one"></div>
<div class="child two"></div>
<div class="child three"></div>
</div>
As a note, here is a good answer that describes the flex item's display type:
What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)
Initial answer
Is it possible to have a child of a flex container not behave as a flex item?
There is no good, cross browser solution to make a flex container child not behave as a flex item.
One can use absolute positioning, though as it will take the element out of flow, it won't behave like a block element when it comes to content flow.
Is there any way in which child three could be made behave as a normal
display block?
Based on the fact that a normal block element take a row of its own, filling its parent's width, you can, by adding flex-wrap: wrap to the container and give the third item a width of 100%, make it behave like one.
Note, I also added align-content: flex-start; so the items won't stretch/spread along the parent's height, instead align at its top.
.flex{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
width: 400px;
height: 400px;
background: #ccc;
}
.child{
width: 100px;
height: 100px;
background: red;
margin: 20px;
}
.child.three{
background: blue;
width: 100%;
}
Is there any way to make child three not behave as a flex child?
<div class="flex">
<div class="child one"></div>
<div class="child two"></div>
<div class="child three"></div>
</div>
If you want the third item to keep the same width as the first two, a wrapper could help you.
.flex{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
width: 400px;
height: 400px;
background: #ccc;
}
.child{
width: 100px;
height: 100px;
background: red;
margin: 20px;
}
.child.three{
background: blue;
}
.wrapper{
width: 100%;
}
Is there any way to make child three not behave as a flex child?
<div class="flex">
<div class="child one"></div>
<div class="child two"></div>
<div class="wrapper">
<div class="child three"></div>
</div>
</div>
If a wrapper can't be used, you could use a right margin, though since percent based margin might render different on different browsers, you need to test it properly, or use another unit, e.g. viewport units, like vw.
.flex{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
width: 400px;
height: 400px;
background: #ccc;
}
.child{
width: 100px;
height: 100px;
background: red;
margin: 20px;
}
.child.three{
background: blue;
margin-right: calc(100% - 120px);
}
Is there any way to make child three not behave as a flex child?
<div class="flex">
<div class="child one"></div>
<div class="child two"></div>
<div class="child three"></div>
</div>
If neither of the above solutions is an option, the same layout can be achieved using block and inline block elements.
.flex{
/* removed the Flexbox properties
display: flex;
flex-wrap: wrap;
justify-content: center;
*/
text-align: center; /* added */
width: 400px;
height: 400px;
background: #ccc;
}
.child{
display: inline-block; /* added */
width: 100px;
height: 100px;
background: red;
margin: 20px;
}
.child.three{
background: blue;
display: block;
}
<strike>Is there any way to make child three not behave as a flex child?</strike>
<div class="flex">
<div class="child one"></div>
<div class="child two"></div>
<div class="child three"></div>
</div>

Answer 2

Only elements that are in-flow children of a flex container are flex items.
Therefore, elements that are absolutely-positioned children or descendants beyond the children of a flex container are not flex items and ignore flex properties.
See my answer here for more details:
Absolutely positioned flex item is not removed from the normal flow in IE11