The page has elements that are arranged in a row on the desktop. In the mobile version, one of the elements that is in the middle should be placed on a new line, how can flex do this?
.container {
display: flex;
}
.item {
width: 100px;
height: 100px;
display: block;
}
.item:nth-child(1) {
background: green;
}
.item:nth-child(2) {
background: red;
}
.item:nth-child(3) {
background: blue;
margin-left: auto;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
You can try like below:
.container {
display: flex;
}
.item {
width: 100px;
height: 100px;
display: block;
}
.item:nth-child(1) {
background: green;
}
.item:nth-child(2) {
background: red;
}
.item:nth-child(3) {
background: blue;
margin-left: auto;
}
#media screen and (max-width: 720px) {
.container {
flex-wrap: wrap;
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
margin-left: calc(100% - 200px); /* 200px is width of 2 boxes */
}
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Related
EDIT: This may be a problem with Safari 14.0.x for macOS.
I’m trying to make the .block element in the middle .flex-item span the full height of its parent, but it instead just collapses.
body {
height: calc(100vh - 2 * 4px);
margin: 4px;
}
div {
box-sizing: border-box;
border-width: 0.8vh;
border-style: solid;
padding: 2vh;
}
.flex {
height: 100%;
border-color: red;
display: flex;
flex-direction: column;
}
.flex-item {
border-color: blue;
}
.box {
height: 15vh;
border-color: green;
padding: 0;
}
.flex-item:last-child > .box {
height: 8vh;
}
.grow {
flex-grow: 1;
}
.grow > .box {
height: 100%;
}
<div class="flex">
<div class="flex-item">
<div class="box"></div>
</div>
<div class="flex-item grow">
<div class="box two"></div>
</div>
<div class="flex-item">
<div class="box"></div>
</div>
</div>
I could edit the last of the code to what’s below to make it work, but I’d rather not have one child be displayed as flex while the others are displayed as block. Is there another way I could go about doing this?
.grow {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.grow > .box {
flex-grow: 1;
}
body {
height: calc(100vh - 2 * 4px);
margin: 4px;
}
div {
box-sizing: border-box;
border-width: 0.8vh;
border-style: solid;
padding: 2vh;
}
.flex {
height: 100%;
border-color: red;
display: flex;
flex-direction: column;
}
.flex-item {
border-color: blue;
}
.box {
height: 15vh;
border-color: green;
padding: 0;
}
.flex-item:last-child > .box {
height: 8vh;
}
.grow {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.grow > .box {
flex-grow: 1;
}
<div class="flex">
<div class="flex-item">
<div class="box"></div>
</div>
<div class="flex-item grow">
<div class="box"></div>
</div>
<div class="flex-item">
<div class="box"></div>
</div>
</div>
You could set it as follow:
.grow {
flex-grow: 1;
height: 100%;
}
.grow > .box {
height: 100%;
}
This does seem to the trick for me in Safari.
If you don't want to use flexbox on the .grow element.
I have a container div.
Inside it I have all the child divs each with float left property.
How do space the child div evenly across the row ?
The code pen is as follows:
https://codepen.io/pranavbhagwat81/pen/NWNgaVW
<div class='box'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
</div>
CSS
.box{
}
.box1{
height:50px;
width:50px;
background-color:violet;
float:left;
}
.box2{
height:50px;
width:50px;
background-color:indigo;
float:left;
}
.box3{
height:50px;
width:50px;
background-color:green;float:left;
}
Use flex instead, with space-between (or space-evenly):
.box {
display: flex;
justify-content: space-between;
}
.box > * {
height: 50px;
width: 50px;
}
.box1 {
background-color: violet;
}
.box2 {
background-color: indigo;
}
.box3 {
background-color: green;
}
.box4 {
background-color: orange;
}
.box5 {
background-color: yellow;
}
.box6 {
background-color: red;
}
.box7 {
background-color: black;
}
.box8 {
background-color: pink;
}
<div class='box'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
<div class='box4'></div>
<div class='box5'></div>
<div class='box6'></div>
<div class='box7'></div>
<div class='box8'></div>
</div>
If you couldn't use flex, you can calc to determine how much the margin should be:
.box > * {
height: 50px;
width: 50px;
float: left;
}
.box > *:not(:first-child) {
margin-left: calc((100vw - 50px * 8) / 8)
}
.box1 {
background-color: violet;
}
.box2 {
background-color: indigo;
}
.box3 {
background-color: green;
}
.box4 {
background-color: orange;
}
.box5 {
background-color: yellow;
}
.box6 {
background-color: red;
}
.box7 {
background-color: black;
}
.box8 {
background-color: pink;
}
<div class='box'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
<div class='box4'></div>
<div class='box5'></div>
<div class='box6'></div>
<div class='box7'></div>
<div class='box8'></div>
</div>
I can't figure it out. If I have something like this:
html,body,div {margin:0;padding:0;}
.cont {
display: flex;
justify-content: space-between;
height: 100px;
background: #eee;
}
.one, .two, .three {width: 150px;}
.one {
background: #009;
}
.two {
background: #090;
}
.three {
background: #900;
}
<div class="cont">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
Then, how would I change the .two, so it would be exactly after the .one without spacing? The self-align didn't work for me, for some reason.
It's about flex, of course. Not aligning it at all cost.
I want to be able to change only the .two, without touching the other elements.
Is this possible using flex?
Simply adjust the margin of the .two:
html,
body,
div {
margin: 0;
padding: 0;
}
.cont {
display: flex;
height: 100px;
background: #eee;
/* removed this
justify-content: space-between;*/
}
.one,
.two,
.three {
width: 150px;
}
.one {
background: #009;
}
.two {
background: #090;
margin-right: auto; /*added this*/
}
.three {
background: #900;
}
<div class="cont">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
I'm using Flexbox in CSS. In the next link, you can see three squares lying one above the other: http://codepen.io/CrazySynthax/pen/PbLjMO
The first square is the smallest and the last square is the biggest. My question is how to draw these squares that their height will be identical, but their width will differ, so they will look like this:
---
------
---------
This is the code:
<div class="container">
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
</div>
html, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
displax: flex;
}
.container{
height: 100%;
width: 100%;
display: flex;
flex-flow:column wrap;
justify-content:space-around;
}
.square {
flex:1 1 auto;
background-color:gray;
border:solid;
margin: 1em;
}
.square:nth-child(1) {
flex-grow: 1
}
.square:nth-child(2) {
flex-grow: 2
}
.square:nth-child(3) {
flex-grow: 5
}
Add a class to each div with desired width & leave flex-grows in 1 to maintain same height:
html, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
displax: flex;
}
.container{
height: 100%;
width: 100%;
display: flex;
flex-flow:column wrap;
justify-content:space-around;
}
.square {
flex:1 1 auto;
background-color:gray;
border:solid;
margin: 1em;
width: 200px
}
.square:nth-child(1) {
flex-grow: 1;
}
.square:nth-child(2) {
flex-grow: 1;
}
.square:nth-child(3) {
flex-grow: 1;
}
/*added classes*/
.one {
width: 150px;
}
.two {
width: 250px;
}
.three {
width: 350px;
}
#media (max-width: 350px) {
.one {
width: auto;
}
.two {
width: auto;
}
.three {
width: auto;
}
}
<div class="container">
<div class="square one"></div>
<div class="square two"></div>
<div class="square three"></div>
</div>
EDIT: For responsive beyond 350px or whatever add a #media query (make sure it's set at the end of the CSS sheet or later than the custom width .one .two & .three):
Test resizing window on external JSFiddle
#media (max-width: 350px) {
.one {
width: auto;
}
.two {
width: auto;
}
.three {
width: auto;
}
}
I need to have a layout that looks like this on mobile
-----
| 1 |
-----
| 2 |
-----
| 3 |
-----
And like this on desktop:
---------
| | 1 |
| 2 |---|
| | 3 |
| |----
| |
-----
I decided to use flexbox, my code so far:
<div class="row">
<div class="col-xl secound">2</div>
<div class="col-sm first">1<br>2<br>3<br>4</div>
<div class="col-xl third">3</div>
</div>
.row {
display: flex;
flex-flow: row wrap;
}
.col-sm,
.col-xl {
width: 100%;
}
.col-sm {
background: yellow;
}
.col-xl {
&.secound {
background: #ccc;
}
&.third {
background: #aaa;
}
}
#media (min-width: 700px) {
.col-sm {
width: 25%;
background: yellow;
order: 1;
}
.col-xl {
width: 75%;
&.secound {
background: #ccc;
order: 2;
}
&.third {
background: #aaa;
order: 3;
}
}
}
Unfortunately, I can't slide column "3" under "1". What should I do?
Codepen: http://codepen.io/tomekbuszewski/pen/PbprJP?editors=1100
You can try using float for desktop, and using flexbox with order set for mobile.
jsFiddle
.item-1 {background:aqua;}
.item-2 {background:gold;}
.item-3 {background:pink;}
.row {
overflow: hidden;
}
.item {
width: 50%;
}
.item-2 {
float: left;
}
.item-1,
.item-3 {
overflow: hidden;
}
#media (max-width: 768px) {
.row {
display: flex;
flex-direction: column;
}
.item {
width: auto;
float: none;
}
.item-1 {
order: -1;
}
}
<div class="row">
<div class="item item-2">2<br><br><br></div>
<div class="item item-1">1</div>
<div class="item item-3">3</div>
</div>
You could align .third on the right by using flex property justify-content.
You're CSS would look something like this:
.row{
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}
.row > div{
flex: 0 0 50%;
}
For changing order you can use the order property:
.first{ order: 1; }
.second{ order: 2; }
.third{ order: 3; }
#media (min-width: 700px){
.first{ order: 2; }
.second{ order: 1; }
.third{ order: 3; }
}
Check the fiddle
On CSS-tricks you can find a great guide for using Flex properties.
There are few things I've given sizes too just for the sake of the demo but it will still work without the sizes.
You will need to give your container a size but that can be 100vh/100vw or even percentage rather than actual pixels.
body {
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 600px;
width: 100%;
}
.item-1,
.item-2,
.item-3 {
width: 100%;
font-size: 80px;
color: #fff;
text-align: center;
}
.item-1 {
line-height: 100px;
height: 100px;
background: #00bcd5;
}
.item-2 {
line-height: 200px;
height: 200px;
background: #8bc24a;
}
.item-3 {
line-height: 300px;
height: 300px;
background: #fec107;
}
#media (min-width: 700px) {
.item-1,
.item-2,
.item-3 {
width: 50%;
}
.item-1,
.item-3 {
order: 1;
}
.item-2 {
height: 100%;
line-height: 1em;
}
}
<div class="container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
</div>
Hope this is what you're looking for.
You could use float: right for all three elements instead. Together with the appropriate width definitions in media queries, this should work.
Grid:
/* Column */
.item {
width: 100%;
}
/* Wrap */
.row {
display: flex;
flex-flow: column wrap;
}
/* Responsive */
#media screen and (min-width: 700px){
.row {
flex-flow: row wrap;
justify-content: flex-end;
}
.item { width: 50%;}
.item-1 { order: 2; }
.item-2 { order: 1; }
.item-3 { order: 3; }
}
/* Custom style */
.item {
color: #fff;
display: block;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 3rem;
}
.item-1 {
background: #00bcd5;
}
.item-2 {
background:#8bc24a;
}
.item-3 {
background:#fec107;
}
<div class="row">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>
grid with hook:
/* Column */
.item {
width: 100%;
}
/* Wrap */
.row {
display: flex;
flex-flow: column wrap;
}
.sub-row {
display: none;
}
.item-1 { order: 1; }
.item-2 { order: 2; }
.item-3 { order: 3; }
/* Responsive */
#media screen and (min-width: 500px){
.row {
flex-flow: row wrap;
justify-content: flex-end;
}
.sub-row {
width: 50%;
display: flex;
flex-flow: column wrap;
}
.sub-row .item { width: 100%;}
.item { width: 50%;}
.hidden { display: none; }
.item-2 { order: 1; }
.sub-row { order: 2; }
}
/* Custom style */
.item {
color: #fff;
text-align: center;
line-height: 200px;
font-size: 3rem;
}
.item-1 {
background: #00bcd5;
}
.item-2 {
background:#8bc24a;
}
.item-3 {
background:#fec107;
}
<div class="row">
<div class="item item-2">2</div>
<div class="sub-row">
<div class="item item-1">1</div>
<div class="item item-3">3</div>
</div>
<div class="item hidden item-1">1</div>
<div class="item hidden item-3">3</div>
</div>
How about using absolute position?
In your media query change the .row class to this:
.row {
position: relative;
align-items: flex-end;
}
And your .item-2 to:
.item-2 { order: 1; position: absolute; top: 0; left: 0; }
/* Column */
.item {
width: 100%;
}
/* Wrap */
.row {
display: flex;
flex-flow: column wrap;
}
/* Responsive */
#media screen and (min-width: 700px){
.row {
position: relative;
align-items: flex-end;
}
.item { width: 50%;}
.item-1 { order: 2; }
.item-2 { order: 1; position: absolute; top: 0; left: 0; }
.item-3 { order: 3; }
}
/* Custom style */
.item {
color: #fff;
display: block;
text-align: center;
line-height: 200px;
font-size: 3rem;
}
.item-1 {
background: #00bcd5;
}
.item-2 {
background:#8bc24a;
}
.item-3 {
background:#fec107;
}
<div class="row">
<div class="item item-1">1</div>
<div class="item item-2">2
<br>2</div>
<div class="item item-3">3</div>
</div>
Revised Codepen