I have recently started learning flexbox. I am trying to set margins between the divs inside the .parent container, but the margin is not displaying. Also, if I give a width value to any of the .child divs, they still expand to cover the whole window. Where am I going wrong?
body {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100px;
border: 2px solid black;
justify-content: space-between;
}
.child {
flex: 1;
width: 32%;
margin: auto;
height: 100px;
border: 2px solid blue;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
You need to remove flex: 1;, which is causing the div's to resize to fill the empty space.
body {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100px;
border: 2px solid black;
justify-content: space-between;
}
.child {
width: 32%;
margin: auto;
height: 100px;
border: 2px solid blue;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
"margins" in flexbox are going to be controlled mainly by the width of your containers, not by specifying margins. Use flex-basis to determine the width of your containers and remove the flex: 1. That's what's causing your containers to expand. And remember it's "flex" box. it's meant to fluid, so trying to adapt static values for things like margin defeats the purpose.
Tip: When debugging use background colors and not borders. Borders effect width and can cause you trouble. Cheers.
body {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100px;
justify-content: space-between;
background-color: blue;
}
.child {
flex-basis: 20%;
height: 100px;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
As Hunter Turner says if you remove flex: 1 it will work. This property sets the length of the item relative to the others.
MDN Docs
body {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100px;
border: 2px solid black;
justify-content: space-between;
}
.child {
width: 32%;
margin: auto;
height: 100px;
border: 2px solid blue;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
Related
Tried a lot of ways and a lot of Codes, but its not working website width does not stay in screen. Always enables space to the right side and content is bigger than screen.
tried width and height 100vw; max-width: 100%;
also tried giving the body a specific width
`body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
body {
margin: 0;
overflow-x: hidden;
border: solid;
padding-left: 2px;
}
* {
box-sizing: inherit;
}
.container {
display: grid;
grid-template-columns: 1fr;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
width: 100%;
padding: 0 0px;
}`
<
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Try</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="galery.css">
</head>
<body>
<div class="container">
<div class="logo-wrapper">
<a href="index.html"><img src="/Users/Desktop/Website/images/AdobeStock_491355559.jpeg" style="width: 100%;"></div>
<div class="nav-wrapper">
<div class="nav-link-wrapper">
Home</div>
<div class="nav-link-wrapper">
Stuff</div>
<div class="nav-link-wrapper">
About</div>
<div class="nav-link-wrapper">
contact</div>
</div>
It's my first time using flex-box. I am following a tutorial where this very example works.
I have 3 colo(u)red divs, side by side as is the default for flex-box, apparently.
When I add flex-direction: column; to the container of the divs, they no longer display (for me, although they do in the tutorial video).
I have prepared a Plunker. Just uncomment /*flex-direction: column;*/ to see my problem; here's the full code too.
Any idea what I'm doing wrong?
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<section id="container">
<div id="child_1" class="child"></div>
<div id="child_2" class="child"></div>
<div id="child_3" class="child"></div>
</section>
</body>
</html>
style.css
#container{
display: flex; /* use flex-box */
width: 100%;
/*flex-direction: column;*/
}
.child{
/*width: 200px;*/
height: 200px;
width: 100px;
flex: 1; /* all available width (will be shared) */
}
#child_1{
/*height: 150px;*/
width: 100px;
background-color: red;
flex: 2; /* twice as wide as the others */
}
#child_2{
background-color: yellow;
}
#child_3{
background-color: blueviolet;
}
In your code, the flex: 1; and flex: 2; are messing with your heights. There is a reason for that:
in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority.
Source: MDN - flex-basis
You could get rid of them, change them to flex-grow or change the flex-basis to see the div back.
#container{
display: flex; /* use flex-box */
width: 100%;
flex-direction: column;
}
.child{
/*width: 200px;*/
height: 200px;
width: 100px;
flex-grow: 1; /* all available width (will be shared) */
}
#child_1{
/*height: 150px;*/
width: 100px;
background-color: red;
flex-grow: 2; /* twice as wide as the others */
}
#child_2{
background-color: yellow;
}
#child_3{
background-color: blueviolet;
}
<h1>Hello Plunker!</h1>
<section id="container">
<div id="child_1" class="child"></div>
<div id="child_2" class="child"></div>
<div id="child_3" class="child"></div>
</section>
I'm trying to add a width constraint on a flex container, and an horizontal overflow.
Children have margins, but I don't know why, last margin stays out of the container ; I can see it with Chrome debug, but the container simply ignore it...
Is there a way to force the flex container to take this margin in account ?
I tried to play with flex-wrap, box-sizing, even with padding the result is the same...
Thanks !
Here is a simple demo that you can run ; if you scroll to the end, there isn't any space left on the right.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<style type="text/css">
.container {
width: 300px;
border: 1px #000 solid;
display: flex;
overflow: auto;
scroll-snap-type: x mandatory;
}
.child {
min-width: 200px;
width: 200px;
border: 1px #f00 solid;
margin: 20px;
scroll-snap-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="child"><p>blablabla</p><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
</div>
</body>
</html>
I found that it works with an intermediate container, between .container and .child, with a display: flex property.
At least it works, but I don't know why I have to do this :/
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<style type="text/css">
.container {
width: 300px;
border: 1px #000 solid;
display: flex;
overflow: auto;
scroll-snap-type: x mandatory;
}
.intermediate {
display: flex;
}
.child {
min-width: 200px;
width: 200px;
border: 1px #f00 solid;
margin: 20px;
scroll-snap-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="intermediate">
<div class="child"><p>blablabla</p><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
</div>
</div>
</body>
</html>
It is the overflow that is ignoring the margin because it applies only to content. So the inner container is the solution like you did.
Working example with inline-flex (i removed scroll-snap since it is not necessary here):
.container {
width: 300px;
border: 1px #000 solid;
overflow: scroll;
}
.inner {
display: inline-flex;
}
.child {
min-width: 200px;
width: 200px;
border: 1px #f00 solid;
margin: 20px;
}
<div class="container">
<div class="inner">
<div class="child"><p>blablabla</p><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
</div>
</div>
You can handle this by adding :after to the .container
.container {
width: 300px;
border: 1px #000 solid;
display: flex;
overflow: auto;
scroll-snap-type: x mandatory;
}
.container::after {
content: '';
width: 20px;
flex-shrink: 0
}
.child {
min-width: 200px;
width: 200px;
border: 1px #f00 solid;
margin: 20px;
scroll-snap-align: center;
}
<!doctype html>
<html lang="fr">
<body>
<div class="container">
<div class="child"><p>blablabla</p><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
<div class="child"><p>blablabla</p></div>
</div>
</body>
</html>
I have a issue with css grid , i build a container with two div in it with css grid and i want to adjust container to page center. I use this code :
html{
width: 100vw;
height : 100vh;
}
body{
height : 100%;
}
.container-fluid{
width:100%;
height : 100%;
display:grid;
grid-template-columns: 300px;
grid-template-rows: 200px auto;
justify-content: center;
align-content: center;
border:1px solid red;
}
.logo-container{
background-color: khaki;
}
.form-container{
height :540px;
background-color: lightblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/media-query.css">
<title>Login & Register User With Profile</title>
</head>
<body>
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
<link rel="stylesheet" href="assets/css/all.css">
</body>
</html>
as you see when grid container height bigger then page height a issue occurs (please see code result).
when use height for body tag , grid height overflowing and when delete height from body tag every thing is ok but in this situ container can't adjust container in center of page.
what is problem?
Simplify your code like below:
body {
margin: 0; /* remove default margin */
}
.container-fluid {
min-height: 100vh; /* at least screen height */
display: grid;
grid-template-columns: 300px;
grid-template-rows: 200px auto;
justify-content: center;
align-content: center;
border: 1px solid red;
box-sizing:border-box; /* to consider the border inside the height */
}
.logo-container {
background-color: khaki;
}
.form-container {
height: 540px;
background-color: lightblue;
}
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
Or like below:
body {
margin: 0;
}
.container-fluid {
height: 100vh; /* full height */
display: grid;
grid-template-columns: 300px;
/* first row at 200px max-height and second row at 540px max-height */
grid-template-rows: minmax(auto,200px) minmax(auto,540px);
justify-content: center;
align-content: center;
border: 1px solid red;
box-sizing:border-box;
}
.logo-container {
background-color: khaki;
}
.form-container {
background-color: lightblue;
}
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A+Tec</title>
<style type="text/css" >
* {
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
height: auto;
background-color: #ABEBC1;
position: fixed;
}
#nav {
width: 720px;
height: auto;
margin: auto;
}
.buttons {
height: 25x;
width: 150px;
background-color: #ABEBFF;
background-repeat: repeat-x;
float: left;
margin: 0px 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<div class="buttons">
</div>
<div class="buttons">2</div>
<div class="buttons">3</div>
<div class="buttons">4</div>
<div class="buttons">5</div>
<div class="buttons">6</div>
</div>
</div>
</body>
</html>
I have the wrapper with the divs inside. There is clearly enough space for all the divs yet one of them overflows to next line as in picture:
I have no idea what is wrong but the div with 6 in it has overflowed onto the next line but the wrapper is plenty big enough to accomodate it. Can you please help me?
Thanks