I want to create a box which has on left and right side a blue "div" and in the middle a larger purple "div". My Problem is that when i write "align-items : center" all "div" vanishes but i dont know why. Can you help me?
This is my HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Playground</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Let's Play With Flexbox</h1>
<section id="anotherExample">
<div class="sidebar"></div>
<div class="mainContent"></div>
<div class="sidebar"></div>
</section>
</body>
</html>
This is my CSS Code
#anotherExample{
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003049;
display: flex;
justify-content: center;
/*align-items: center;*/
}
section .sidebar{
background-color: blue;
flex-grow:1 ;
flex-basis: 200px;
}
section .mainContent{
background-color: blueviolet;
flex-grow:2 ;
flex-basis: 200px;
}
It looks like when you apply align-items: center, the height of div elements are set to 0. You can try to add the height property to divs to see them again as #anotherExample is parent of those div elements.
#anotherExample{
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003049;
display: flex;
justify-content: center;
align-items: center;
}
section .sidebar{
height: 100%;
background-color: blue;
flex-grow:1;
flex-basis: 200px;
}
section .mainContent{
height: 100%;
background-color: blueviolet;
flex-grow:2 ;
flex-basis: 200px;
}
<h1>Let's Play With Flexbox</h1>
<section id="anotherExample">
<div class="sidebar"></div>
<div class="mainContent"></div>
<div class="sidebar"></div>
</section>
All div vanish because they have no height when align-items: center.
For flex items, the default align-items behave as stretch. The three div are stretched to their container height.
When you set align-items: center, the three div are centered on the cross-axis, but they are not visible due to no height (since they do not have content or a set height).
If you give them a height such as height: 100%, you can see the three div again.
More about align-items
Example:
#anotherExample {
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003049;
display: flex;
justify-content: center;
/* 👇 With this turn on the div will no height will vanish */
align-items: center;
}
section .sidebar {
background-color: blue;
flex-grow: 1;
flex-basis: 200px;
/* 👇 Give div a height to see it when align-items is center */
height: 100%;
}
section .mainContent {
background-color: blueviolet;
flex-grow: 2;
flex-basis: 200px;
/* 👇 Give div a height to see it when align-items is center */
height: 100%;
}
<h1>Let's Play With Flexbox</h1>
<section id="anotherExample">
<div class="sidebar"></div>
<div class="mainContent"></div>
<div class="sidebar"></div>
</section>
Related
Basically, it is a simple Joke Generator app that gets some text from an API and then puts it in a div container on which I have applied flexbox to center the text, a button, an image, and a title which are inside of it.
However, the container itself is stuck to the top of the page and I am not able to figure out how to center it vertically to the middle of the page since the height of the container depends on the size of the text that it receives from the API.
The issue I am facing:
When I tried to apply display flex to the body and use align-items it is not centering the container vertically based on the viewport's height.
Browser Screenshot
CSS[.scss]:
$primary-color: rgb(33, 41, 53);
$secondary-color: rgb(254, 213, 180);
$tertiary-color: rgb(214, 27, 64);
$hover-color: rgb(65, 76, 93);
$gradient-bg: linear-gradient(to bottom, $primary-color, $tertiary-color);
html {
min-height: 100%; //for the gradient to stretch properly
}
body {
background: $gradient-bg;
box-sizing: border-box;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
min-height: 20rem;
min-width: 5rem;
background-color: $secondary-color;
border-radius: 1.5rem;
margin: 0 5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1rem 0;
overflow: hidden;
}
HTML:
<body>
<div class="container">
<img alt="" id="ultra-laugh" />
<div class="heading"><h1>Joke Generator</h1></div>
<div class="joke" id="joke"></div>
<button id="joke-button" class="btn">Get another Joke</button>
</div>
</body>
Any help is greatly appreciated!
In your css code change height value from 100% to 100vh, and that will center verticaly.
html {
min-height: 100%;
}
body {
background: blue;
box-sizing: border-box;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
min-height: 20rem;
min-width: 5rem;
background-color: lightblue;
border-radius: 1.5rem;
margin: 0 5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1rem 0;
overflow: hidden;
}
<!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="index.css"/>
<title>Document</title>
</head>
<body>
<div class="container">
<img alt="" id="ultra-laugh" />
<div class="heading"><h1>Joke Generator</h1></div>
<div class="joke" id="joke"></div>
<button id="joke-button" class="btn">Get another Joke</button>
</div>
</body>
</html>
You were so close to having this!
If you are trying to vertically and horizontally center something, set the width and height as you did, and then set the margin-top and margin-left to half of what your width and height are.
Replace your margin on your container class with this:
margin-top: 10rem;
margin-left: 2.5rem;
Hopefully this helps! :)
How can I make the shrink element "shrink" when the flex container below grows as a result of flex-wrapping. What is happening now is that new space created below the container instead of shrinking the one above. For some reason flex-grow and flex-shrink are not working expectedly whenever wrap happens. I want everything to fit within the viewport so that the user does not need to scroll.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.main-container {
display: flex;
width: 100vw;
height: 100vh;
flex-direction: column;
}
.main-container>* {
text-align: center;
}
.shrink {
background-color: #c0caad;
padding-top: 30%;
height: 80vh;
width: 100vw;
flex-shrink: 0;
}
.grow {
height: 20vh;
width: 30vw;
background-color: #9da9a0;
display: flex;
flex-wrap: wrap;
flex-grow: 1;
}
.grow>* {
border: 5px solid #654c4f;
height: 100%;
background-color: #b26e63;
width: 50%;
}
<!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" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-container">
<div class="shrink">Shrink</div>
<div class="grow">
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
</div>
</div>
</body>
</html>
There are a few concerns in your CSS. See the working snippet below.
1. flex-shrink: 0; prevents it from shrinking.
For flex-children to be flexibly growing and shrinking, you'd probably want flex: 1; or some other shrink/grow values than 0.
2. explicit height of 80vh and 20vh make them of static height.
That is, they will remain of those specific height rather than flexibly changing their relational heights as you indicated in your drawing. You'd want to remove those values.
3. padding-top: 30% pushes the content down, forcing the height
I wonder if you included it just to push the placeholder text down. But in any case, it's one of the factors that stops the shrink from shrinking.
4. width: 50% + border: 5px - border-box > 50% of available space
Again, this might be just a placeholder style. But in any case, unless you set it to box-sizing: border-box; the width will become 50% + 5px and will unexpectedly wrap.
Below are cleaned up suggestion, based on your drawing in the question.
html, body {
padding: 0;
margin: 0;
}
.main-container {
display: flex;
border: 1px solid red;
width: 100vw;
height: 100vh;
flex-direction: column;
}
.main-container>* {
text-align: center;
}
.shrink {
background-color: #c0caad;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex: 3;
}
.grow {
background-color: #9da9a0;
display: flex;
flex-wrap: wrap;
flex: 1;
align-items: flex-start;
}
.grow>* {
box-sizing: border-box;
border: 5px solid #654c4f;
height: 50px;
background-color: #b26e63;
flex-basis: 50%;
}
<div class="main-container">
<div class="shrink">Shrink</div>
<div class="grow">
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
</div>
</div>
I want to make 3 column layout with flex box. The goal is to make first and last div widths dynamic. But the 2nd div max-width is static.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body{
min-height: 100% !important;
height: 100%;
}
body{
margin: 0;
background-color: #ddd;
display: flex;
justify-content: space-between;
}
.left , .center, .right{
height: 100%;
}
.left{
width: auto;
background-color: antiquewhite;
}
.center{
display: flex;
min-height: 100vh;
flex-direction: column;
width: 100%;
max-width: 1200px;
background-color: green;
}
.right{
width: auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</body>
</html>
Now I am getting the center max width is constant that I expected. But left & right div's not appear always. I want to make right & left div appear with dynamic width that based on browser window size.
Update - current layout:
Expected layout:
How can I make it work?
Here you go.
Just apply flex:1 to all of the divs but flex: 1 0 100%; to the center div so it defaults to as wide as it can before hitting the max-width you wanted.
html,
body {
min-height: 100% !important;
height: 100%;
}
body {
margin: 0;
background-color: #ddd;
display: flex;
}
.left,
.center,
.right {
flex: 1;
height: 100%;
}
.left {
width: auto;
background-color: red
}
.center {
display: flex;
min-height: 100vh;
flex-direction: column;
flex: 1 0 100%;
width: 100%;
max-width: 1200px;
background-color: green;
}
.right {
width: auto;
background-color: blue;
}
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
does this help?
.flex-container {
display: flex;
justify-content: space-between;
background-color: DodgerBlue;
}
.flex-container > .side {
background-color: green;
width: 100%;
}
.flex-container > .center {
background-color: #f1f1f1;
color: green;
max-width: : 100%;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div class="side"></div>
<div class="center">
this will expand as your content grows
</div>
<div class="side"></div>
</div>
</body>
</html>
This question already has an answer here:
flex-grow not working in column layout
(1 answer)
Closed 4 years ago.
I'm trying to have space between each .box element, however space-between is not acting to create spaces between the boxes. The boxes appear with no space in between them.
* {
box-sizing: border-box;
}
.grid {
border: black dashed 1px;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: center;
}
.grid * {
border: 1px red solid;
}
.box {
height: 100px;
width: 100px;
background-color: blue;
}
<div class="grid">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
See codesandbox: https://codesandbox.io/s/8j7k4xjzl
The code is actually working. The problem is the ".grid" div is taking the minimum height required according to it's content.
If you give ".grid" div height equal to 100vh you can see the result.
height: 100vh;
Here's a fiddle showing the result:
https://jsfiddle.net/ayushgupta15/w30h5kep/
Please tell if this is the solution you're looking for.
Space-between is used for horizontal "box spacing". What you're looking for is margin.
.box {
height: 100px;
width: 100px;
background-color: blue;
margin: 5px;
}
like so.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
* {
box-sizing: border-box;
}
.grid {
border: black dashed 1px;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: center;
}
.grid * {
}
.box {
height: 100px;
width: 100px;
background-color: blue;
margin: 5px;
}
</style>
<div class="grid">
<div class="box">1
</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
You can edit the top, right, left, bottom margin if you want to do so:
margin: (top) (right) (bottom) (left);
I would like to create a container div wrapping another div that scrolls and has an equal margin around all sides. The issue is the margin setting is not being reflected on the right side and the .inner div only scrolls to the end of the width setting.
I have read other posts and found it may be related to the way the width is being set but am unable to get the css quite right for my case.
<!DOCTYPE html>
<html>
<style>
body {
display: flex;
align-items: center;
justify-content: space-around;
}
.outer {
height: 600px;
overflow: scroll;
border: 1px solid red;
}
.inner {
min-width: 2500px;
min-height: 2500px;
margin: 12.5px;
background-color: green;
}
</style>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>
</html>
I've tried to use padding in .outer and also various width settings including calc(x% - ypx)
I would like to be able to set the width of the container .outer so that it is not 100% of the page.
Any help is much appreciated!
I have just added overflow:inherit in inner div css.
<!DOCTYPE html>
<html>
<style>
body {
display: flex;
align-items: center;
justify-content: space-around;
}
.outer {
height: 600px;
overflow: scroll;
border: 1px solid red;
}
.inner {
min-width: 2500px;
min-height: 2500px;
margin: 12.5px;
background-color: green;
overflow:inherit;
}
</style>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>
</html>
The inner element has a min-width greater than the available horizontal space provided by the container. I've removed this attribute. Please review the snippet below.
body {
display: flex;
align-items: center;
justify-content: space-around;
}
.outer {
height: 600px;
overflow: scroll;
border: 1px solid red;
width: 85%;
}
.inner {
min-height: 2500px;
margin: 12.5px;
background-color: green;
}
<div class='outer'>
<div class='inner'></div>
</div>
UPDATE
As pointed out by the OP, if a fixed width is used for the inner element, than as you scroll to the right, no right margin is displayed. I did a bit of a trick and faked a right-margin by setting a right-border on the inner element, as follows:
.outer {
height: 400px;
overflow: scroll;
border: 1px solid red;
width: 85%;
}
.inner {
min-width: 800px;
min-height: 360px;
margin: 12px;
background-color: green;
border-right: 12px solid white;
}
<div class='outer'>
<div class='inner'></div>
</div>
Setting .inner to display:inline-block achieves the desired behaviour.
<!DOCTYPE html>
<html>
<style>
body {
display: flex;
align-items: center;
justify-content: space-around;
}
.outer {
height: 600px;
overflow: scroll;
border: 1px solid red;
}
.inner {
display: inline-block;
min-width: 2500px;
min-height: 2500px;
margin: 12.5px;
background-color: green;
}
</style>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>
</html>