Using 'order' property to position flex item between siblings
When there are three elements in the container:
- div
h2
- div
AND
- the order of these elements varies in the source...
AND
- you want the
h2
to always be in the middle...
THEN, you can do something like this:
.container > div:first-of-type { order: 1; }
.container > h2 { order: 2; }
.container > div:last-of-type { order: 3; }
This translates to:
Regardless of the order of elements in the source,
- The first div will appear first in the visual order
- The
h2
will appear second in the visual order- The second div will appear last in the visual order
.container { display: flex;}.container > * { flex: 1; border: 1px dashed red;}h2 { text-align: center; margin: 0;}
.container > div:first-of-type { order: 1; }.container > h2 { order: 2; }.container > div:last-of-type { order: 3; }
p { text-align: center;}p > span { background-color: aqua; padding: 5px; }
<div class="container"> <div> </div> <h2>I'm an h2</h2> <div> <span>I'm span 1</span> <span>I'm span 2</span> <span>I'm span 3</span> </div></div><div class="container"> <div> <span>I'm span 1</span> <span>I'm span 2</span> <span>I'm span 3</span> </div> <h2>I'm an h2</h2> <div> <span>I'm span 4</span> <span>I'm span 5</span> <span>I'm span 6</span> </div></div><div class="container"> <div> <span>I'm span 1</span> <span>I'm span 2</span> </div> <h2>I'm an h2</h2> <div> <span>I'm span 3</span> </div></div><div class="container"> <div> <span>I'm a span</span> <span>I'm a span</span> </div> <div>
</div> <h2> I'm an h2 </h2></div><div class="container"> <div> <span>I'm a span</span> <span>I'm a span</span> </div> <h2> I'm an h2 </h2></div><div class="container"> <h2 class="diff-order"> I'm an h2 </h2> <div class="diff-order"> <span>I'm a span</span> <span>I'm a span</span> </div> <div class="diff-order"> <span>I'm a span</span> <span>I'm a span</span> </div></div><p><span>TRUE CENTER</span></p>
Centering an element between two siblings in flexbox
Here's the code you're using to align your flex items:
.header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
With space-between
the "Information" and "Contact" elements will be positioned at opposite edges of the container.
Because a flex container aligns items based on the distribution of free space, your middle item will be centered between them, not necessarily centered on the page.
With "Information" having a computed width of 174px, and "Contact" having a computed width of 135px, the middle item is off-center by 39px.
In order for the middle item to be centered on the page, its siblings would need to be equal width, so there is an equal balance of space on both sides.
The following post has two methods for centering items in a flex container when siblings vary in size:
- Methods for Aligning Flex Items along the Main Axis (see box #71)
Using the flex order property across multiple containers
The flex order
property applies only to siblings in the same container.
So using order
to re-arrange a series of flex items spread across different containers will not work.
But based on your requirements, it doesn't appear you need multiple containers. All items can exist in a single container.
.wrapper { display: flex; flex-wrap: wrap;}
.child-1-1 { order: 1; }.child-1-2 { order: 3; }.child-2-1 { order: 2; }.child-2-2 { order: 4; }
.wrapper > div { flex: 1 0 40%; height: 50px; margin: 5px; border: 1px solid #ccc; background-color: lightgreen; display: flex; align-items: center; justify-content: center;}
@media ( max-width: 600px) { .wrapper { flex-direction: column; } div.child-2-1 { order: -1; background-color: orange; }}
<div class="wrapper"> <div class="child-1-1">child-1-1</div> <div class="child-1-2">child-1-2</div> <div class="child-2-1">child-2-1</div> <div class="child-2-2">child-2-2</div></div>
How does the order property work on absolutely-positioned children of a flex container?
The statement you quoted from the spec:
Absolutely-positioned children of a flex container do not participate
in flex layout, but are reordered together with any flex item
children.
... doesn't actually exist in the order
property definition. It's included at the end of the spec in the clarifications section.
Nonetheless, the order
definition does say this:
Applies to: flex items and absolutely-positioned children of flex
containers
But that's all the definition says about absolutely-positioned children of a flex container. There is no further guidance or clarification.
Therefore, browser makers have significant discretion in implementing this feature. And it appears that the major browsers have not even begun implementation, as testing shows that order
is doing nothing on abspos children of a flex container. Tested in Chrome, FF, IE11 and Edge.
Here's an interesting comment from a related question:
I don't consider this a legitimate solution, but if I add
position:absolute
with some javascript after the page loads instead of it being in the css file,order
works as expected
Applying order property to flex items in different containers
With your current HTML structure, that is not possible.
The order
property applies only to flex items that are siblings in the same flex container.
(And keep in mind that .row
isn't even a flex container. So the children are not flex items.)
You can use order
to re-arrange .row
and .flex-item-2
.
If you apply display: flex
or inline-flex
to .row
, you can then use order
to re-arrange .flex-item-1
and .flex-item-3
.
But because they have different parents, the first two cannot be re-arranged with the latter two.
flexbox order: I want box to open under a element which is not a sibling
Using order
will not work because order is in relation to the container not the DOM.
The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code.
MDN - "order"
CSS Grid can do this though.
Codepen Demo
.container {
padding: 5px;
display: grid;
width: 500px;
margin: 1em auto;
grid-auto-columns: 50px;
grid-auto-rows: 50px;
grid-gap: 5px;
}
.box {
border: 1px solid black;
width: 50px;
height: 50px;
}
#b1 {
background-color: red;
grid-column-start: 1;
grid-column-end: 2;
}
#b2 {
background-color: blue;
grid-column-start: 2;
grid-column-end: 3;
}
#b3 {
background-color: green;
grid-column-start: 3;
grid-column-end: 4;
}
#b4 {
background-color: yellow;
grid-column-start: 1;
grid-column-end: 2;
}
@media screen and (max-width: 500px) {
#b1,
#b2,
#b3,
#b4 {
grid-column-start: 1;
grid-column-end: 2;
}
#b3 {
grid-row-start: 4;
grid-row-end: 5;
}
#b4 {
grid-row-start: 3;
grid-row-end: 4;
}
}
<div class="container">
<div class="box" id="b1"></div>
<div class="box" id="b2"></div>
<div class="box" id="b3"></div>
<div class="box" id="b4"></div>
</div>
Flexbox order when in different divs?
The order
property controls the re-ordering of flex items in the same container.
In your mark-up, .something
is a flex item, along with siblings h1
and h4
. The children of .something
are in a different container and, hence, cannot be re-ordered with the parent and uncles.
If it's not absolutely necessary to have your image and paragraph in a different container, just put them in the main container. Then you can order everything however you like.
Here's an example:
.wrapper { text-align:center; display:flex; flex-direction: column;}
img { height: 300px; align-self: center;}
p { order:3;}
h1 { order:1;}
h4 { order:2;}
<div class="wrapper"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Puffer_Fish_DSC01257.JPG/1280px-Puffer_Fish_DSC01257.JPG"></img> <p>ICONS HERE</p> <h1>TITLE</h1> <h4>SUBTITLE</h4></div>
Flexbox items are overlapping z-index set on sibling elements
You can just remove the z-index
from every item except the widgets bubbles. This will lead to the desired output of having the bubbles always on top of any container.
.container {
display: flex;
background: #eee;
margin-top: 5%;
height: 100px;
}
.container .flex-item {
flex: 0 0 1;
width: 25%;
height: 80px;
margin: 10px;
position: relative;
background: #ccc;
}
.container .flex-item .widget {
width: 70px;
height: 70px;
background-color: #004990;
border-radius: 50%;
position: absolute;
top: -35px;
right: -35px;
z-index:1;
}
<div class="container">
<div class="flex-item">
<div class="widget"></div>
</div>
<div class="flex-item">
<div class="widget"></div>
</div>
<div class="flex-item">
<div class="widget"></div>
</div>
<div class="flex-item">
<div class="widget"></div>
</div>
</div>
Related Topics
Using Variables in Gulp for the Destination File Name
Document.Body.Scrollheight Yielding Two Different Results in Firefox/Chrome
Greek and Text-Transform:Uppercase
How Detect Which Child Element Is Visible After Scrolling the Parent Div
CSS Media Query Height Greater Than Width and Vice Versa (Or How to Imitate with JavaScript)
Check Visibility of an Object with JavaScript
Scale the Contents of a Div by a Percentage
Document.Createelement('Div') with a Class
How to Make React-Bootstrap's Dropdown Open on Mouse Hover
Making an Element Visible by Hovering Another Element (Without :Hover-Property)
Semantic-Ui Modal Size Keeps Extending to the Height of a Page
Jquery Word for Word Fade in Effect
Hover Effects on Irregular Polygons in CSS
Get the Computed Style and Omit Defaults
Bootstrap V3 - Opening a Modal Window Forces the Page to Scroll Up to the Top