I am trying to achieve a simple clean minimalistic responsive layout in CSS3 Flex, where:
A) in the desktop mode the body contains three vertical elements side by side "all in one row", and;
B) an alternative vertical oriented mobile version mode where the body contains the elements as rows on top of eachother, "all in one column".
But my code is broken somewhere as I dont see the mobile version kicking in when resizing the the window to narrow vertical orientation. What am I missing?
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: row;
flex: 1;
background: yellow;
}
main {
flex: 2;
background: tomato;
}
nav {
flex: 1;
background: tan;
}
aside {
flex:1;
background: thistle;
}
/* FOR MOBILE PHONES */
#media only screen and (orientation: vertical) and (max-width: 768px) {
body{
flex-direction: column;
}
main {
background: crimson; /* test to see if mobile mode is activated */
}
}
<body>
<main>content</main>
<nav>nav</nav>
<aside>aside</aside>
</body>
orientation: can be portrait or landscape:
body {
display: flex;
min-height: 100vh;
flex-direction: row;
flex: 1;
background: yellow;
}
main {
flex: 2;
background: tomato;
}
nav {
flex: 1;
background: tan;
}
aside {
flex: 1;
background: thistle;
}
/* FOR MOBILE PHONES */
#media only screen and (orientation: portrait) {
body {
flex-direction: column;
}
main {
background: crimson;
}
}
<body>
<main>content</main>
<nav>nav</nav>
<aside>aside</aside>
</body>
Related
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Closed 4 years ago.
What I am trying to achieve is when the layout breaks down to mobile the image block matches the same height as the title/content blocks.
The layout is quite tricky, it works as expected on desktop view with the title block being at the top full width. I think the issue is using flex-wrap: wrap on the mobile view? (I have got this layout working using CSS grid but unfortunately it cannot be used on production)
.wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: flex-end;
}
.title {
background: tomato;
width: 50%;
}
.image {
background: cornflowerblue;
width: 50%;
height: 150px;
}
.content {
background: gold;
width: 50%;
}
<div class="wrapper">
<div class="image">img</div>
<div class="title">title</div>
<div class="content">content</div>
</div>
http://jsfiddle.net/8dvhew3q/4/
use this code
.wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: flex-end;
}
.title,
.image,
.content {
width: 50%;
}
.title {
background: tomato;
}
.image {
background: cornflowerblue;
}
.content {
background: gold;
}
#media only screen and (min-width: 800px) {
.title {
width: 100%;
order: 1;
}
.image {
order: 2;
height: 150px;
}
.content {
order: 3;
}
}
I have a table that can grow, once it grows it can push the grid height to be larger than the background.
I want that the grid itself will have a scroll on top of the background.
I tried to use overflow but did not succeed.
you can see the problem here
here is the relevant code:
.wrapper {
background-repeat: no-repeat;
background-position: top center;
height: 1024px;
min-width: 1055px;
display: grid;
grid-template-columns: 0.1fr 2.8fr 0.1fr;
grid-gap: 10px;
grid-template-rows: 100px auto auto 100px;
font-family: 'roboto',sans-serif;
overflow:visible;
/*grid-auto-rows: minmax(100px, auto);*/
/*border: 1px solid;*/
}
.wrapper > div {
display: flex;
justify-content: center;
/* align-items: center; */
font-size: 16px;
font-weight: 400;
/* border: solid 1px; */
color: #39393ac7 /*#39393A*/;
}
.header {
grid-column: 2 ;
}
.herbTable {
grid-column: 2 ;
}
.chart {
grid-column: 2 ;
}
.footer {
grid-column: 1 / -1 ;
grid-row: 4;
}
#media screen and (max-width : 1439px) /*and (max-width : 1439px) */
{
.wrapper {
background-image: url("~/static/bg1440px.jpg");
background-size: cover;
/* background-size: 1024px; */
/* width: 1024px; */
}
}
#media screen and (min-width : 1440px)
{
.wrapper {
background-image: url("~/static/bg1440px.jpg");
background-size: 1440px auto;
/* height: 1024px; */
width: 1440px;
}
}
<template>
<div class="wrapper">
<appHeader class="header"></appHeader>
<loading :active.sync="isLoading" :can-cancel="false"></loading>
<appHerbsTable v-if="!isLoading" class="herbTable"></appHerbsTable>
<appChart v-if="!isLoading" class="chart">chart</appChart>
<div class="footer"></div>
</div>
</template>
.wrapper {
/* overflow: visible; */
overflow: auto; /* NEW */
}
As you have fixed column widths this should be pretty easy changing your css to:
.herbTable thead {
display: block; /*inline-block should also be ok*/
}
.herbTable tbody {
display: block;
max-height: 300px;
overflow-y: scroll;
}
.. you will have to modify your td widths to make this look nice again
EDIT: (I hope I finally understand what you mean by grid)
html {
height: 100%;
}
body {
height: 100%;
box-sizing: border-box;
padding: 8px;
margin: 0;
}
.wrapper {
height: 100%;
overflow-y: auto;
}
.. hope this helps ..
I've got a form with a couple areas to it and I've been trying to figure out how to get flexbox to lay something out like this:
If possible, how could I do this while using the least amount of parent containers? (Or, why might I not want to do that?)
Stumped enough by not having achieved this that I think asking is the right move. Still wrapping my head around it all.
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background: tomato;
}
.footer {
background: lightgreen;
}
.main {
text-align: left;
background: deepskyblue;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
#media all and (min-width: 600px) {
.aside { flex: 1 auto; }
}
#media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
body {
padding: 2em;
}
<div class="wrapper">
<header class="header">Header</header>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>
Modified from an example found here. Full credit to css-tricks.
Edit: highly recommend that css-tricks article. Very helpful resource for all things flexbox
you can build this layout from body with a few CSS lines:
html,
body {
height: 100%;/* or 100vw just for body */
margin:0 /* reset */
}
body,
section {
display: flex;
}
/* eventually : section {overflow:auto} if you want to keep footer down the screen no matter how much content */
body {
flex-flow: column;
}
section,
article {
flex: 1;/* use whole space avalaible if only child or share it evenly when multiple children */
}
/* add borders to see elements */
header,
footer,
article {
border: solid;
padding: 1em;
}
/* break point without mediaqueries ?
uncomment this below */
/* article {
min-width:320px;/* 2 articles make break point at average 640px */
}*/
<header>
header any height
</header>
<section>
<article>Side</article>
<article>Side</article>
</section>
<footer>
footer any height
</footer>
http://codepen.io/gc-nomade/pen/WGazGX to play with (or download code samples)
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>
In a current project, we would like the navigation above the header on small screens, and for those 2 divs to switch order visually in tablet screen sizes #media (min-width: 20em) for example. I remember being able to do this with some crafty use of floats and negative margins, but I don't remember how I did it. *note that I have box sizing on everything and assume that I have a full reset. HERE is a fiddle
HTML
<nav>nav</nav>
<header>header</header>
CSS
nav, header {
width: 100%;
padding: 2em;
}
nav {
float: left;
background-color: #f06;
}
header {
float: left;
background-color: yellow;
}
#media (min-width: 20em) {
nav {
/* ? */
}
header {
/* ? */
}
} /* ===================== */
THANKS! dw c/o nouveau
You can accomplish this using CSS3 flexbox, which should be available wherever media queries are available.
HTML:
<div id="container">
<nav>nav</nav>
<header>header</header>
</div>
CSS:
#container {
width: 100%;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
nav, header {
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 2em;
}
nav {
background-color: #f06;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
}
header {
background-color: yellow;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
#media (max-width: 20em) {
nav {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
header {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
}
}
I'd suggest taking a look at this tutorial: http://css-tricks.com/resolution-specific-stylesheets/
I feel embarrassed for suggesting that link actually. The appropriate link was css-tricks.com/snippets/css/a-guide-to-flexbox and this is also a decent one weblog.bocoup.com/dive-into-flexbox, both discussing flexbox.