I've been looking around and could not find a way to move specific containers to the sides of the page, whilst leaving the other containers intact.
What I would would like to achieve is the following layouts for mobile and desktop screens, respectively: Desktop and Mobile
Note the colors: the third row on the mobile layout should become a left column on the desktop layout, and the fifth row on the mobile layout should become a right column on the desktop layout.
The rest of the rows should stay as a middle column on desktops.
I was trying to achieve that by using Flexbox but could not get it to done properly.
I would love to hear suggestions.
Thanks!
Seemed like an interesting exercise. It's a bit rough but the basics are there.
Codepen demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
min-height: 100%;
}
.wrap {
height: 100%;
border: 1px solid grey;
display: flex;
flex-direction: column;
}
.child,
.aside {
flex: 1;
background: plum;
order: 1;
}
.aside {
background: #c0ffee;
}
#media screen and (min-width: 760px) {
.wrap {
flex-wrap: wrap;
}
.child {
order: 2;
width: 80%;
flex: 1 0 25%;
}
.left {
order: 1;
width: 10%;
flex: 0 0 100%;
}
.right {
order: 3;
width: 10%;
flex: 0 0 100%;
}
}
<div class="wrap">
<div class="child">One</div>
<div class="child">Two</div>
<div class="aside left">Three</div>
<div class="child">Four</div>
<div class="aside right">Five</div>
<div class="child">Six</div>
</div>
Related
I've been trying to achieve the layout below using flexbox. I originally had a left hand sidebar containing the image & navigation, and a main content area. On mobile, the sidebar used to wrap under the main content.
The problem with that is that I need the image to remain at the top on mobile, so I've been trying with three sibling divs in one wrapper div.
Is this even possible with flexbox or will I need to use css grid?
Although CSS Grid would be the best approach to achieve the lay-out you want, it is possible using CSS Flexbox.
You just have to create a wrapper div with three divs inside (when doing a mobile first approach) and with .content set to flex: 1 to stretch out the height of your viewport.
Then for desktop (in this case #media screen and (min-width: 1000px)), change the order (MDN reference of order) of .navigation and .content and give all three divs appropriate widths according to their needs. The only change to div.wrapper is that it needs flex-flow: column wrap to wrap correctly.
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
min-height: 100%;
}
.box {
display: flex;
}
.content {
flex: 1;
}
#media screen and (min-width: 1000px) {
.wrapper {
flex-flow: column wrap;
}
.navigation {
order: 2;
}
.content {
order: 3;
}
.image,
.navigation {
width: 200px;
flex: 50%;
}
.content {
width: calc(100% - 200px);
flex: 0 0 100%;
}
}
/* Generic styling */
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.image {
background: orange;
height: 60px;
}
.content {
background: lightblue;
}
.navigation {
background: lightgreen;
height: 60px;
}
<div class="wrapper">
<div class="box image">Image</div>
<div class="box content">Content</div>
<div class="box navigation">Navigation</div>
</div>
I am using the recommended approach from this question https://stackoverflow.com/a/468080/2981429 and have two divs:
#left-pane {
float: "left";
width: "300px";
}
#right-pane {
margin-left: "300px";
}
the left pane takes up a fixed 300px width and the right pane always takes up 100% of the remaining space.
I want to add a "minimum width" to the right pane. When it gets below a width of around 300px I want to move it below the left pane.
When I try actually adding min_width: 300px to the right pane, it just extend invisibly past the boundaries of the page - it doesn't seem to be able to get below the floated left pane.
Codepen
You can use flexbox for your layout.
You can find a good point to start on MDN.
When you use a small device, you can use a media-query to get the divs on column.
For example:
#media (max-width: 600px) {
.container{
flex-direction:column;
}
#left,#right{
flex: 0 1 100%;/* set the width to 100% for the 2 columns */
}
}
.container{
display:flex;
}
#left {
flex:0 1 300px;
height: 300px;
background-color: blue;
}
#right {
flex:1 1 auto;
height: 300px;
background-color: darkred;
}
<div class="container">
<div id='left'></div>
<div id='right'></div>
</div>
that is not a float job. you need flex for this instance.
.container {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
#left-pane {
width: 300px;
min-width: 300px;
}
#media only screen and (max-width: 300px) {
.container {
flex-flow: column;
}
}
using flex gives you a lot of new layout and responsive options, you can read more here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent {
display: flex;
}
#left {
float: left;
width: 300px;
height: 300px;
background-color: blue;
}
#right {
height: 300px;
background-color: darkred;
width: calc(100% - 300px);
}
#media (max-width: 600px) {
.parent {
flex-direction: column;
}
#left,
#right {
width: 100%;
}
}
<div class="parent">
<div id='left'></div>
<div id='right'></div>
</div>
I have 3 row grid, which is like this
https://codepen.io/Ramlev/pen/pXaqdg
<div class="container">
<div class="first">asd</div>
<div class="second">asd</div>
<div class="third">asd</div>
</div>
and the stylesheet
.container {
display: flex;
flex-direction: row;
}
.first {
flex: 1 0 250px;
background-color: red;
height: 400px;
}
.second {
flex: 1 0 250px;
background-color: green;
height: 200px;
}
.third {
flex: 1 0 250px;
background-color: blue;
height: 200px;
}
But when i go to a smaller device, i want the third row to fall under second row, and keep those two stacked to the right of the first row.
Does that make any sense?
You can clean up your code to start with by removing the flex shrink of 0 and the 250px flex basis since you really want halves and thirds with no real minimum width. By adding another wrapper around columns 2 and 3 and using a media query, you can get exactly what you described.
The mobile first default style can be achieved if the first column and the wrapper of columns 2 and 3 both have flex grow set to 1.
Then, once the breakpoint is reached, set the flex-grow property of the wrapper to 2 so it will be twice as big as column 1 and set it to display flex so it stops stacking columns 2 and 3.
.container {
display: flex;
flex-direction: row;
}
.first {
flex: 1;
background-color: red;
height: 400px;
}
.wrapper {
flex: 1;
}
#media only screen and (min-width: 500px) {
.wrapper {
display: flex;
flex: 2;
}
}
.second {
flex: 1;
background-color: green;
height: 200px;
}
.third {
flex: 1;
background-color: blue;
height: 200px;
}
<div class="container">
<div class="first">asd</div>
<div class="wrapper">
<div class="second">asd</div>
<div class="third">asd</div>
</div>
</div>
I am just wondering if it's possible in flexbox (without javascript or positioning or css grid) to change the layout like this. On desktop
and on phone it should look like below
I am using bootstrap 4, and there is option to change order but even that is not able to fulfill the expectation.
i am able to achieve the functionality using float
<div class="container">
<div class="float-none float-lg-left col-lg-6">1</div>
<div class="float-none float-lg-right">2</div>
<div class="float-none float-lg-left col-lg-6">3</div>
</div>
I know i'm a bit late to the question, not entirely Bootstrap 4 flexbox either - but you can do this with display:flex and a media query. You just need to set a height on the parent (in this case .wrapper), so that boxes 1 and 3 are '50%' of this height.
View the snippet full screen to see the switch of the boxes:
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
}
.box1 {
background: #31d1d3;
}
.box2 {
background: #bce9e2;
}
.box3 {
background: #62b1b7;
}
#media screen and (min-width:797px) {
.box2 {
order: 3;
}
.box1,
.box3 {
flex: 0 0 50%;
width: 50%;
}
.box2 {
flex: 0 0 100%;
width: 50%;
}
}
<div class="container">
<div class="wrapper">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</div>
Without CSS grid it is possible BUT Column 2 MUST be smaller than Column 1 and Column 3 combined.
* {
box-sizing: border-box;
}
.box {
border: 1px solid grey;
}
#media (min-width: 576px) {
.wrapper {
padding-right: 50%;
position: relative;
}
.box--2 {
position: absolute;
height: 100%;
right: 0;
top: 0;
width: 50%;
}
}
<div class="wrapper">
<div class="box">Column 1</div>
<div class="box box--2">Column 2</div>
<div class="box">Column 3</div>
</div>
The size of .wrapper would be calculated from the height of the elements in flow (Column 1 and Column 3). If Column 2 is taller than those two, it will overflow out of the wrapper and there's nothing you can do to fix that without JavaScript.
Honestly, using CSS Grid (with IE fallbacks) is the better solution.
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
I have the following layout using flexbox:
I want to have the div containing 2 on the right hand side, and the Team and Scorers should make up the space to the left of it.
Required layout:
It's the same idea as the 2 div having a rowspan of 2, if using a table.
Is there a way to position Team and Scorers to the left of 2 without wrapping them in their own div? If so, is it worth the trouble?
Here is my CSS so far:
.container {
max-width: 600px;
}
.team {
background-color: chartreuse;
}
.score {
background-color: brown;
}
.scorers {
background-color: steelblue;
}
.cards-desktop {
background-color: goldenrod;
}
.carded-players {
background-color: darkorange;
}
.left-col {
display: flex;
flex-flow: row wrap;
}
.left-col > * {
flex: 1 100%;
}
.team {
order: 1;
}
.score {
order: 3;
}
.scorers {
order: 2;
}
.cards-desktop {
order: 4;
}
.carded-players {
order: 5;
}
.team {
flex: 1 auto;
}
.score {
flex: 0 150px;
font-size: 60px;
}
The layout will be different on other breakpoints, so I want to have one HTML block that doesn't get duplicated or mimicked for other breakpoints. That's why I don't want to wrap these two divs in a container, because it's unnecessary on other breakpoints' layouts.
Codepen Link
Here..
Wrap 1, 2 & 3 in their own div with display:flex / flex-direction:column / flex-wrap:wrap.
Then set widths on the various components to suit.
Unfortunately, I think Chrome this requires a fixed height on that wrapper to force the wrap (it's a bug I think)...and there you have.
* {
box-sizing: border-box;
}
.team {
background: chartreuse;
}
.score {
background: brown;
}
.scorers {
background: steelblue;
}
.cards-desktop {
background: goldenrod;
}
.carded-players {
background: darkorange;
}
.wrap {
width: 80%;
margin: auto;
display: flex;
flex-direction: column;
}
.top > div {
padding: 5px;
}
.bottom > div {
height: 25px;
}
.top {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 150px;
}
.team,
.scorers {
height: 50%;
width: 75%;
}
.score {
width: 25%;
flex: 1 0 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}
<div class="wrap">
<div class="top">
<div class="team">Team</div>
<div class="scorers">Scorers</div>
<div class="score">
<h1>2</h1>
</div>
</div>
<div class="bottom">
<div class="cards-desktop">cards-desktop</div>
<div class="carded-players">carded-players</div>
</div>
</div>