why when giving a display: flex and a justify-content: center, the child items don't all appear in the parent div?
I have 15 child divs
HTML
<div class="container">
<div class="dv">1</div>
<div class="dv">2</div>
<div class="dv">3</div>
<div class="dv">4</div>
<div class="dv">5</div>
<div class="dv">6</div>
<div class="dv">7</div>
<div class="dv">8</div>
<div class="dv">9</div>
<div class="dv">10</div>
<div class="dv">11</div>
<div class="dv">12</div>
<div class="dv">13</div>
<div class="dv">14</div>
<div class="dv">15</div>
</div>
when giving a justify-content: center the divs at the beginning of the list disappear
css
.container{
display: flex;
align-items: center;
justify-content: center;
height: 90%;
overflow: auto;
white-space: pre-line;
border: 10px solid rgb(70, 70, 199);
width: 500px;
height: 500px;
background-color: blue;
}
.dv{
margin: 19px;
padding: 10px;
height: 90%;
background-color: white;
border: solid 1px black;
border-radius: 10px;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
color: black;
width: 500px;
height: 400px;
}
Apparently the total width of the child dvs should not exceed that of the containing parent, and in order to handle such cases we use the flex-wrap property
Related
First of all, here is a codepen with the issue I am trying to solve.
This is a simplified version of the problem I have on an actual project. My goal is to keep the grid in the same format with 5 columns and to be able to increase the width of these cells so the content is always visible, but also so that it doesn't wrap before the first row of 5 columns is displayed. Whenever I try to increase the width of the cells the grid wraps and I lose the structure I want.
So, basically, increase width of items, but prevent wrapping, is it possible? It is fine if the content overflows the flex container itself, the goal is to add overflow-x to this grid.
.flex-container {
border: 1px solid silver;
display: flex;
width: 50%;
}
.wrap {
flex-wrap: wrap;
}
.wrap div {
background: gold;
}
.flex-item {
width: 160px;
border-bottom: 1px solid black;
border-right: 1px solid black;
line-height: 100px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container wrap">
<div class="flex-item">11111111111111</div>
<div class="flex-item">22222222222222</div>
<div class="flex-item">33333333333333</div>
<div class="flex-item">44444444444444</div>
<div class="flex-item">55555555555555</div>
<div class="flex-item">66666666666666</div>
<div class="flex-item">77777777777777</div>
<div class="flex-item">88888888888888</div>
<div class="flex-item">99999999999999</div>
<div class="flex-item">00000000000000</div>
</div>
From the comments, it does look like grid is the option you need, it won't allow content to be wrapping and justify content will stick it on the side if shorter thant the width of the container.
here is the snippet with grid:
/* flex turned into grid */
.flex-container {
border: 1px solid silver;
display: grid;
grid-template-columns:repeat(5,auto);
justify-content:start;
overflow:auto;
width: 80%;
}
.wrap {
}
.wrap div {
background: gold;
}
.flex-item {
border-bottom: 1px solid black;
border-right: 1px solid black;
line-height: 100px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container wrap">
<div class="flex-item">11111111111111</div>
<div class="flex-item">22222222222222</div>
<div class="flex-item">33333333333333</div>
<div class="flex-item">44444444444444</div>
<div class="flex-item">55555555555555</div>
<div class="flex-item">66666666666666</div>
<div class="flex-item">77777777777777</div>
<div class="flex-item">88888888888888</div>
<div class="flex-item">99999999999999</div>
<div class="flex-item">00000000000000</div>
</div>
I think, if it is allowable, that css grid may be a better candidate for the layout you are proposing...
.grid-container {
border: 1px solid silver;
display: grid;
width: 50%;
grid-template-columns: 20% 20% 20% 20% 20%; /* hard set five columns and no more */
}
.grid-container div {
background: gold;
}
.grid-item {
/* width: 160px; */
border-bottom: 1px solid black;
border-right: 1px solid black;
line-height: 100px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
overflow-x: hidden; /* overflow-x to hide overflow as discussed in question */
}
<div class="grid-container">
<div class="grid-item">11111111111111</div>
<div class="grid-item">22222222222222</div>
<div class="grid-item">33333333333333</div>
<div class="grid-item">44444444444444</div>
<div class="grid-item">55555555555555</div>
<div class="grid-item">66666666666666</div>
<div class="grid-item">77777777777777</div>
<div class="grid-item">88888888888888</div>
<div class="grid-item">99999999999999</div>
<div class="grid-item">00000000000000</div>
</div>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color:red;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
word-wrap: break-word;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div>11111111111111</div>
<div>22222222222222</div>
<div>33333333333333</div>
<div>44444444444444</div>
<div>55555555555555</div>
<div>66666666666666</div>
<div>77777777777777</div>
<div>88888888888888</div>
<div>99999999999999</div>
<div>00000000000000</div>
</div>
</body>
I have nner and outer div.
normally the parent div wrap the child div but in my case child div have the same width than the parent.
I'm expecting that inner-container width is the same as input and not outer-container
Here an example to well understand
.outer-container{
width: 60%;
margin: auto;
background-color: white;
box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1);
text-align: center;
margin-top: 40px;
min-height: 200px;
}
.innercontainer {
background-color: #f3f3f3;
}
<div class ="outer-container">
<div class=" innercontainer">
<div>
Last name: <input type="text" name="lname"><br>
</div>
</div>
</div>
Try assigning display:inline-block to your innercontainer element. Try this code.
.innercontainer {
background-color: #f3f3f3;
display: inline-block;
}
You can use display:inline-block; like that :
.outer-container {
width: 60%;
margin: auto;
background-color: white;
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
margin-top: 40px;
min-height: 200px;
}
.innercontainer {
background-color: #f3f3f3;
display:inline-block;
}
<div class="outer-container">
<div class=" innercontainer">
<div>
Last name: <input type="text" name="lname"><br>
</div>
</div>
</div>
You just need to add this to .innercontainer:
display: inline-block;
https://codepen.io/amitozdeol/pen/LrbvBo
I have a flex container with individual child containers within it. Within those child containers, I have a simple content div and a title div. What I am trying to do is centre the title text vertically, but keep it at the top of the box. Then, I am trying to centre the content div in the box, both horizontally and vertically.
I have sort of figured it out (but knowing me this code is a load of drivel), but now when the viewport size decreases, the content text (with overflow: hidden) does not hide when the size decreases. I have figured out that this is down to the margin being set to 0, but I need it to be set to 0 in order for the bloody content div to center!
Any and all help offered is much appreciated. Here is a link to the jsfiddle that I created in order to help you visualise the problem. Change the size of the viewport and you'll see my issue, namely on the "Total cash amongst players" box.
http://jsfiddle.net/mpqbassm/
body {
background: #000;
}
.flex-container {
display: flex;
justify-content: space-around;
margin-right: 10px;
margin-bottom: 10px;
}
.flex-info {
color: white;
font-family: 'Arial', sans-serif;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 2px;
width: 20%;
height: 100px;
display: flex;
flex-direction: column;
}
.flex-info.green {
background: #79B0B4;
}
.flex-info.blue {
background: #7993B4;
}
.flex-info.foam {
background: #79B47D;
}
.flex-info.pink {
background: #9B79B4;
}
.flex-info.red {
background: #B4797F;
}
.flex-info .flex-title {
font-size: 16px;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.flex-info .flex-content {
font-size: 40px;
margin: auto;
overflow: hidden;
}
<div class="flex-container">
<div class="flex-info green">
<div class="flex-title">Number of characters created</div>
<div class="flex-content">46,401</div>
</div>
<div class="flex-info blue">
<div class="flex-title">Number of vehicles purchased</div>
<div class="flex-content">499,012</div>
</div>
<div class="flex-info foam">
<div class="flex-title">Total cash amongst players</div>
<div class="flex-content">$192,012,299</div>
</div>
<div class="flex-info red">
<div class="flex-title">Total bans issued</div>
<div class="flex-content">12</div>
</div>
To stop the content from overflowing, overflow: hidden must be on the parent container of the element.
In this case, that would be any div with the class .flex-info.
Take a look at this in practice below.
body {
background: #000;
}
.flex-container {
display: flex;
justify-content: space-around;
margin-right: 10px;
margin-bottom: 10px;
}
.flex-info {
color: white;
font-family: 'Arial', sans-serif;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 2px;
width: 20%;
height: 100px;
display: flex;
flex-direction: column;
overflow:hidden;
}
.flex-info.green {
background: #79B0B4;
}
.flex-info.blue {
background: #7993B4;
}
.flex-info.foam {
background: #79B47D;
}
.flex-info.pink {
background: #9B79B4;
}
.flex-info.red {
background: #B4797F;
}
.flex-info .flex-title {
font-size: 16px;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.flex-info .flex-content {
font-size: 40px;
margin: auto;
overflow: hidden;
}
<div class="flex-container">
<div class="flex-info green">
<div class="flex-title">Number of characters created</div>
<div class="flex-content">46,401</div>
</div>
<div class="flex-info blue">
<div class="flex-title">Number of vehicles purchased</div>
<div class="flex-content">499,012</div>
</div>
<div class="flex-info foam">
<div class="flex-title">Total cash amongst players</div>
<div class="flex-content">$192,012,299</div>
</div>
<div class="flex-info red">
<div class="flex-title">Total bans issued</div>
<div class="flex-content">12</div>
</div>
</div>
If a user is signed up to my site, in their login area I have 3 divs as follows:
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
These divs all have a width of 32% and sit inline with each other.
#psts-cancel-link {
background: white;
border-left: 3px solid #ccc;
padding: 1em;
width: 32%;
min-height: 270px;
float: left;
}
.psts-receipt-link {
background: white;
border-left: 3px solid #ccc;
min-height: 270px;
float: left;
width: 32%;
margin: 0 10px;
padding: 20px;
}
#psts-signup-another {
background: white;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
width: 32%;
min-height: 270px;
float: left;
}
When a user is not signed up, only one of the divs displays:
<div id="psts-signup-another"></div>
Is it possible to change the styling of this so that it's width is 100% when div1 and div2 aren't displayed?
So far I have tried this, but with no success:
#psts-cancel-link ~ .psts-receipt-link ~ #psts_existing_info #psts-signup-another {
width:100%;
}
Table Layout Implementation
Use a table layout. Specify display: table on the parent and display: table-cell on the child elements.
#psts-cancel-link {
background: tomato;
border-left: 3px solid #ccc;
padding: 1em;
min-height: 270px;
display: table-cell;
word-wrap: break-word;
}
.psts-receipt-link {
background: lightblue;
border-left: 3px solid #ccc;
min-height: 270px;
margin: 0 10px;
padding: 20px;
display: table-cell;
word-wrap: break-word;
}
#psts-signup-another {
background: tomato;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
min-height: 270px;
display: table-cell;
word-wrap: break-word;
}
.container {
display: table;
width: 100%;
table-layout: fixed;
}
Logged in
<div class="container">
<div id="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">
<div id="psts-signup-another"></div>
</div>
Flexbox Layout Implementation
You can also use flexbox which expands and shrinks the child items according to the parent container.
#psts-cancel-link {
background: tomato;
border-left: 3px solid #ccc;
padding: 1em;
min-height: 270px;
flex: 1;
}
.psts-receipt-link {
background: lightblue;
border-left: 3px solid #ccc;
min-height: 270px;
margin: 0 10px;
padding: 20px;
flex: 1;
}
#psts-signup-another {
background: tomato;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
min-height: 270px;
flex: 1;
}
.container {
display: flex;
}
Logged in
<div class="container">
<div id="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">
<div id="psts-signup-another"></div>
</div>
You could simply use :first-child if it's indeed the only child in the second case.
#psts-signup-another:first-child {}
You can use the adjacent selector. Have a look at the following snippet:
#psts-signup-another {padding: 5px; background: #f99;}
div + div + #psts-signup-another {padding: 5px; background: #99f;}
<h2>Div when three divs are present</h2>
<div class="theDivs">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
<h2>Div when three divs are not present</h2>
<div class="theDivs">
<div id="psts-signup-another"></div>
</div>
i think you should use another container div with a new class when user logout.
Logged:
<div class="container">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logout:
<div class="container logout">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
CSS:
.container.logout > div {
display:none;
}
.container.logout > .psts-signup-another {
display:block;
}
I tried using the flexbox method, table method, and some other methods for vertically centering a div of unknown height, but my div is not getting centered correctly. I want the width of the centered div to be 50% of the window width or have a min-width of 200px.
.content {
background-color: violet;
min-width: 200px;
width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 1);
}
.outer-container {
display: table;
width: 100%;
background-color: violet;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<body>
<div class="outer-container">
<div class="container">
<div class="content">
<div class="title-class">
Hello there
</div>
</div>
</div>
</div>
</body>
Using a flexbox, here's all the code you need:
HTML
<div class="container">
<div class="content">
<div class="title-class">Hello there</div>
</div>
</div>
CSS
html, body { height: 100%; }
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: violet;
height: 100%;
}
.content {
background-color: violet;
width: 50%;
text-align: center;
box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 1);
}
DEMO
As an alternative, here's the table method:
How to Center Elements Vertically, Horizontally or Both