I got a problem with a special responsive flex layout.
My goal:
Container 2 can have a static with.
I already tested a few possible solutions:
float container 2 right on desktop
set absolute position for container 2 on desktop.
Is there a more flexible solution that doesn't use float or absolute positioning?
You can do this with Flexbox if you have fixed height on your container element. Then you just need to change order of elements with media queries.
.content {
display: flex;
flex-direction: column;
height: 100vh;
flex-wrap: wrap;
}
.a {
background: #2873FD;
}
.b {
background: #C015FF;
}
.c {
background: #15FF78;
}
#media(min-width: 480px) {
.a, .c {
order: 1;
flex: 0 0 30%;
}
.b {
order: 2;
flex: 0 0 100%;
}
}
#media(max-width: 480px) {
.content > div {
flex: 1;
}
}
<div class="content">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</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 want to position an element so that of the available space, 1/3 is above it and 2/3 are below. This is a React Native project so I can use flexbox but not grid or floats.
This code works but it's not very clean having to have empty elements div.first and div.last, can it be done without them?
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.one {
background: gold
}
.first {
flex: 1;
}
.last {
flex: 2
}
<div class="first"></div>
<div class="one">One</div>
<div class="last"></div>
https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/PoPjdad
How about using margin like this?
Edit: Just add overflow-y:hidden; to body
body {
display: flex;
flex-direction: column;
height: 100vh;
overflow-y:hidden;
}
.one {
background: gold;
margin:33vh 0 66vh 0;
}
<div class="one">One</div>
I want the two child div's to justify to the left and stack on each other 100% width at a certain browser media width of 1000px.
I have two child div's in a parent that appear correctly:
.relationFRAME {
background: #151515;
color: #FFF;
display: flex;
}
.relationLEFT {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.relationRIGHT {
float: right;
flex: 1;
}
I want the two child div's to justify to the left and stack on each other 100% width at a certain browser media width of 1000px.
Can someone help me understand the change in the CSS to do this?
With #media you can change the styling at an certain width and flex-direction: column; to stack the child elements on top of each other.
Here's an example:
.relationFRAME {
background: #151515;
display: flex;
}
.relationLEFT {
background: green;
flex: 1;
}
.relationRIGHT {
background: orange;
flex: 1;
}
#media only screen and (max-width: 1000px) {
.relationFRAME {
flex-direction: column;
}
}
<div class="relationFRAME">
<div class="relationLEFT">a</div>
<div class="relationRIGHT">b</div>
</div>
You can set a min-width to the child and allow wrapping on the parent :
.relationFRAME {
background: #151515;
display: flex;
flex-wrap:wrap;/* will stack element if width becomes too small */
}
.relationFRAME > div {
flex:1;
min-width:580px;/* whatever value you want to set as a break point */
/* demo use only */
border:1px solid ;
color:white;
margin:2px;
padding:0.25em;
}
<div class="relationFRAME">
<div class="relationLEFT"> Play me full page mode and resize window to check out my behavior </div>
<div class="relationRIGHT">b</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'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>