I have a flexbox with a width of 80vw and content inside of it align-items: center and justify-content: center. All the items in the column have 28px margin on either side. Right now, they are very skinny and only take up a part of the 80vw. Inspecting it shows a large amount of whitespace on either side.
I still want stuff like text centered, but things like a selection box should take up the full width of the container (including margins).
I've read a few things on here, and I've tried setting width: 100% but that not only disregards the centering css (pushes the item all the way to the left) but also disregards margins, and the margins spill over out of the width of the container.
Finally, I tried calc and calculated 80vw - 28px as the width of the inner content, but this did some weird stuff and only used half the margin, and the rest of it spilled out of the container.
.outerContainer {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100vw;
height: 100vh;
background-color: black;
}
.modalContainer {
width: 80vw;
background-color: white;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.content1 {
margin: 20px 28px 10px 28px;
font-size: 27px;
line-height: 21px;
}
.content2 {
margin: 10px 28px 20px 28px;
}
<html>
<body>
<div class="outerContainer">
<div class="modalContainer">
<div class="content1">
Hello, World!
</div>
<div class="content2">
<input type="text" />
</div>
</div>
</div>
</body>
</html>
You can make the content divs 100% width minus margin by using the calc function (comments added to the lines I changed below):
.outerContainer {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100vw;
height: 100vh;
background-color: black;
}
.modalContainer {
width: 80vw;
background-color: white;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.content1 {
margin: 20px 28px 10px 28px;
font-size: 27px;
line-height: 21px;
}
.content2 {
margin: 10px 28px 20px 28px;
width: calc(100% - 56px); /* 100% width minus 28px x 2 */
}
.content2 > input {
width:100%; /* make input stretch full width */
}
<html>
<body>
<div class="outerContainer">
<div class="modalContainer">
<div class="content1">
Hello, World!
</div>
<div class="content2">
<input type="text" />
</div>
</div>
</div>
</body>
</html>
Related
I'm working on project which includes a login/register page. It's basically a white div in body which should be centered verticaly and horizontally, but sometimes can be bigger than body.
When div is small everything is okay, but when its bigger than body then I just want it to have small padding on top and bottom.
How can I achieve that ? I have been searching for answer whole day and finally I'm here. Help me people :C
#wrap {
height: 300px;
width: 150px;
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
}
#content {
background: #000;
width: 100px;
height: 400px;
}
<div id="wrap">
<div id="content">
</div>
</div>
You can use min-height instead of height and a small top and bottom padding on the wrapper as shown below. When the inner element is higher than the wrapper, it will extend the wrapper and additionally keep the padding .
#wrap {
min-height: 300px;
padding: 10px 0;
width: 150px;
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
}
#content {
background: #000;
width: 100px;
height: 400px;
}
<div id="wrap">
<div id="content">
</div>
</div>
Use min-height instead of height, and add padding to top and bottom. Use box-sizing: border-box to prevent the padding from changing the height:
.wrap {
box-sizing: border-box;
min-height: 300px;
width: 150px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
}
.content {
background: #000;
width: 100px;
height: 400px;
}
/** for the demo **/
.content--small {
height: 100px;
}
body {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
<div class="wrap">
<div class="content">
</div>
</div>
<!-- for the demo -->
<div class="wrap">
<div class="content content--small">
</div>
</div>
I set a max width and height for my flex boxes for responsive pages. After it surpasses the max height and width the boxes no longer become positioned in the center of the page even though I have justify-content: center; on my .flex-container. What am I doing wrong here? Anything helps, thanks!
CodePen
.flex-container {
display:flex; justify-content: center;}
.flex-post {
background-color: #f1f1f1;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
flex: 1 0 auto;
height:auto;
max-height:270px;
max-width:270px;}
.flex-post:before {
content:'';
float:left;
padding-top:100%;}
.flex-post:hover {
background-color: rgba(1,1,1,0.5);}
<div>
</div>
<div class="flex-container">
<div class="flex-post">1</div>
<div class="flex-post">2</div>
<div class="flex-post">3</div>
</div>
<div class="flex-container">
<div class="flex-post">4</div>
<div class="flex-post">5</div>
<div class="flex-post">6</div>
</div>
<div class="flex-container">
<div class="flex-post">7</div>
<div class="flex-post">8</div>
<div class="flex-post">9</div>
</div>
You need to center the containers.
Add this to your code:
body {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
height: 100vh;
margin: 0;
}
revised codepen
Note that block elements consume the full width of their parent, by default. This behavior, however, does not extend to height (more details).
.flex-post {
background-color: #f1f1f1;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
flex: 1 0 auto;
height: auto;
max-height: 270px;
max-width: 270px;
display: flex;
align-items: center;
justify-content: center;
}
Does anyone know how to align an <hr> element inside a flex-container. When I do flex-start all of the other elements align, apart from the <hr>. I need a solution that doesn't use position: absolute on the <hr> element because this affects the document flow and causes other issues.
codepen: https://codepen.io/emilychews/pen/QaPQaW
CSS
body {margin: 0; padding: 0;}
.box {
width: 300px;
height: 300px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
hr {
position: relative;
display: block;
background: white;
height: 3px;
width: 75px;
margin-left: 0 auto;
}
HTML
<div class="box">
<h1> Hello </h1>
<hr>
<p> Thanks </p>
</div>
The hr element has a default margin set, and in Chrome it is set to:
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
And as auto margin's in Flexbox override the justify-content/align-* properties, you need to remove it, which e.g. margin: 0; will, and make the in this case align-items: flex-start; be properly applied.
Stack snippet
body {margin: 0; padding: 0;}
.box {
color: white;
width: 300px;
height: 300px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
hr {
position: relative;
background: white;
height: 3px;
width: 75px;
align-self: flex-start;
margin: 0; /* added */
}
<div class="box">
<h1>Hello</h1>
<hr>
<p>Thanks</p>
</div>
Change your hr to
background: white;
height: 3px;
width: 75px;
margin-left: 0;
Take a look at this https://codepen.io/techsin/pen/JWQgoM
//html
<div class="nav"> a \ b \ c</div>
<div class="box"> no text</div>
//css
body {
display: flex;
flex-direction: column;
align-items: center;
align-content: stretch;
}
.box {
max-width: 800px;
padding: 30px;
background-color: gray;
flex-grow:1;
}
.nav {
padding: 30px;
background-color: purple;
text-align: center;
color: #fff;
}
I want box to expand like a block element, but not expand beyond max width, and still be centered.
If I set align-items to stretch on body then box do expands but it gets aligned to left, if set margin auto Or align-items to center, then box stops trying to fill as much as possible width wise.
I simply want box to expand to 800 pixels, but when windows size changes its width also goes down, just like how any regular block element's width would act by default.
Whole reason to use flexbox is to have box also cover remaining height.
Give the box width: 100%;, margin: 0 auto; and box-sizing: border-box;, so the padding gets included in its width
Updated codepen
Stack snippet
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.box {
max-width: 800px;
width: 100%;
padding: 30px;
background-color: gray;
flex-grow:1;
margin: 0 auto;
box-sizing: border-box;
}
.nav {
padding: 30px;
background-color: purple;
text-align: center;
color: #fff;
}
<div class="nav"> a \ b \ c</div>
<div class="box"> no text</div>
I have a simple page layout with a vertical centered content box using flex.
I use min-height: 70vh; to stretch the container height to allow the content-box to vertical center.
I also have a footer which height gap is stretched to the bottom of the page using flex: 1;.
https://jsfiddle.net/Lvod41L2/
Problem
If the content-box has enough content that makes it taller than the page the footer is not pushed to the bottom and scrolls with the page. Example: height: 2000px;
If I remove min-height: 70vh; the footer is pushed to the bottom of the page as it should look.
HTML/CSS
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
.header {
min-height: 40px;
padding: 0.8em 2em;
background: black;
color: white;
}
.flex-container {
display: flex;
align-items: center;
min-height: 70vh;
padding: 2em;
background: gray;
}
.content-box {
width: 300px;
height: 300px;
margin: auto;
padding: 2em;
text-align: center;
background: black;
color: white;
}
.footer {
z-index: 100;
position: relative;
flex: 1;
padding: 2em;
background: black;
color: white;
}
</style>
</head>
<body>
<div class="header">
Header
</div>
<div class="flex-container">
<div class="content-box">
Content Box
</div>
</div>
<div class="footer">
Footer
</div>
</body>
</html>
SOLUTION - JSFIDDLE
Add flex: 0 0 auto; to the container
.flex-container {
display: flex;
align-items: center;
min-height: 70vh;
padding: 2em;
background: gray;
flex: 0 0 auto; /* Added rule */
}
I hope that solves the issue.