I can't touch the HTML file and the non-grey items should not change it's position
I'm trying to have the .grey item be at the bottom of the other 4 items. I know there is another question very similar to this one but they are working with columns and I'm not so none of the answers there helped me.
.red {
background-color: #900;
}
.green {
background-color: #090;
}
.blue {
background-color: #00F;
}
.purple {
background-color: #63C;
}
.grey {
background-color: #666;
}
.container {
background-color: #FFF;
width: 50%;
height: 70%;
min-height: 400px;
margin: auto;
border: 2px solid black;
}
.container {
display: flex;
flex-wrap: wrap-reverse;
justify-content: space-between;
}
.item {
width: 45%;
margin-bottom: 5%;
margin-left: 2%;
margin-right: 2%;
margin-top: 0;
}
.item:last-child {
width: 100%;
}
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item blue"></div>
<div class="item purple"></div>
<div class="item grey"></div>
</div>
I need the grey rectangle to be on the bottom
You can add order to the item. It will align wherever you want.
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item blue"></div>
<div class="item purple"></div>
<div class="item grey"></div>
</div>
.red { background-color: #900; }
.green { background-color: #090; }
.blue { background-color: #00F; }
.purple { background-color: #63C; }
.grey { background-color: #666; }
.container {
background-color: #FFF;
width: 50%;
height: 70%;
min-height: 400px;
margin: auto;
border: 2px solid black;
}
.container {
display: flex;
flex-wrap: wrap-reverse;
justify-content: space-between;
}
.item {
width: 45%;
margin-bottom: 5%;
margin-left: 2%;
margin-right: 2%;
margin-top: 0;
}
.item:last-child{
width: 100%;
order: -1; // It will make this item as first. Since it is reversed, this will be the last.
}
you can easily do it with add an order to .grey class
.grey{
order: -1;
width: 100%;
}
because it's justify-content is wrap-reverse ,
in the case you use wrap , you can add order: 1; or higher.
If You want to have div class .item grey on the bottom, In this specific case, You have to change flex-wrap: wrap-reverse to flex-wrap: wrap that's it ;-) Best regards !
.red { background-color: #900; }
.green { background-color: #090; }
.blue { background-color: #00F; }
.purple { background-color: #63C; }
.grey { background-color: #666; }
.container {
background-color: #FFF;
width: 50%;
height: 70%;
min-height: 400px;
margin: auto;
border: 2px solid black;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 45%;
margin-bottom: 5%;
margin-left: 2%;
margin-right: 2%;
margin-top: 0;
}
.item:last-child{
width: 100%;
}
<div class="container">
<div class="item red"></div>
<div class="item green"></div>
<div class="item blue"></div>
<div class="item purple"></div>
<div class="item grey"></div>
</div>
Related
I made this layout that seems to work, the only problem is that I would like that all che filled div are centered.
There are three possible "states":
the cyan element is to the left of all the others
the gold and pink elements are on two columns
all elements are on a single column.
What I want:
In the first case, everything is centered and it works, in the other two it doesn't: the elements are always aligned to the left.
To center I was thinking of using margin: 0 auto but it seems the divs are bigger than their content even if I used inline-flex (look at the grey area during state #3 in the running example). Why?
How can I solve?
.container {
outline: 1px solid black;
max-width: 490px;
margin: 0 auto;
}
.columns {
outline: 1px solid black;
display: inline-flex;
flex-wrap: wrap;
}
.map {
background-color: cyan;
width: 150px;
min-width: 150px;
height: 150px;
min-height: 150px;
margin-right: 20px;
}
.content {
outline: 1px solid black;
background-color: lightgray;
max-width: 320px;
}
.cards {
outline: 1px solid black;
display: inline-flex;
flex-wrap: wrap;
}
.card {
background-color: pink;
outline: 1px solid black;
width: 150px;
height: 70px;
display: inline-block;
}
.card.left {
margin-right: 20px;
}
.texts {
outline: 1px solid black;
display: inline-flex;
flex-wrap: wrap;
}
.text {
background-color: gold;
outline: 1px solid black;
width: 150px;
height: 200px;
display: inline-block;
}
.text.left {
margin-right: 20px;
}
<div class="container">
<div class="columns">
<div class="map"></div>
<div class="content">
<div class="cards">
<div class="card left">card #1</div>
<div class="card">card #2</div>
<div class="card left">card #3</div>
<div class="card">card #4</div>
</div>
<div class="texts">
<div class="text left">text #1</div>
<div class="text">text #2</div>
</div>
</div>
</div>
</div>
use media queries in the proper way and here you go, to play with it find this fiddle link, try to resize the result window.
.container {
max-width: 490px;
margin: 0 auto;
}
.columns {
display: inline-flex;
flex-wrap: wrap;
}
.map {
background-color: cyan;
width: 150px;
min-width: 150px;
height: 150px;
min-height: 150px;
margin-right: 20px;
}
.content {
background-color: lightgray;
max-width: 320px;
}
.cards {
display: inline-flex;
flex-wrap: wrap;
}
.card {
background-color: pink;
width: 150px;
height: 70px;
display: inline-block;
}
.card.left {
margin-right: 20px;
}
.texts {
display: inline-flex;
flex-wrap: wrap;
}
.text {
background-color: gold;
width: 150px;
height: 200px;
display: inline-block;
}
.text.left {
margin-right: 20px;
}
#media(max-width: 520px){
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.columns {
display: inline-block;
}
}
#media(max-width: 352px){
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.map {margin-right: 0;}
.content {
max-width: min-content;
}
.card.left {
margin-right: 0px;
}
.text.left {
margin-right: 0px;
}
}
<div class="container">
<div class="columns">
<div class="map"></div>
<div class="content">
<div class="cards">
<div class="card left">card #1</div>
<div class="card">card #2</div>
<div class="card left">card #3</div>
<div class="card">card #4</div>
</div>
<div class="texts">
<div class="text left">text #1</div>
<div class="text">text #2</div>
</div>
</div>
</div>
</div>
I have a simple nav type layout using flex to space items with different widths horizontally. The items have lines between but as they different heights because the content had different heights
How can I make the items the height of the parent so all dividing lines go to the top of the parent.
https://codepen.io/anon/pen/zbEMVd
* {
font-family: sans-serif;
}
.wrap {
border: 1px solid grey;
display: flex;
padding: 5px;
justify-content: space-between;
max-width: 1200px;
}
.item:not(:last-of-type) {
border-right: 2px solid red;
}
.item-1 {
width: 150px;
}
.item-2 {
width: 50px;
}
.item-3 {
width: 50px;
}
.item-4 {
width: 50px;
}
.item-5 {
flex: 1;
}
.item-6 {
width: 50px;
}
<div class="wrap">
<div class="item item-1">One</div>
<div class="item item-2">Two Two Two Two Two </div>
<div class="item item-3">Three Three Three</div>
<div class="item item-4">Four</div>
<div class="item item-5">Five</div>
<div class="item item-6">Six</div>
</div>
Remove align-self from .item, and add display:flex; align-items: flex-end; instead.
.item{
display: flex;
align-items: flex-end;
/* ... */
}
https://codepen.io/anon/pen/ZPXVra
Make the item element a reverse-column flexbox (and remove align-self: flex-end from it) to get the effect - see demo below:
* {
font-family: sans-serif;
}
.wrap {
border: 1px solid grey;
display: flex;
padding: 5px;
justify-content: space-between;
max-width: 1200px;
}
.item {
/* align-self: flex-end; */
display: flex; /* ADDED */
flex-direction: column-reverse; /* ADDED */
background: #ddd;
}
.item:not(:last-of-type) {
border-right: 2px solid red;
}
.item-1 {
width: 150px;
}
.item-2 {
width: 50px;
}
.item-3 {
width: 50px;
}
.item-4 {
width: 50px;
}
.item-5 {
flex: 1;
}
.item-6 {
width: 50px;
}
<div class="wrap">
<div class="item item-1">One</div>
<div class="item item-2">Two Two Two Two Two </div>
<div class="item item-3">Three Three Three</div>
<div class="item item-4">Four</div>
<div class="item item-5">Five</div>
<div class="item item-6">Six</div>
</div>
I would like all my element to have the same height and the separator to cover all the height. How can I achieve that please ?
The separator is pink, you can see it here with a height: 5em
.daddy {
height: 10em;
width: 10em;
}
.container {
width: auto;
height: auto;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
border: 1px solid lightgrey;
}
.child1 {
width: 3em;
height: 10em;
background-color: red;
}
.child2 {
width: 3em;
height: 15em;
background-color: blue;
}
.separator {
width: 10px;
height: 5em;
background-color: pink;
}
<div class="daddy">
<div class="container">
<div class="child1"></div>
<div class="separator"></div>
<div class="child2"></div>
</div>
</div>
If you remove the align items from container, all three columns will grow to fill the row
.daddy {
height: 10em;
width: 10em;
}
.container {
width: auto;
height: auto;
display: flex;
flex-direction: row;
border: 1px solid lightgrey;
justify-content:center;
}
.child1 {
width: 3em;
background-color: red;
height: 10em; /* this is just to give it some height as no column currently has any height */
}
.child2 {
width: 3em;
background-color: blue;
}
.separator {
width: 10px;
background-color: pink;
}
<div class="daddy">
<div class="container">
<div class="child1">
</div>
<div class="separator">
</div>
<div class="child2">
</div>
</div>
</div>
So because of design reasons I had to use flexbox here and I needed the btn p elements to act like display block, which I managed to through another stack post, but now when I make the "other divs" class 100%, it goes out of the main parent, I cannot figure out why?
#outterWrapper {
display: inline-block;
height: 200px;
border: 1px solid red;
}
#container {
display: flex;
height: 200px;
flex-wrap: wrap;
}
#menu {
display: flex;
flex-basis: 100%;
}
#menu p {
margin: 0;
padding: 8px;
padding-bottom: 0;
}
.otherDivs {
height: 100%;
width: 25%;
background-color: grey;
margin-right: 5px;
}
<div id="outterWrapper">
<div id="container">
<div id="menu">
<p>Btn</p>
<p>Btn</p>
<p>Btn</p>
</div>
<div class="otherDivs"></div>
</div>
</div>
As from the example above the grey box goes outside of the red border?
You can switch to column direction and have something like this :
#outterWrapper {
display: inline-block;
height: 200px;
border: 1px solid red;
}
#container {
display: flex;
height: 200px;
flex-direction:column;
}
#menu {
display: flex;
}
#menu p {
margin: 0;
padding: 8px;
padding-bottom: 0;
}
.otherDivs {
height: 100%;
width: 25%;
background-color: grey;
margin-right: 5px;
}
<div id="outterWrapper">
<div id="container">
<div id="menu">
<p>Btn</p>
<p>Btn</p>
<p>Btn</p>
</div>
<div class="otherDivs"></div>
</div>
</div>
I have trouble forcing an item into the next row in a flexbox layout.
How can I do something like the following image?
This is what I got so far:
#wrap {
display: flex;
width: 86vw;
height: auto;
box-sizing: border-box;
margin: 0 auto;
}
.item1,
.item2 {
width: 50%;
height: 24.5vw;
background: #4add69;
}
.item1 {
margin-right: 10px;
}
.item2 {
margin-left: 10px;
}
.item3 {
width: 60%;
height: 40vw;
background: #d56c6c;
}
<div id="wrap">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
Your code is fine but missing two things.
Use flex-wrap: wrap to
create a new row. Modify the width of the first two items to be
present in a single row.
For the last two items, you need to nest it inside a container and
then wrap them again.
Manipulate the dimension(width, height) and margin values to achieve the perfect/suitable layout.
JSfiddle Demo
* {
margin: 0;
padding: 0;
}
body {
background: #232323;
padding: 10px;
}
#wrap {
display: flex;
width: 86vw;
height: auto;
box-sizing: border-box;
margin: 0 auto;
flex-wrap: wrap;
background: #232323;
/* Added */
}
.item1,
.item2 {
width: 48%;
/* Modified */
height: 24.5vw;
background: #4add69;
margin-bottom: 10px;
}
.item1 {
margin-right: 10px;
}
.item2 {
margin-left: 10px;
}
.item3 {
width: 55%;
height: 40vw;
background: #d56c6c;
margin-right: 10px;
}
.nested-items {
display: flex;
width: 42%;
flex-wrap: wrap;
align-content: space-between;
}
.item4,
.item5 {
background: lightblue;
width: 100%;
height: 49%;
}
<div id="wrap">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="nested-items">
<div class="item4"></div>
<div class="item5"></div>
</div>
</div>
Essentially you need an extra wrapping div for the two 'small' elements like so:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
width: 75%;
margin: 1em auto;
border: 1px solid green;
padding: .25em;
display: flex;
flex-wrap: wrap;
}
.wrap div {
border: 1px solid grey;
margin-bottom: 1px;
}
.box {
height: 80px;
background: lightblue;
flex: 0 0 50%;
}
.tall {
flex: 0 0 65%;
height: 160px;
}
.col {
flex: 0 0 35%;
display: flex;
flex-wrap: wrap;
}
.mini {
flex: 0 0 100%;
height: 80px;
background: pink;
}
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box tall"></div>
<div class="box col">
<div class="mini"></div>
<div class="mini"></div>
</div>
</div>
I've used a single overall element here with wrapping but the image suggests that this would be much simpler with actual rows and the extra wrapper mentioned before.
Codepen Demo of 2nd option with rows.