How to Reset 'Display' Property for Flex-Item

How to reset 'display' property for flex-item

As Danield has mentioned, all children of a flex container (designated by display: flex or display: inline-flex) are automatically made flex items. There is no display property for a flex item; instead, you set it to some other value depending on how you want the children of the flex item to be laid out. If browsers are recognizing display: flex-item, then they probably have some weird non-standard implementation of "flexbox", because that value has never existed in any incarnation of the Flexbox spec (and I have no idea what exactly it would correspond to if it did).

The initial value of display is inline, so display: initial is equivalent to display: inline. See this answer. What you're trying to do is reset the elements to whatever their default display is as given by browsers. You will need to know this value in advance; for div elements it's display: block.

Unfortunately, this will override the existing table-cell declaration in all browsers, for obvious reasons. In that case, you might as well just stick with the table layout if it already works for you, if you need to support browsers that don't support flexbox.

Usage of display property of flex box items

From the specifciation:

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent. (See CSS2.1§9.7 [CSS21] and CSS Display [CSS3-DISPLAY] for details on this type of display value conversion.)

So basically, setting inline-block or block will do nothing as both will get computed to block but you can set table or inline-table and your flex item will behave as a table. Same thing if you set inline-grid or grid

.box {  display: flex;  margin:5px;}
.box>div { height: 50px; width: 100%; background: red; display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 1fr; grid-gap: 20px;}
span { border: 2px solid green;}
<div class="box">  <div>    <span></span>
<span></span> </div></div>
<div class="box"> <div style="display:inline-grid;"> <span></span>
<span></span> </div></div>

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>

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)

Flex-box items don't re-render correctly on chrome

The issue looks unusual but the fix is rather simple. Add min-height: 0 to .ig-item.

Possibly the issue seems to be how browsers manifest the fact that the min-height property for flex items is auto by default.

See demo below:

new Vue({  el: '#app',
data() { return { activeImageIndex: null, images: [{ url: 'https://unsplash.it/600', style: { flexBasis: '50%' } }, { url: 'https://unsplash.it/600', style: { flexBasis: '50%' } }, { url: 'https://unsplash.it/600', style: { flexBasis: '30%' } }, { url: 'https://unsplash.it/600', style: { flexBasis: '30%' } }, { url: 'https://unsplash.it/600', style: { flexBasis: '30%' } }, ] } },

methods: { onClick(index) { this.activeImageIndex = this.activeImageIndex === index ? null : index } },})
#app {  width: 800px;}
.ig-container { display: flex; flex-direction: column; flex-wrap: wrap; margin: 0 -5px; position: relative; height: 500px;}
.ig-item { flex: 1 1; padding: 10px; box-sizing: border-box; min-height: 0; /* ADDED */}
.ig-item:hover>div { border-color: green;}
.ig-item.active { position: absolute; z-index: 3; width: 100%; height: 100%;}
.ig-item.active img:hover { cursor: zoom-out;}
.ig-item>div { height: 100%; width: 100%; background-color: blue; position: relative; border: 5px solid gainsboro; overflow: hidden;}
.ig-item .ig-overlay { position: absolute; height: 100%; width: 100%; z-index: 3; background-color: rgba(0, 0, 0, 0.4); color: #fff; font-size: 3rem; display: flex; align-items: center; text-align: center;}
.ig-item .ig-overlay span { width: 100%;}
.ig-item img { height: 100%; width: 100%; object-fit: cover; position: absolute; z-index: 2; transition: transform .3s;}
.ig-item img:hover { cursor: zoom-in;}
.ig-item .loading-overlay.ig-loading { position: absolute; z-index: 1;}
.ig-item .loading-overlay.ig-loading .loading-icon:after { top: -2.5em;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app"> <div class="ig-container"> <div class="ig-item" :class="{active: activeImageIndex === index}" :style="image.style" v-for="(image, index) in images"> <div> <img @click="onClick(index)" title="" :src="image.url"> </div> </div> </div>
</div>

Flex: none vs. Non-specified (omitted) flex property

Is there a difference between flex: none and leaving the flex property undefined?

flex: none is equivalent to flex: 0 0 auto, which is shorthand for:

  • flex-grow: 0
  • flex-shrink: 0
  • flex-basis: auto

Simply put, flex: none sizes the flex item according to the width / height of the content, but doesn't allow it to shrink. This means the item has the potential to overflow the container.

If you omit the flex property (and longhand properties), the initial values are as follows:

  • flex-grow: 0
  • flex-shrink: 1
  • flex-basis: auto

This is known as flex: initial.

This means the item will not grow when there is free space available (just like flex: none), but it can shrink when necessary (unlike flex: none).


I could remove flex: none from blue item (see code below), and the layout, as I understand, remains the same.

In terms of your demo, the reason there is no difference when flex: none is removed is that the two siblings (.item2 and .item3) are flexible (flex: 1), and there is enough space in the container to accommodate the content of .item1.

However, if .item1 had more content, flex: none would make a big difference.

revised fiddle

.flex-container {  display: flex;  width: 400px;  height: 150px;  background-color: lightgrey;}.flex-item {  margin: 10px;}.item1 {  flex: none; /* Now try removing it. */  background-color: cornflowerblue;}.item2 {  flex: 1;  background-color: orange;}.item3 {  flex: 1;  background-color: green;}
<div class="flex-container">  <div class="flex-item item1">flex item 1 flex item 1 flex item 1 flex item 1flex item 1 flex item 1flex item 1flex item 1</div>  <div class="flex-item item2">flex item 2</div>  <div class="flex-item item3">flex item 3</div>  </div>

How to break row (clear element) in css flexbox

As @ BoltClock suggested you can "resize your flex container to accommodate the number of items on each line and let them wrap organically".

If you want to actually clear a line similar to using floats you can set a margin in the direction you want to clear.

element{
margin-right: calc( 100% - widthOfelement);
}

*{  box-sizing: border-box;}
.parent{ display: flex; width: 600px; height: auto; flex-wrap: wrap; border: 1px grey dashed; }
.child{ width: 100px; height: 50px; border: 1px orangered solid; background-color: skyblue;}
/*add "clear" after first child*/.child:nth-child(1){ margin-right: calc(100% - 100px);}
/*add "clear" after third child*/.child:nth-child(3){ margin-right: calc(100% - 200px);}
<div class="parent">  <div class="child">1</div>  <div class="child">2</div>  <div class="child">3</div>  <div class="child">4</div>  <div class="child">5</div>  <div class="child">6</div></div>

removing flex in css for mobile size screens

every class written inside @media screen and (max-width: 768px) {} will override the previous ones.

.row-eq-height {
min-height: 400px;
display: flex;
}

@media screen and (max-width: 768px) {
.row-eq-height {
/*display property will be overriden as any class further inside this scope*/
display: block;
}

As previous answer says display:initial or display:inherit as any display property will cancel display:flex.



Related Topics



Leave a reply



Submit