Trying to have all flex boxes inside my flex containers scale equally.
If you try and reduce the viewport, the center flexbox will start to resize, but the outer ones do not. So you end up with a situation where you have a tiny image in the center with massive images on the sides.
I've only just started learning CSS, so I'm not entirely sure what I am doing so I appreciate any help.
Here are a few extra images that help illustrate the issue:
Before reducing viewport:
After:
So ideally I want the images on the outside to scale down alongside the image in the center.
.flexbox-container {
display: flex;
justify-content: center;
background-color: #808080;
}
.flexbox-inner {
width: 1280px;
height: 720px;
margin: 0px 32px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer {
width: 192px;
height: 1148px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer-inner {
width: 160px;
height: 558px;
margin: auto;
border: 3px solid #ffffff;
}
.flexbox-outer-inner-bottom {
margin-top: 26px;
}
<div class="flexbox-container">
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
<div class="flexbox-inner"></div>
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
</div>
Here is an example of how you could use relative length units, in this case percentages:
* {
box-sizing: border-box;
}
.flexbox-container {
display: flex;
justify-content: center;
background-color: #808080;
}
.flexbox-inner {
width: 60%;
height: 720px;
margin: 0px 32px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer {
width: 20%;
height: 1148px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer-inner {
width: 90%;
height: 558px;
margin: auto;
border: 3px solid #ffffff;
}
.flexbox-outer-inner-bottom {
margin-top: 26px;
}
<div class="flexbox-container">
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
<div class="flexbox-inner"></div>
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
</div>
Related
I've searched and tried a lot of solutions but none of them is working for my case.
I have this set up where neither body nor main should change. Inside them I can add as many divs as I want and change any style.
<div class="body">
<div class="main">
<div class="should-be-full-height">
Content
</div>
</div>
</div>
.body {
display: flex;
flex-direction: column;
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: block;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
}
https://jsfiddle.net/eqwu3yfh/
I added background colors and borders just to see better what's going on.
I need the div with the .should-be-full-height class to use 100% of the height of its parent (.main). How can I achieve that?
Thanks. Sorry if this has been asked, I couldn't find an answer.
You either remove flex-direction: column from body and you can use height:100%
.body {
display: flex;
/* flex-direction: column;*/
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: block;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
height: 100%;
}
<div class="body">
<div class="main">
<div class="should-be-full-height">
Hi
</div>
</div>
</div>
Or you change the display of main to be flex and use width: 100%
.body {
display: flex;
flex-direction: column;
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: flex;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
width: 100%;
}
<div class="body">
<div class="main">
<div class="should-be-full-height">
Hi
</div>
</div>
</div>
I know you said you cannot change body and main but I don't see any other solution.
I have two rectangles with a background effect. On their own, the hover function works well and translates the top div up and to the right, however I soon as I put this code into a flex container, the hover does not work anymore. Anybody know why? Heres the code without the flex container:
body {
padding: 100px;
margin: 0;
}
.box {
width: 200px;
height: 200px;
background-color: black;
border: solid 2px black;
border-radius: 15px;
z-index: -1;
display: inline-block;
}
.box2 {
position: relative;
width: 200px;
height: 200px;
left: 2px;
bottom: 5px;
background-color: white;
border: solid 2px black;
border-radius: 15px;
}
.box2:hover {
bottom: 8px;
left: 4px;
}
<body>
<div class="box">
<div class="box2">
</div>
</div>
<div class="box">
<div class="box2">
</div>
</div>
</body>
Add display: flex; to the body afterwards and the code wont work anymore.
Here is my try, I delete the z-index.
body {
padding: 100px;
margin: 0;
display: flex;
}
.box {
width: 200px;
height: 200px;
background-color: black;
border: solid 2px black;
border-radius: 15px;
display: inline-block;
}
.box2 {
position: relative;
width: 200px;
height: 200px;
left: 2px;
bottom: 5px;
background-color: white;
border: solid 2px black;
border-radius: 15px;
}
.box2:hover {
left: 8px;
bottom: 4px;
}
<body>
<div class="box">
<div class="box2">
</div>
</div>
</body>
I'm having trouble with creating a nested divs like in the attached image.
Image
I would love if some one can show me how.
.demo-container {
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
text-align: left;
display: inline-block;
vertical-align: top;
}
.header {
display: block;
padding: 15px 25px 0;
overflow: hidden;
}
<div id="warp">
<div class="header">
New Alerts
</div>
<div class="demo-container">
</div>
</div>
You need to set height and width to your parent #wrap , see full snippet below:
snippet
* {
box-sizing: border-box
}
#wrap {
height: 200px;
width: 200px;
text-align: center;
}
.header {
display: block;
padding: 15px 25px;
background: blue;
color: white;
}
.demo-container {
width: 100%;
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
display: inline-block;
vertical-align: middle;
color:black;
}
<div id="wrap">
<div class="header">
New Alerts
</div>
<div class="demo-container">
X Alerts
</div>
</div>
Here's what I tried: http://jsfiddle.net/tJxCD/6/
I want to create a layout like this:
But I don't know how to make the third rectangle on bottom of the second.
http://jsfiddle.net/kHT8z/1/
.wrapper {
overflow: hidden;
width: 500px
}
.top {
border: 3px solid #000;
width: 300px;
height: 170px;
margin: 5px;
float: left;
}
.right {
border: 3px solid #000;
width: 150px;
height: 75px;
margin: 5px;
float: left;
}
.bottom_small {
border: 3px solid #000;
float: left;
margin: 5px;
height: 50px;
width: 90px;
}
.bottom_big {
border: 3px solid #000;
float: left;
margin: 5px;
height: 75px;
width: 150px;
}
<div class="wrapper">
<div class="top"></div>
<div class="right"></div>
<div class="right"></div>
</div>
<div class="bottom_big"></div>
<div class="bottom_small"></div>
Hard to tell exactly what your after but your divs can share several css properties and you can use classes to specify size only. This JSFiddle represents your diagram.
Of course this layout is dependent on the width of the containing element, in this case the body, so you need to be aware of that.
HTML layout:
<html><body>
<div class="large"></div>
<div class="medium"></div>
<div class="medium"></div>
<div class="medium"></div>
<div class="small"></div>
</body></html>
CSS:
div {
border: 1px solid gray;
margin: 5px 5px 0 0;
float: left;
}
div.large{
width: 300px;
height: 175px;
}
div.medium {
width: 150px;
height: 84px;
}
div.small{
width: 100px;
height: 44px;
}
http://www.jsfiddle.net/Zn4BH/1/
HTML:
<div id="divOutput">
<h1>Output</h1>
<div id="divButtons">
<button>One</button>
<button>Two</button>
</div>
<textarea name="tarOutput" id="tarOutput">[Text]</textarea>
</div>
CSS:
#divOutput {
border: 2px solid #000;
background-color: #f90;
padding: 10px;
height: 300px
}
#divButtons {
border: 2px solid #000;
background-color: #fb0;
margin-top: 10px;
padding: 2px;
}
textarea {
margin-top: 10px;
width: 100%;
height: 100%; /* ??? Doesn't seem to work */
}
Take a look at this post: CSS 100% height with padding/margin