What Are Allowed Values of the 'Display' Property for a Flex-Item? (Layout of Flex-Item's Children Is Irrelevant)

What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)

The only condition for being a flex item is being an in-flow child of a flex container.

Note this means a contiguous run of text can be wrapped inside an anonymous flex item which do not correspond to any element, and an element child of a flex container might not be a flex item if any of the following

• It is absolutely positioned

  an absolutely-positioned child of a flex container does not participate in flex layout.

• It has display: contents

  The element itself does not generate any boxes, but its children and
  pseudo-elements still generate boxes as normal. For the purposes of
  box generation and layout, the element must be treated as if it had
  been replaced with its children and pseudo-elements in the document
  tree.

  Its children will become the flex items instead (unless something from this list applies to them).

• It has display: none

  The element and its descendants generates no boxes.

• It has box-suppress: discard

  The element generates no boxes at all.

• It has box-suppress: hide

  The element generates boxes as normal, but those boxes do not
  participate in layout in any way, and must not be displayed.

• Previously, if a child of a flex container had a display value that generated an anonymous parent, that parent became the flex item instead of the child. This changed and now the child becomes the flex item, and no parent is generated.

Apart from that, yes, the display value should not prevent an element from being a flex item.

Be aware that flex items are blockified, so for example inline-block becomes block, inline-table becomes table, inline-flex becomes flex, etc.

This means that, whatever the specified outer display role, the flex item will always be block-level.

Basically, the display property, when used on a flex item, is only useful to set its inner display layout model, e.g. that you want the flex item to be a flex container for its contents.

A flex item establishes a new formatting context for its
contents. The type of this formatting context is determined by its
display value, as usual. However, flex items themselves are
flex-level boxes, not block-level boxes: they participate in their container’s flex formatting context, not in a block formatting
context.

(The terminology differs a bit, the Display spec says a flex item is block-level in the sense of its outer display role, the Flexbox spec says it's not block-level in the sense that the formatting context in which it participates is not a block one)

Making a child of a flex container NOT a flex item

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>

.flexible { 
    flex: 1 0 auto; 
    width: 200px;
    background-color: blue; 
    word-wrap: break-word;
}

.nav {  width: 60px;  height: 100vh;  top: 100px;  min-height: 100vh;  background-color: #cccccc;  position: fixed;  z-index: 999;  opacity: .4;  border-right: 1px solid black;  display: flex;  flex-direction: column;}
.nav a {  width: 100%;  height: 60px;  display: flex;  justify-content: center;  align-items: center;  border: none;  text-decoration: none;}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><div class="nav">  <a href=""><i class="material-icons">home</i></a>  <a href=""><i class="material-icons">shopping_basket</i></a>  <a href=""><i class="material-icons">business</i></a>  <a href=""><i class="material-icons">mail</i></a>  <a href=""><i class="material-icons">card_giftcard</i></a></div>

.flex {
  display: flex;
  white-space: pre-wrap;
}

var value = " is ";
document.getElementById('value').innerHTML = value;
document.getElementById('value1').innerHTML = value;

.flex{
  display: flex;
  white-space: pre-wrap;
}

<p class="flex">
 <span>This</span>
 <span id='value'>value</span>
 <span>hello</span>
</p>

<p>
 <span>This</span>
 <span id='value1'>value</span>
 <span>hello</span>
</p>