if I have:
<div>A</div>
<div>B</div>
<div>C</div>
is there a way for the div's to appear this way when the page loads?
C
A
B
it doesnt matter the method
You can use display:flex and order to rearrange how the divs look on the dom
check this snippet
.container {
display: flex;
flex-direction: column;
}
div:nth-child(1) {
order: 2;
}
div:nth-child(2) {
order: 3;
}
div:nth-child(3) {
order: 1;
}
<div class="container">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Hope it helps
you can use css3 flex-box concept to achieve this
give display:flex for the parent container and give order property to the child element
#one{
background-color:red;
width:300px;
height:100px;
order:2;
}
#two{
background-color:green;
width:300px;
height:100px;
order:3;
}
#three{
background-color:orange;
width:300px;
height:100px;
order:1;
}
#parent{
display: flex;
}
<div id="parent">
<div id="one">A</div>
<div id="two">B</div>
<div id="three">C</div>
</div>
Related
It's possible to choose what child of flexbox should drop to the next line, instead of always dropping the last one?
Example:
Full-Size, no breaking:
Default behavior, breaking the last one.
Desired behavior, breaking the div from the middle to the other line:
Is this possible using flexbox?
column can approximate this in case you need equal width elements
.box {
column-width:max(30vw,150px);
}
.box > div {
padding:10px;
width:100%;
display:inline-block;
border:1px solid;
margin-bottom:5px;
box-sizing:border-box;
}
/* I need those extra elements to have correct layout */
.box > i {
display:block;
}
<div class="box">
<div>A</div><i></i>
<div>B</div><i></i>
<div>C</div>
</div>
Edited: You can use the order: n; property to order flexed items and flex shorthand property to make b element full width with flex: 0 0 100% and then change the order to order: 2
.flexbox {
display: flex;
flex-wrap: wrap;
}
.a, .b, .c {
flex: 1;
}
#media(max-width: 768px) {
.b {
flex: 0 0 100%;
order: 2;
}
}
<div class="flexbox">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
I have a nav element with 3 child divs, with widths 25%, 50%, and 25% respectively, also flexbox order 1,2 and 3 respectively. In mobile view, I want to shift the second element down to next row taking full-width and first and third to stay in the first row consuming 50% widths each. I changed the second element's order to 3 and width 100%, also third element's order to 2 and 50% width. However, it is still not working as expected. Is it possible to achieve something like that using flexbox?
I have included a sample code
<nav>
<div class="a">
A
</div>
<div class="b">
B
</div>
<div class="c">
C
</div>
</nav>
and CSS
nav{
display:flex;
flex-direction:row;
}
.a,.b,.c{
border:1px solid blue;
text-align: center;
}
.a{
width:25%;
order:1;
}
.b{
width:50%;
order:2;
}
.c{
width:25%;
order:3;
}
#media screen and (max-width: 400px){
.a{
width:50%;
}
.b{
width:100%;
order:3;
}
.c{
width:50%;
order:2;
}
}
or use the fiddle
basically this is what I'm trying to achieve.
default view
on mobile
I updated your fiddle: https://jsfiddle.net/s9v926g9/1/
There are 2 things you need to add:
Add flex-wrap: wrap; to the nav element
This will make the elements wrap to a next line, instead of spacing themselves out over the available width.
Set the box sizing
Adding
*{
box-sizing: border-box;
}
to your css will make sure the borders are not messing up your flex-wrap.
You need to set flex-wrap: wrap on flex container and then you can just change order on mobile size and set flex: 0 0 100% on b element. Demo
nav {
display: flex;
flex-wrap: wrap;
}
.a, .b, .c {
border: 1px solid blue;
text-align: center;
}
.a, .c {
flex: 1;
}
.b {
flex: 2;
}
#media screen and (max-width: 400px) {
.b {
order: 2;
flex: 0 0 100%;
}
}
<nav>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</nav>
I am trying to keep my 3d element with full width of the flex container. but not getting the reuslt. any one suggest me the right way for ie11 here?
.parent{
border:1px solid red;
display:flex;
justify-content:space-between;
padding:0 40px;
}
.child{
flex:0 0 30%;
border:1px dashed green;
}
.child.last{
/* not working */
width:100%;
}
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child last">three</div>
</div>
To enable for the last child to wrap and be 100% wide, add flex-wrap: wrap to parent and use flex-basis on last child.
.parent{
border:1px solid red;
display:flex;
flex-wrap: wrap;
justify-content:space-between;
padding:0 40px;
}
.child{
flex:0 0 30%;
border:1px dashed green;
}
.child.last{
flex-basis: 100%;
}
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child last">three</div>
</div>
To make the last child 100%-width only after wrapping...
Use flex: 1:
The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container. It makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the remaining space.
.parent{
border:1px solid red;
display:flex;
justify-content:space-between;
padding:0 40px;
}
.child{
flex:0 0 30%;
border:1px dashed green;
}
.child.last{
width:100%;
/* SOLUTION */
flex: 1;
}
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child last">three</div>
</div>
say I have...
<div id="A"></div>
<div id="B"></div>
How can the end-user view div B on top of div A on their browser?
I'm trying to do this with CSS without editing the html.
You can use flex-box and order to acheive what you want
body {
display: flex;
flex-wrap:wrap;
}
#A {
width: 100%;
height:50px;
background: red;
color:white;
order: 2;
}
#B {
width: 100%;
height:50px;
background: black;
color:white;
order: 1;
}
<div id="A">A</div>
<div id="B">B</div>
You need to add display:flex; and flex-direction:column-reverse; to the parent of your two divs.
body{
display:flex;
flex-direction:column-reverse;
}
Or you can choose div's order manually with order property:
body {
display: flex;
}
#A {
order: 2;
}
#B {
order: 1;
}
Use CSS3 flex to change the positioning of flex elements and this can be done using order property,
The CSS order property specifies the order used to lay out flex items
in their flex container.
#box{
display:flex;
width:100%;
flex-direction:column;
}
.A{
order:2;
background:#111;
color:#fff;
}
.B{
order:1;
background:#111;
color:#fff;
}
<div id="box">
<div class="A">A</div>
<div class="B">B</div>
</div>
A way to do this in CSS:
The container must have display:flex attribute
Then :
#A{
order:2;
}
#B{
order:1;
}
You can also achieve this with jQuery
$('#B:parent').each(function () {
$(this).insertBefore($(this).prev('#A'));
});
It feels unclean to do it this way but here you go (no container element needed)
#A {
display: table-footer-group;
}
#B {
display: table-header-group;
}
<div id="A">A</div>
<div id="B">B</div>
I have struggled to align content-div elements of a wrapper-div using only CSS with the following restriction.
The wrapper div can have a row which allows multiple content-div elements be on the row
At most 4 content-div elements can exist on a row of the wrapper div.
Content-div elements of the last row must expand to fill the row. (e.g if 3 content-div elements exist on the last row, then the width of each content-div should be 33.3%)
One and only one content-element always is selected, and the selected element should be bottom-left conner of the wrapper-div element.
To handle this, I have tried the following css.
.wrapper{
width:100%;
}
.content{
max-width:100%;
min-width:25%;
background-color:white;
float:right;
}
.content.selected{
position:absolute;
top:100%;
left:0;
float:left;
background-color:yellow;
}
I thought that the "float:right; float:left position:absolute; top:100%; left:0;" option can handle the restriction 1 and restriction 4, the "min-width:25%" option can handle the restriction 2 and the "max-width:100%" option can handle the restriction 3. However, only a few restriction were satisfied through the CSS.
I have setup jsFiddle example:
https://jsfiddle.net/6qyc5kLw/2/
I would help in this regard.
This image is what I want to do.
ever considered display:flex? its HUGE!
.wrapper{
width:100%;
position:relative;
display: flex;
flex-flow:row wrap;
align-items: stretch;
}
.content{
min-width:25%;
background-color:white;
//float:right;
flex:1;
order:1;
}
.content.selected{
//position:absolute;
//top:100%;
//left:0;
//float:left;
background-color:yellow;
order:-1;
}
The new flexbox possibilities are most certainly what you are looking for. See below snippet or https://jsfiddle.net/6qyc5kLw/3/ for an updated demo with some basic flexbox properties. An additional one would be
flex-order (to reverse the order of elements in first row)
.wrapper{
width:100%;
position:relative;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.content{
flex-basis: 25%;
background-color:white;
border: 1px solid #ccc;
flex-grow: 1;
box-sizing: border-box;
}
.content.selected{
align-self: flex-end;
background-color:yellow;
}
<body>
<div class="wrapper">
<div class="content">
1
</div>
<div class="content">
2
</div>
<div class="content">
3
</div>
<div class="content">
4
</div>
<div class="content selected">
5
</div>
<div class="content">
6
</div>
<div class="content">
7
</div>
</div>
</body>
You can use display: flex
.wrapper{
width:100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.content{
background:#fff;
box-flex: 1;
min-width:25%;
flex: 1;
margin: auto;
}
.content.selected{
background-color:yellow;
}
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content selected">5</div>
<div class="content">6</div>
<div class="content">7</div>
</div>
Here is exactly what you want in example picture:
.wrapper{
width:100%;
position:relative;
}
.content{
max-width:100%;
min-width:25%;
background-color:white;
float:right;
border: 1px solid black;
box-sizing: border-box;
}
.content.selected{
background-color:yellow;
float: left;
width: 33.33%;
}
.content:nth-child(6) {
float: right;
width: 33.33%;
}
.content:nth-child(7) {
float: left;
width: 33.33%;
}
<body>
<div class="wrapper">
<div class="content">
1
</div>
<div class="content">
2
</div>
<div class="content">
3
</div>
<div class="content">
4
</div>
<div class="content selected">
5
</div>
<div class="content">
6
</div>
<div class="content">
7
</div>
</div>
</body>