This is what I want to do:
I have the brown part separately at the top as a div. Then the other colors in a content div.
I don't understand how to bring the blue part at the top for < 768px since it is inside the content div .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
}
.container{
display: flex;
flex-direction: column;
}
.aquablue{
padding: 50px;
background-color: #B0C4DE;
order: 1;
}
.brownC{
padding: 50px;
background-color: #663300;
}
.yellowC{
padding: 50px;
background-color: #FFCC00;
order: 3;
}
.greenC{
padding: 50px;
background-color: #00FF00;
order: 4;
}
.blueC{
padding: 50px;
background-color: #336699;
order: 5;
}
#media(min-width: 768px){
.container{
display: flex;
flex-direction: column;
}
.content{
display: flex;
order: 2;
}
.left{
display: flex;
flex-direction: column;
width: 50%;
}
.right{
display: flex;
flex-direction: column;
width: 50%;
}
.brownC{
padding: 50px;
background-color: #663300;
width: 100%;
order: 1;
}
.yellowC{
padding: 50px;
background-color: #FFCC00;
}
.greenC{
padding: 50px;
background-color: #00FF00;
}
.blueC{
padding: 50px;
background-color: #336699;
}
}
</style>
</head>
<body>
<div class="container">
<div class="brownC"></div>
<div class="content">
<div class="left">
<div class="aquablue"></div>
<div class="yellowC"></div>
</div>
<div class="right">
<div class="greenC"></div>
<div class="blueC"></div>
</div>
</div>
</div>
</body>
</html>
For pure css you can use this solution. What you do is to remove your "structual divs", on your .container is to add flex: row; and flex-wrap: wrap, then give your elements the width they should be, as in this case was width: 100%; for .brownC and width: 50%; for the rest. Does it make sense?
Check the JSFIDDLE
css
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
}
.aquablue {
padding: 50px;
background-color: #B0C4DE;
order: 1;
}
.brownC {
padding: 50px;
background-color: #663300;
order: 2;
}
.yellowC {
padding: 50px;
background-color: #FFCC00;
order: 3;
}
.greenC {
padding: 50px;
background-color: #00FF00;
order: 4;
}
.blueC {
padding: 50px;
background-color: #336699;
order: 5;
}
#media(min-width: 768px) {
.container {
flex-direction: row;
flex-wrap: wrap;
}
.brownC {
width: 100%;
order: 1;
}
.aquablue {
order: 2;
width: 50%;
}
.yellowC {
order: 4;
width: 50%;
}
.greenC {
order: 3;
width: 50%;
}
.blueC {
order: 5;
width: 50%;
}
}
html
<div class="container">
<div class="brownC">
</div>
<div class="aquablue">
</div>
<div class="yellowC">
</div>
<div class="greenC">
</div>
<div class="blueC">
</div>
</div>
You can use the move the elements using jQuery on window resize event.
JS FIDDLE : https://jsfiddle.net/tejashsoni111/pdr8qyut/
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() <= 768){
jQuery(".aquablue").after(jQuery(".brownC"));
}else{
jQuery(".content").before(jQuery(".brownC"));
}
})
})
Related
I am trying to fit 4 divs within the view bounds of a non-scrolling column flexbox but I can't seem to get it working.
What I want:
What I experience:
I have no idea what I am doing and just randomly permutating flex-related CSS fields to try and fix it haha. If someone could point out what is wrong I would love you forever.
Here is the gist of my code:
body {
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
#flexcontent {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
#header #firstContent #secondContent {
flex: 1 1 auto;
}
#header {
background-color: green;
font-weight: 700;
align-content: center;
font-size: 7rem;
}
#firstContent {
background-color: red;
}
#secondContent {
background-color: yellow;
}
#picture {
background-color: blue;
flex: 0 1 auto;
}
<body>
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg"/></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
</body>
Try this below. And use object-fit if image doesn't expand or shrink as expected or aspect ratio changes.
#flexcontainer {
display: flex;
flex-direction: column;
height: 100vh;
}
#picture {
flex: 1;
min-height: 0;
}
body {
margin: 0;
}
img {
object-fit: contain;
height: 100%;
width: auto;
}
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
Please check your container div id
<div id="flexcontainer">
change
#flexcontent {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
to
#flexcontainer {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
try object-fit for img
img {
object-fit: contain;
height: 100%;
}
there is a few thing to fix in your CSS, typo and value used
html, /* to inherit height */
body {
margin: 0;
width: 100%;
height: 100%;
}
#flexcontainer {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 0; /* force size calculation*/
}
#header,/* you meant each one of them */
#firstContent,
#secondContent {
flex: 1;
margin: 2px 5vw;/* for demo */
}
#header {
background-color: green;
font-weight: 700;
/* align-content: center; or did you forget display:flex here */
font-size: calc(1rem + 2vw);
}
#firstContent {
background-color: red;
}
#secondContent {
background-color: yellow;
}
#picture {
display: flex;
min-height: 0; /* force size calculation*/
}
img {
max-height: 90%;/* whatever */
margin: auto;/* or align-content + justify-content : center on flex parent*/
}
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
Allow the item holding the image to shrink below its content size.
Define the parameters of the image.
(Tested in Chrome, Firefox and Edge.)
#flexcontainer {
display: flex;
flex-direction: column;
height: 100vh;
}
#picture {
min-height: 0;
background-color: blue;
}
#picture>img {
width: 100%;
max-height: 100%;
object-fit: contain;
}
#header {
background-color: green;
font-weight: 700;
font-size: 7rem;
}
#firstContent {
background-color: red;
}
#secondContent {
background-color: yellow;
}
body {
margin: 0;
}
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
jsFiddle demo
I've tidied up your html a little and simplified the CSS. You want to take the overflow: hidden off of the body tag, and give each of your elements a class instead of an id. Finally, simplify the image section by making the image tag itself a flexbox item:
html,
body {
height: 100%
}
body {
/*overflow: hidden;*/
margin: 0;
}
.flexContainer {
display: flex;
flex-direction: column;
height: 100%;
}
.flexContainer__header,
.flexContainer__firstContent,
.flexContainer__secondContent {
flex: 1 1 auto;
}
.flexContainer__header {
background-color: green;
font-weight: 700;
align-content: center;
font-size: 7rem;
}
.flexContainer__firstContent {
background-color: red;
}
.flexContainer__secondContent {
background-color: yellow;
}
.flexContainer__picture {
display: block;
width: 100%;
}
<div class="flexContainer">
<div class="flexContainer__header">Title</div>
<img class="flexContainer__picture" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" />
<div class="flexContainer__firstContent">first</div>
<div class="flexContainer__secondContent">second</div>
</div>
I have a flexbox containing two divs that divides the screen as equals. When the screen gets smaller than 800px, i want the flexbox direction to change from row to column and each div to have the size of the screen, making the flexbox div scrollable, how to do that?
My actual code is:
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
#left {
flex: 1;
background-color: red;
}
#right {
flex: 1;
background-color: blue;
}
#media (max-width:800px) {
body {
flex-direction: column;
}
}
<!DOCTYPE html>
<html>
<head lang="pt-br">
<meta charset="UTF-8">
</head>
<body>
<div id="left">
</div>
<div id="right">
</div>
</body>
</html>
Simply make body height auto and add this CSS (making each div full screen height):
#left,#right {
height:100vh;
}
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
#left {
flex: 1;
background-color: red;
}
#right {
flex: 1;
background-color: blue;
}
#media (max-width:800px) {
body {
flex-direction: column;
height:auto;
}
#left,#right {
height:100vh;
}
}
<body>
<div id="left">
</div>
<div id="right">
</div>
</body>
Or make the height of body equal to 2x100vh=200vh so that each div will take the half (100vh) since you set flex:1 on both:
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
#left {
flex: 1;
background-color: red;
}
#right {
flex: 1;
background-color: blue;
}
#media (max-width:800px) {
body {
flex-direction: column;
height:200vh;
}
}
<body>
<div id="left">
</div>
<div id="right">
</div>
</body>
Or make the height of body equal to 2x100% which will also be the same as 2x100vh in your case:
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
#left {
flex: 1;
background-color: red;
}
#right {
flex: 1;
background-color: blue;
}
#media (max-width:800px) {
body {
flex-direction: column;
height:200%;
}
}
<body>
<div id="left">
</div>
<div id="right">
</div>
</body>
I have one primary container that holds all the divs using a flex-direction of row.
A second container that is nested holds two divs that have a flex-direction of column, to stack up two divs in one row in the outer container.
Using flex-box and media query, I was attempting to change the existing two row column div 'smaller-container' into a three row column div once the browser width is less than 1000px.
I tried doing this by creating a third empty div within smaller-container and swapping its order with a div outside the smaller-container once the browser width is less than 1000px.
It didn't work. I think this is because the two divs in question (the empty div and the outer div) are at a different nesting level.
It would be great if someone can find a solution to turn the two row in one column to three row in one column.
Even better if that solution has no need of a nested container. Javascript solution is also welcome if it doesn't require a plugin.
Image of how it should look:
/*Basic Reset*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
max-width: 1366px;
margin: auto;
width: 100%;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.box-1 {
order: 1;
background-color: red;
height: 150px;
width: 50%;
}
.smaller-container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 50%;
order: 2;
}
.box-2 {
order: 3;
background-color: blue;
height: 75px;
width: 100%;
}
.box-3 {
order: 4;
background-color: green;
height: 75px;
width: 100%;
}
.box-4 {
order: 5;
width: 100%;
}
.box-5 {
order: 6;
background-color: orange;
height: 150px;
width: 100%;
}
#media screen and (max-width: 1000px) {
.box-2 {
height: 50px;
}
.box-3 {
height: 50px;
}
/******* Here we swap the empty div that hasbeen existing in the smaller container
with an outer div ********/
.box-5 {
order: 5;
height: 50px;
}
.box-4 {
order: 6;
background-color: purple;
height: 150px;
}
}
[image of desired solution][1] [1]:http://i.stack.imgur.com/vlvlx.png
<div class="container">
<div class="box-1"></div>
<div class="smaller-container">
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
</div>
<div class="box-5"></div>
</div>
https://jsfiddle.net/lukindo/nuv603h9/1/
Well, you're right that the order property doesn't work at different nesting levels. It only works among siblings.
Scripting is one option you can pursue. Another, a bit hackish, is to duplicate an HTML element. Specifically, place the orange box element (.box-5) in both the primary and nested container.
Then use display: none on both orange and purple boxes per your media query.
Here's an example:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
max-width: 1366px;
margin: auto;
width: 100%;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.box-1 {
order: 1;
background-color: red;
height: 150px;
width: 50%;
}
.smaller-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 50%;
order: 2;
}
.box-2 {
order: 3;
background-color: blue;
height: 75px;
width: 100%;
}
.box-3 {
order: 4;
background-color: green;
height: 75px;
width: 100%;
}
.smaller-container > .box5 {
display: none;
}
.container > .box-5 {
order: 6;
background-color: orange;
height: 150px;
width: 100%;
}
#media screen and (max-width: 1000px) {
.box-2 {
height: 50px;
}
.box-3 {
height: 50px;
}
.container > .box-4 {
order: 6;
background-color: purple;
height: 150px;
width: 100%;
}
.smaller-container > .box-5 {
display: block;
height: 50px;
background-color: orange;
width: 100%;
order: 6;
}
.container > .box-5 {
display: none;
}
}
<div class="container">
<div class="box-1"></div>
<div class="smaller-container">
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-5"></div>
</div>
<div class="box-4"></div>
<div class="box-5"></div>
</div>
Revised Fiddle
I need to assign a dimension of height: 50px to
.panelDraggable__header
.panelDraggable__info
.panelDraggable__footer
Using the following code I am not able to set the height, if you trying to inspect .panelDraggable__header its computed value is 18px.
Only way is when I adjust the position to absolute, which disrupt my layout.
How to solve this problem?
What is in general the best way to add the right dimension to a flex box?
Should I use flex-basis instead?
#panelDevTools {
position: fixed;
top: 25px;
left: 50px;
width: 260px;
height: 300px;
background-color: yellow;
}
.panelDraggable {
display: flex;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.panelDraggable__header {
order: 0;
background-color: greenyellow;
height: 50px;
}
.panelDraggable__info {
order: 1;
background-color: lightseagreen;
height: 50px;
}
.panelDraggable__content {
order: 3;
background-color: slategrey;
}
.panelDraggable__footer {
order: 4;
background-color: blueviolet;
height: 50px;
}
<div data-ntv-type="PanelDevTools" class="panelDraggable" id="panelDevTools" widgetid="panelDevTools">
<div id="panelDevTools__info" class="panelDraggable__info">Tools for developement</div>
<div id="panelDevTools__content" class="panelDraggable__content">
<div id="cnt-inner" style="height:800px;width:50px;background-color:red;"></div>
</div>
<div id="panelDevTools__footer" class="panelDraggable__footer ">Footer</div>
<div id="panelDevTools__header" class="panelDraggable__header">
<div id="panelDevTools__title" class="panelDraggable__title">Developer Tools</div>
<div id="panelDevTools__handle" class="panelDraggable__handle"></div>
<div id="panelDevTools__help" class="panelDraggable__help"></div>
</div>
</div>
just use min-height instead of height as you actually what the height to be flexible but at least 50px
#panelDevTools {
position: fixed;
top: 25px;
left: 50px;
width: 260px;
height: 300px;
background-color: yellow;
}
.panelDraggable {
display: flex;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.panelDraggable__header {
order: 0;
background-color: greenyellow;
min-height: 50px;
}
.panelDraggable__info {
order: 1;
background-color: lightseagreen;
min-height: 50px;
}
.panelDraggable__content {
order: 3;
background-color: slategrey;
}
.panelDraggable__footer {
order: 4;
background-color: blueviolet;
min-height: 50px;
}
<div data-ntv-type="PanelDevTools" class="panelDraggable" id="panelDevTools" widgetid="panelDevTools">
<div id="panelDevTools__info" class="panelDraggable__info">Tools for developement</div>
<div id="panelDevTools__content" class="panelDraggable__content">
<div id="cnt-inner" style="height:800px;width:50px;background-color:red;"></div>
</div>
<div id="panelDevTools__footer" class="panelDraggable__footer ">Footer</div>
<div id="panelDevTools__header" class="panelDraggable__header">
<div id="panelDevTools__title" class="panelDraggable__title">Developer Tools</div>
<div id="panelDevTools__handle" class="panelDraggable__handle"></div>
<div id="panelDevTools__help" class="panelDraggable__help"></div>
</div>
</div>
I have an HTML page with header/content/footer that uses flexbox model and contains <details> tag.
I need to make details content use maximum available height, meaning that when in opened state its content should occupy all space in its container (except for summary of course).
Here is my HTML/CSS code (http://jsfiddle.net/rtojycvk/2/):
HTML:
<div class="wrapper">
<div class="header">Header</div>
<div class="main">
Some text before details
<details class="details" open>
<summary>Details summary</summary>
<div class="content">Details content</div>
</details>
</div>
<div class="footer">Footer</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0; padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
}
.header {
height: 50px;
background-color: yellow;
flex: 0 0 auto;
}
.main {
background-color: cyan;
flex: 1;
display: flex;
flex-direction: column;
}
.footer {
height: 50px;
background-color: green;
flex: 0 0 auto;
}
.content {
background-color: blue;
color: white;
flex: 1;
}
.details {
background-color: red;
flex: 1;
display: flex;
flex-direction: column;
}
As you can see, the details tag itself takes all the available space, but not its content.
P.S. I need this to work only in Chrome.
http://jsfiddle.net/rtojycvk/16/
use position absolute on content, position relative on details, and calc() css (to offset the summary height)
.content {
background-color: lightgray;
color: black;
flex: 1;
display:flex;
position:absolute;
height: calc(100% - 18px);
width: 100%;
}
.details {
background-color: gray;
flex: 1;
display: flex;
flex-direction: column;
position:relative;
}
hope this helps! (I changed the colors cause they were a bit bright for me :p)
Absolute positioned .content and details relative.
fiddle
html, body {
height: 100%;
margin: 0; padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
}
.header {
height: 50px;
background-color: yellow;
flex: 0 0 auto;
}
.main {
background-color: cyan;
flex: 1;
display: flex;
flex-direction: column;
}
.footer {
height: 50px;
background-color: green;
flex: 0 0 auto;
}
.content {
background-color: blue;
color: white;
flex: 1;
position: absolute;
top: 3%;
bottom: 0;
height: 97%;
width: 100%;
}
details {
position: relative;
}
summary{
height: 3%;
}
.details {
background-color: red;
flex: 1;
display: flex;
flex-direction: column;
}
For those who prefer not to set absolutes positions, or can't do it, there is another way to accomplish it: using vh for height of .content:
html,
body {
margin: 0;
padding: 0;
height:100vh;
background: orange;
}
.wrapper {
display: flex;
flex-direction: column;
width: 100%;
height:100vh;
background: pink;
}
.header,
.footer {
height: 10vh;
min-height: 25px; /* (or max-height, or both!) */
max-height: 50px;
background-color: yellow;
flex: 0 0 auto;
}
.footer {
background-color: green;
}
.main {
background-color: cyan;
flex: 1;
display: flex;
flex-direction: column;
height: calc(100vh - 20vh); /* 10vh * 2 (.header + .footer sizes) */
}
.content {
background-color: blue;
color: white;
flex: 1;
display: flex;
flex-direction: column;
height: calc(100vh - 20vh); /* 10vh * 2 (.header + .footer sizes) */
}
.details {
background-color: red;
flex: 1;
display: flex;
flex-direction: column;
}
<div class="wrapper">
<header class="header">Header</header>
<main class="main">
Some text before details
<details class="details" open>
<summary>Details summary</summary>
<div class="content">Details content</div>
</details>
</main>
<footer class="footer">Footer</footer>
</div>
Fiddle's here: http://jsfiddle.net/ALXWebDev/wxm0v49c/
Hope it helps!