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
Ie8's Rendering of Transparent Pngs Is Fubared on My Site
How to Restrict Character Limit by Line or # of Characters with CSS
Browser-Specific Prefixes with a CSS Transition on Transform
Bootstrap 4: How to Have a Full Width Navbar with The Content in a Container (Like The So Navbar)
Bootstrap 4 Card/Panel with Image Left of Header and Title
CSS Inverted Triangle Image Overlay
How to Make a Div Visible on Top of an HTML5 Fullscreen Video
Using CSS Modules in React How to Pass a Classname as a Prop to a Component
Webpack 4: Mini-CSS-Extract-Plugin + Sass-Loader + Splitchunks
Bootstrap4 Make All Input-Group-Addons Same Width
Sharepoint 2013 Deleting Contents of <Style> in Embed Code When Saving
Is There a Working Implementation of CSS3 Grid Layout for Webkit
Bootstrap 4 Vertical Align Text Won't Center on Card
Ionic - Ion-Item Text Is Not Vertically Centered When Ion-Icon Is Bigger
How to Prevent Fractional Pixels in an Element with Width Set to Auto