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>
Related
I have this React code:
const AddPlace = () => {
return (
<div className="split">
<div className="left">
<AddPlaceCard />
</div>
<div className="right" id="map">
<Map />
</div>
</div>
);
}
for large screens this is my CSS:
.split {
display: flex;
flex-direction: raw;
}
.left {
width: 50%;
}
.right {
width: 50%;
}
Large Screen Image:
Now I want a responsive design for mobile which orders the map below the card, I used this code but it didn't help:
#media screen and (max-width: 1000px) {
.split {
display: flex;
flex-direction: column;
}
.left {
width: 100%;
}
.right {
width: 100%;
}
}
Small Screen Image:
You can get away from explicitly setting widths and just use flex grow:1 for each of the child divs - to see the difference - view the snippet in the small snippet window for the small view - and then click the toggle fullScreen button to see the divs sit side by side.
So to explain the code - in both scenarios = the flex-grow: 1 on the child divs causes it to expand to fill the available space - and because there are two divs - this will cause a 50% / 50% split (same deal if there are 3 divs - they will take up equal thirds of the available space).
So the only difference then between the normal and the media-query is which direction do they grow in. Since the default direction is "row" you do not really even need to include that in the initial styling - I included it to demontrate the point in this snippet.
In flex direction: row: - flex-grow: 1 will cause a horizontal expansiosion and in flex-direction: column - it is a vertical expansion.
Also - note that by applying height: 100% to the html, body, and .split - each div takes the entire height available.
html {
height: 100%;
}
body {
height: 100%;
margin:0
}
.split {
display: flex;
flex-direction: row;
height: 100%;
}
.split div {
flex-grow:1;
padding: 16px
}
.left {
border: solid 1px red;
}
.right {
border: solid 1px blue;
}
#media screen and (max-width: 1000px) {
.split {
flex-direction: column;
}
}
<div class="split">
<div class="left">
<p> This is the div for the placecard</p>
</div>
<div class="right" id="map">
<p> This is the div for the map</p>
</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 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 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>
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>