I need remove style attribute of a div
Line 85
https://github.com/PolymerElements/app-layout/blob/master/app-toolbar/app-toolbar.html
::content > [condensed-title] {
pointer-events: none;
#apply(--layout-flex)*;
}
*(I don't wanna apply flexbox to [condensed-title] in a espefic head component I had made)
Line 133 https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html
--layout-flex: {
-ms-flex: 1 1 0.000000001px;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001px;
flex-basis: 0.000000001px;
};
My code
<app-toolbar>
<div class="logo-title">
<iron-icon icon="custom-icons:casinha"></iron-icon>
</div>
<div id="outAlert" condensed-title>
<paper-icon-button icon="card-membership"></paper-icon-button>
</div>
<div class="sublogo-title">
<h4>Sublogo</h4>
</div>
</app-toolbar>
You can achieve this in 3 three ways
You can style #outAlert in your element and set flex: 0. This will overwrite app-layout's styling.
#outerAlert {
flex: 0;
}
Use inline style to overwrite flex and set it to 0
<div id="outAlert" condensed-title style="flex:0">
And lastly overwrite the --layout-flex mixin for the app-layout where you don't want flex to be there.
app-layout {
--layout-flex: {
flex: 0; /* You can have any other value also. Not sure if empty mixin will work or not */
};
}
I solved problem using following code:
#outAlert{
#apply(--layout-flex-none);
}
Related
I have a grid that draws squares in cells. It has number of rows and number of columns, then it draw the grid cells and check if in each cell there should be a square or not (according to an array) and draws a square if needed.
The HTML end result looks something like this: (lets say I have 1 row and 3 columns and only 2 cells should have squars)
.row {
display: flex;
flex-wrap: wrap;
flex: 10000 1 0%;
}
.column {
display: flex;
flex-wrap: wrap;
max-width: 100px;
min-width: 10px;
padding: 4px;
border: 1px solid grey;
}
.square {
background-color: red;
width: 100%;
aspect-ratio: 1/1;
border-radius: 5px;
}
<div class="row">
<div class="column">
<div class="square"></div>
</div>
<div class="column">
<div class="square"></div>
</div>
<div class="column"></div>
</div>
The rows take the full width of the screen and the size of the columns should be identical between all of the columns and changing by the number of columns on the screen (For example if I have 5 columns they should all be with a width of 100px, but if I have 1000 columns they should all be with a width of 10px).
My problem is that after a certain break point in the column size the padding and border radius seems weird and I want to change their values when I hit that break point.
I can't use #container queries as there are still not fully supported.
If it help I'm using vue 2. but I think a CSS solution will be better in this case.
Trying to address the issue described:
My problem is that after a certain break point in the column size the
padding and border radius seems weird and I want to change their
values when I hit that break point. I can't use #container queries as
there are still not fully supported.
I crafted a little demo that helped me better explore the conditions bringing to such a scenario.
Obtaining border: collapse equivalent on flexbox items
The .row element remains a flexbox container but its flex items instead of having their border set, they are styled with their outline set.
The outline doesn't occupy space and it's expected to "collapse" when colliding with the outline produced by another element.
So to make it sure the layout wasn't affected by styling oddities, in the attempt to show off the borders of the flex items, this demo just relies on 2 key aspects to render those borders:
Setting the gap between the flex items
Setting the outline size expected to cover the gap left between
elements
.row {
gap: var(--col-gap);
}
.column {
outline: var(--col-gap) solid gray;
}
Using ::after for adding content to an element
Plus the red dot is applied as an ::after pseudo element with position:absolute, again to make sure that nothing affected the grid layout:
.column.square::after {
position: absolute;
content: '';
background-color: red;
width: 50%;
aspect-ratio: 1/1;
border-radius: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The dashboard - exploring the options
Starting from there I added a "dashboard" with position: fixed that remains on top of the page and lets you control:
column width (px): here you set the width changing the cols per row according to the available container space
columns per row: here you set the cols per row changing their width according to the available container space
width
gap between cells (px): the gap between cells on the grid
toggle red dots visibility: will show/hide the red dots proving again that display: none; doesn't change the grid layout that it's depending exclusively by the .column element size set through the custom variable --col-width
toggle counter visibility: will show/hide the counter on top of each flex item
Conclusions so far:
Despite the efforts to minimize any interfence and taking all the steps needed to correctly setup a grid layout depending only on the fixed size of its cells, there are still some rendering issue with sometimes the occurrence of regular mismatching patterns on the border size for some lines. I should say that I only experience the problem on my laptop display and not on my desktop monitor so that's another factor.
I tried with different parameters on my demo and playing with the numbers, considering also the gap. A good and safe layout can be found minimizing potential problems (also raising the border size for example).
I couldn't get further than this using the flex layout.
const container = document.getElementById('container');
//draws the board
emptyElementAndFillWithColumns(container, 100);
//sets some columns randomly as .square
addRandomSquares(container);
//initializes the dashboard with the value coming from the css custom props
let columnsGap = parseInt(getCssCustomProp('col-gap'));
let columnsWidth = parseInt(getCssCustomProp('col-width'));
document.getElementById('gap').value = columnsGap;
document.getElementById('width').value = columnsWidth;
document.getElementById('width').dispatchEvent(new Event('change'));
document.getElementById('cols').value = Math.trunc(container.offsetWidth / (columnsWidth+columnsGap));
//input#width change event handler
document.getElementById('width')
.addEventListener('change', event => {
const width = parseInt(event.target.value);
const newCols = Math.trunc(container.offsetWidth / (width+columnsGap));
setCssCustomProp(container, 'col-width', `${width}px`);
document.getElementById('cols').value = newCols;
});
//input#cols change event handler
document.getElementById('cols')
.addEventListener('change', event => {
const cols = parseInt(event.target.value);
const newWidth = Math.trunc(container.offsetWidth / cols) - columnsGap;
setCssCustomProp(container, 'col-width', `${newWidth}px`);
document.getElementById('width').value = newWidth;
});
//input#gap change event handler
document.getElementById('gap')
.addEventListener('change', event => {
const gap = parseInt(event.target.value);
setCssCustomProp(container, 'col-gap', `${gap}px`);
columnsGap = gap;
});
//input#toggle-dots change event handler
document.getElementById('toggle-dots')
.addEventListener('change', event => {
container.classList.toggle('hide-dots');
});
//input#toggle-counters change event handler
document.getElementById('toggle-counters')
.addEventListener('change', event => {
container.classList.toggle('hide-counters');
});
//sets the --propName custom property at the style of target
function setCssCustomProp(target, propName, value){
target.style.setProperty(`--${propName}`, `${value}`);
}
//gets the --propName custom property value from the rule set on :root
function getCssCustomProp(propName){
const propValue =
getComputedStyle(document.documentElement).getPropertyValue(`--${propName}`);
return propValue;
}
//resets the container and appends a count number of columns
function emptyElementAndFillWithColumns(target, count){
for (i = 0; i <= count; i++) {
const column = document.createElement('div');
column.classList.add('column');
target.append(column);
}
}
//adds the square class to random .column elements in target
function addRandomSquares(target){
target.querySelectorAll('.column').forEach(column => {
if (Math.random() >= 0.5)
column.classList.add('square');
})
}
:root {
--col-width: 100px;
--col-gap: 1px;
}
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
.row {
display: flex;
flex-wrap: wrap;
gap: var(--col-gap);
counter-reset: itemnr;
}
.column {
position: relative;
display: flex;
flex-wrap: wrap;
width: var(--col-width);
height: var(--col-width);
padding: 4px;
outline: var(--col-gap) solid gray;
}
.column.square::after {
position: absolute;
content: '';
background-color: red;
width: 50%;
aspect-ratio: 1/1;
border-radius: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dashboard {
position: fixed;
right: 1rem;
top: 2rem;
border: solid darkgray;
padding: 1em;
z-index: 100;
background: gray;
color: white;
font-weight: 600;
font-size: 1.2rem;
opacity: .9;
}
.dashboard > *{
display: grid;
grid-template-columns: 1fr auto;
width: 100%;
gap: 1em;
}
.dashboard label{
}
.dashboard input[type="number"] {
width: 5em;
cursor: pointer;
}
.dashboard input[type="checkbox"] {
width: 1rem;
line-height: 1rem;
cursor: pointer;
}
#container.hide-dots .square::after{
display: none;
}
#container.hide-counters .column::before{
display: none;
}
small{
grid-column: 1 / -1;
font-size:.8rem;
text-align: center;
width: 100%;
margin-bottom: 1rem;
}
.column::before{
position: absolute;
counter-increment: itemnr;
content: counter(itemnr);
font-size: .8rem;
z-index: 10;
font-weight: 600;
}
<div id="container" class="row">
<div class="column square">
</div>
<div class="column"></div>
</div>
<div class="dashboard">
<div>
<label for="width">column width (px):</label>
<input
id="width" type="number" max="100" min="10">
</div>
<div>
<label for="cols">columns per row:</label>
<input
id="cols" type="number" max="50" min="1">
</div>
<div>
<label for="gap">gap between cells (px):</label>
<input
id="gap" type="number" max="10" min="0">
</div>
<div style="margin-top: 1rem;">
<label for="toggle-dots">toggle red dots visibility:</label>
<input id="toggle-dots" type="checkbox" checked>
</div>
<div>
<label for="toggle-counters">toggle counter visibility:</label>
<input id="toggle-counters" type="checkbox" checked>
</div>
</div>
If you want to increase or decrease size of padding you can give padding size in percent (%) that depends on parent element.
I have a html template like the following:
<div class="my-grid-container">
<div class="summary-card" ng-repeat="cardData in summaryCardsCtrl.summaryDetails" >
<div ng-include="'.....'"></div>
</div>
</div>
The included html looks like:
<div class="card">
<div class="card-title" id="{{cardData.label}}">{{cardData.label}}</div>
<div class="card-data">
<div class="card-ico">
.....
</div>
<div class="card-value">
<span title="{{cardData.rawValue}}">{{cardData.value}}</span>
<span>%</span>
</div>
</div>
</div>
I want the first card to span for two rows, like:
I am using CSS3 GridBox like the following:
.my-grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
padding: 10px;
}
.my-grid-container > div {
text-align: center;
padding: 20px 0;
font-size: 30px;
max-height: 70px;
}
div.my-grid-container > div.card:first-child {
grid-row: 1 / 2;
}
But it did not work till now. First div did not span two rows.
What am I doing wrong?
Your code:
div.my-grid-container > div.card:first-child {
grid-row: 1 / 2;
}
You're telling the grid item to span from grid row line 1 to grid row line 2. That spans one row.
If you want to span two rows, then use this instead:
div.my-grid-container > div.card:first-child {
grid-row: 1 / 3;
}
or this:
div.my-grid-container > div.card:first-child {
grid-row: 1 / span 2;
}
Keep in mind that in every grid the number of row lines is equal to the number of rows + 1, because the last row has an extra (final) line. The same concept applies to columns.
Firefox offers a useful tool for seeing this.
In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid.
More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
I've got some number inputs in a flex layout which are not sizing as expected in Firefox, and I don't understand why.
The result in Chrome:
The result in Firefox:
As you can see, the XP row doesn't overflow its parent in Chrome (no horizontal scrolling), but it has significant overflow in Firefox (with horizontal scrolling), on top of the number inputs overlapping neighboring label texts.
The relevant HTML & CSS from the page is:
/**
* The ".charsheet" prefix on each rule is automatically added
*/
.charsheet .sheet-flexbox-h input[type=number] {
flex: 1 1 40%;
margin-left: 5px;
}
.charsheet .sheet-flexbox-inline > label > span {
white-space: nowrap;
font-size: 89%;
}
.charsheet .sheet-flexbox-h > label {
width: 100%;
display: flex;
flex-direction: row;
}
.charsheet .sheet-flexbox-inline {
display: inline-flex;
width: 100%;
}
.charsheet .sheet-3colrow .sheet-2col:last-child {
width: calc(66% - 5px);
}
.charsheet .sheet-body {
display: block;
overflow-x: visible;
overflow-y: scroll;
position: relative;
flex: 1 1 auto;
}
.charsheet .sheet-content {
height: 100%;
display: flex;
flex-direction: column;
}
.charsheet {
position: absolute;
left: 0;
height: calc(100% - 70px);
width: calc(100% - 12px);
}
/**
* CSS rules below are on the page, but not editable by me
*/
.ui-dialog .charsheet input[type=number] {
width: 3.5em;
}
.ui-dialog .charsheet input {
box-sizing: border-box;
}
<!-- I can only modify the descendants of .charsheet -->
<div class="charsheet tab-pane lang-en" style="display: block;">
<div class="sheet-content">
<div class="sheet-body">
<!-- ... -->
<div class="sheet-3colrow">
<div class="sheet-col"><!-- ... --></div>
<div class="sheet-2col">
<!-- ... -->
<div class="sheet-flexbox-h sheet-flexbox-inline">
<label>
<span data-i18n="current-experience-points">Current XP:</span>
<input type="number" name="attr_xp">
</label>
<label>
<span data-i18n="total-experience-points">Total XP:</span>
<input type="number" name="attr_xp_max">
</label>
<!-- etc... -->
</div><!-- /sheet-flexbox-h -->
<!-- ... -->
</div><!-- /sheet-2col -->
</div><!-- /sheet-3colrow -->
<!-- ... -->
</div><!-- /sheet-body -->
<div class="sheet-footer"><!-- ... --></div>
</div><!-- /sheet-content -->
</div><!-- /charsheet -->
My full CSS and HTML can be found at Roll20/roll20-character-sheets on GitHub. The full CSS that I can't edit can be found live (minified) at Roll20.net
Update: I've created a fiddle to demonstrate the problem: https://jsfiddle.net/Lithl/az1njzn8/
Fiddle in Chrome, fiddle in Firefox
Short answer
Add a simple min-width:0 rule to the input selector
Explanation
After doing a bit of research, I think the conclusion that I can make here is that flex has been known to have various issues and different behaviours across browsers, specially Firefox. I found a couple of useful threads that can lead to various fixes/hacks to have consistent results. A thread that helped me is : https://teamtreehouse.com/community/firefox-flexbox-not-working (scroll down to the comments)
Coming back to your question, I was able to fix it using two separate ways and I was able to produce consistent results in Chrome and Firefox. Both of them require a simple CSS change.
First approach
Change your CSS to the following:
.charsheet .sheet-flexbox-h input[type=text],
.charsheet .sheet-flexbox-h input[type=number],
.charsheet .sheet-flexbox-h select {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
margin-left: 5px;
}
I noticed that you had 40% as the flex-basis value but could not really figure out why you had this value, perhaps it may have other impacts elsewhere changing it to auto. But this does fix the issue.
Second approach
Add a simple min-width:0 rule to the input selector in your CSS. So your CSS would look like:
.charsheet input[type=text],
.charsheet input[type=number] {
display: inline-block;
min-width:0;
width: 165px;
font-size: 12px;
border: none;
border-bottom: 1px solid black;
border-radius: 0;
background-color: transparent;
}
I found this helpful tip from the link I posted above. Again, I do not have a very concrete explanation as to why this works, but it seems to get the job done.
I would recommend you go with the second approach, as it may have minimal impact since you are setting the width.
Working fiddle here with second approach: https://jsfiddle.net/az1njzn8/4/
I've had the same issue with number inputs behaving differently in Chrome vs. Firefox, and Gurtej's solution unfortunately didn't work for me.
What works for me though is to set a default width that would override the useragent's default width – even though the width is eventually being modified by more complex rules and circumstances with percentages, min-width, max-width and flexbox.
input[type="number"] {
width: 100px;
}
Compare https://jsfiddle.net/pyu0h1r2/1/ vs. https://jsfiddle.net/pyu0h1r2/2/.
So, I have a line of inline elements that adjusts based on the width of the window, like so for example:
[a][b][c][d][e] -- 1000px
[a][b][c]
[d][e] -- 600px
This makes sense, and is what is expected of inline elements. However, I want to know if it's possible to make it do this:
[d][e]
[a][b][c]
or even
[a][b]
[c][d][e]
The reason I want this is because I have content below the row of inline elements, and when it breaks into two rows, having the top row be wider than the bottom row looks really bad.
Thanks.
Here's a fiddle:
http://jsfiddle.net/6Hm4C/1/
Notes:
Window width, element width and number of elements are all dynamic.
It has to work in IE9+ and FF24+, if this isn't possible FF has priority.
How about using a "breaker" container like this?
<div id="container">
<div class="breaker">
<div class="box">Box 1 Bigger</div>
<div class="box">Box 2</div>
</div>
<div class="breaker">
<div class="box">Box 3 Random</div>
<div class="box">Box 4</div>
<div class="box">Box 5 Stuff</div>
</div>
</div>
And this CSS:
.breaker { display: inline-block; }
.box {
display: inline-block;
vertical-align: top;
}
This will break [a][b][c][d][e] into
[a][b]
[c][d][e]
Now, in order to account for a dynamic number of boxes and widths, you need to use Javascript. With jQuery, you could do it like this:
function betterBreak(container) {
var boxes = $(container).children(),
sum = 0, max = 0;
boxes.map(function(x, box) { max += $(box).outerWidth(); });
boxes.each(function(x, box) {
sum += $(box).outerWidth();
if(sum > max/2) {
var breakerBig = $('<div class="breaker"></div>'),
breakerSmall = $('<div class="breaker"></div>');
boxes.slice(x).appendTo(breakerBig);
boxes.slice(0,x).appendTo(breakerSmall);
$(container).append(breakerSmall).append(breakerBig);
return false;
}
});
}
Calling betterBreak('#container') on a Container element that has an unknown number of child element "boxes" will dynamically wrap the children in 2 breaker divs that split the line into the desired layout when going to 2 rows.
Adjusted Demo: http://jsfiddle.net/pyU67/8/
You could use writing-mode as i commented , but for younger browser, Firefox seems out :http://codepen.io/gc-nomade/pen/DCqLb/
body {
counter-reset: boxe;/* demo purpose */
/* reverse flow from bottom to top */
writing-mode:lr-bt;
-webkit-writing-mode: horizontal-bt;
-moz-writing-mode: horizontal-bt;/* fails */
-o-writing-mode: horizontal-bt;
writing-mode: horizontal-bt;
}
/* demo purpsose */
b {
display:inline-block;
line-height:3em;
width:8em;
text-align:center;
background:lime;
border-radius:1em;
margin:1em;
}
b:before {
counter-increment:boxe;
content:counter(boxe) ' ';
}
HTML use in body
<b> inline-box </b>
<b> inline-box </b> <!-- and so many more -->
From your fiddle , it does : http://jsfiddle.net/6Hm4C/3/ or just the spans http://jsfiddle.net/6Hm4C/4/
To test in IE, Safari, Opera, Chrome, and fails in FF :(
You could try to add a divider like so:
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="divider"></div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
and use media screen:
.divider { display: none; }
#media screen and (max-width: 600px) {
.divider {
clear: both;
display: block;
}
}
Example
I'm open to either CSS or jquery. – #Surgery
Answer using Javascript / jQuery
I have created a fiddle which creates a mirror HTML of what happens when the elements are shifted downwards.
Here is an image example:
Demo fiddle
HTML
<div id="first">
<div class="inp">aaaa</div>
<div class="inp">b</div>
.
.
</div>
<!-- Below part to generate mirror code of the above -->
<div id="wrap">
<div id="second">
</div>
</div>
Javascript / jQuery
var actual = $('#first');
var mirror = $('#second');
$('#wrap').css({'top':''+actual.offset().top+'px'});
$(window).resize(function(){
var frag = document.createDocumentFragment();
var ele='div';
var wrp = actual.height()+actual.offset().top;
$('#first .inp').each(function(){
var creEle = document.createElement(ele);
creEle.className="inp";
creEle.innerHTML = $(this).html();
creEle.style.position = "absolute";
var diff = wrp - ($(this).height()+$(this).offset().top);
creEle.style.top = diff+"px";
creEle.style.left = $(this).offset().left-actual.offset().left+"px";
frag.appendChild(creEle);
});
mirror.html(frag);
});
$(window).trigger('resize');
CSS
html,body,#first,#second{
width:100%;
height:auto;
}
#first{
visibility:hidden;
}
#wrap{
position:absolute;
}
#second{
position:relative;
}
.inp{
display:inline-block;
border:1px solid black;
margin-right:3px;
}
Use flex container with flex-wrap: wrap-reverse:
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-end; // or flex-start
}
Is there any way to have a transition on the order of flex-box items?
In other words, can I have this (details in this fiddle)
#container {
display: flex;
}
#container:hover div:last-child {
order: -1;
}
animated (the element getting the new position assumes it's position over time), please?
I am not really answering the question because I am not using the order property.
But I wanted to do something similar to what you expect, and finally decided to :
In HTML, add a data-order attribute to the elements
Add the CSS properties for each element position
Change the data-order using Javascript
Using CSS transitions for the interpolation
setInterval(changeOrder, 3000);
function changeOrder() {
const allSlides = document.querySelectorAll(".single-slide");
const previous = "1";
const current = "2";
const next = "3";
for (const slide of allSlides) {
const order = slide.getAttribute("data-order");
switch (order) {
case current:
slide.setAttribute("data-order", previous);
break;
case next:
slide.setAttribute("data-order", current);
break;
case previous:
slide.setAttribute("data-order", next);
break;
}
}
}
.all-slides {
display: flex;
width: 80vw;
margin: 0 auto;
perspective: 500px;
height: 500px;
}
.single-slide {
padding: 30px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 30%;
position: absolute;
background-color: white;
transition: 2s ease;
box-shadow: 0px 5px 10px lightgrey;
}
/* Left slide*/
.single-slide[data-order="1"] {
left: 10vw;
transform: translate(-50%) scale(0.8, 0.8);
z-index: 1;
opacity: 0.7;
}
/* Middle slide */
.single-slide[data-order="2"] {
left: 40vw;
transform: translate(-50%);
z-index: 3;
opacity: 1;
}
/* Right slide*/
.single-slide[data-order="3"] {
left: 90vw;
transform: translate(-120%) scale(0.8, 0.8);
z-index: 2;
opacity: 0.7;
}
.single-slide:nth-child(2) {
order: 3;
}
.single-slide:nth-child(1) {
order: 2;
}
.single-slide:nth-child(3) {
order: 1;
}
<div class="all-slides">
<div class="single-slide" data-order="2">
<h3>First slide </h3>
<p>Some text</p>
</div>
<div class="single-slide" data-order="3">
<h3>Second slide</h3>
<p>Some other text</p>
</div>
<div class="single-slide" data-order="1">
<h3>Third slide</h3>
<p>Yet some other text</p>
</div>
</div>
This could be useful if you want to animate a slider (or anything else), but want to keep the order of the elements in the HTML for accessibility purposes, which is one of the useful usage of the order property. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#The_order_property_and_accessibility
Sadly no: the order attribute is animatable, but only as integers. That means that for each step/frame of the animation it will interpolate the value by flooring to the neareast integer. So items will only ever show up in the slot that the computed integer value results in, never in-between in any smooth sort of motion way.
It's technically still an animation: the calculated integer position should still follow the timing function and keyframe rules of the animation, it's just that the items "jump" from position to position as they change.
See https://developer.mozilla.org/en-US/docs/Web/CSS/integer#Interpolation
This question is old now, but I recently tested this, using this Fiddle (adapted from the one posted by Jason in a comment): http://jsfiddle.net/aqrxcd1u/ (code below).
In both Chrome and Firefox this partially animates, in that the order transitions one at a time from the current value to the target value. Meaning it doesn't go from 5->1 but instead goes 5->4->3->2->1.
In desktop Safari it still goes 5->1 directly.
#container {
display: flex;
}
#container div {
width: 100px;
height: 100px;
margin-right: 10px;
background-color: red;
}
#container div:nth-child(even) {
background-color: blue;
}
}
#container div:last-child {
order: 5;
transition: order 1s;
}
#container:hover div:last-child {
order: -1 !important;
}
<div id="container">
<div style="order: 1">Element 1A</div>
<div style="order: 2">Element 2B</div>
<div style="order: 3">Element 3C</div>
<div style="order: 4">Element 4D</div>
<div style="order: 5">Element 5E</div>
</div>
As Emil stated, it only animates as an integer. However, I am thinking of a hack:
Put the element you want to display in a wrapper with 1/10 of the height, set the wrapper overflow: visible
Then put 9 spacing element between these wrappers with the same height.
Put order and transition on all of them.
Change order of a wrapper and watch it 'transitioning'.
Sadly, it's ugly and only work in Firefox.
Here is what I tested in Angular