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;
}
Related
I have this image and this box I'm trying to put on the same line. The box is just going to be holding a header and some text, but I can't seem to get them on the same line. I'm using flexbox and I did some research into this, but can't quite work it out. Here's the code:
#container {
min-height: 95vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
height: 400px;
width: 600px;
background-color: #f5f2ed;
text-align: justify;
padding: 20px;
}
img {
width: auto;
height: 400px;
border-radius: 16px;
}
<div id="container">
<div class="main">
<img src="/">
<div class="box">
<h2>hello</h2>
<p>paragraph here...</p>
</div>
</div>
</div>
I made two divs inside the container because the image is going to be outside the box with the text.
Maybe display: flex; in .main{} can fix the problem.
You should add display:flex property to main element and flex :1 property to both child elements of main element
#container {
min-height: 95vh;
}
.main {
display : flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
height: 400px;
width: 50%;
flex : 1;
background-color: #f5f2ed;
text-align: justify;
padding: 20px;
}
img {
width: auto;
height: 400px;
flex : 1;
border-radius: 16px;
}
<div id="container">
<div class="main">
<div class="pic-div">
<img src="/">
</div>
<div class="box">
<h2>hello</h2>
<p>paragraph here...</p>
</div>
</div>
</div>
Something like this:
justify-content: center; gets me close, but this centers all the items in the flex container. I'd like to keep the items left-justified while centering the wrapped rows underneath those.
If you have fixed/known widths for the container itself, or for the flex items, you could simulate this. You just need to contain the flex-container in another element and then left-align it in some way. Then you can center justify the flex items.
Codepen here
ul {
width: auto;
max-width: 600px;
margin: 0 auto 0 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
li {
width: calc((100% / 3) - 20px);
height: 80px;
background: #333;
margin: 10px;
}
Try margin: 0 auto; in the child element
.wrap {
display: flex;
flex-wrap: wrap;
width: 120px; /* screen width */
}
.block {
width: 50px;
height: 50px;
background: red;
margin: 0 auto;
}
<div class="wrap">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
Since you haven't provided any code, this is one of the solutions, but in this case you need to store top and bottom rows in separate divs:
.item{
min-width:45%;
min-height: 80px;
margin-right: 10px;
background-color: black;
}
.top-row,.bottom-row{
display: flex;
justify-content: space-between;
width: 30%;
margin-bottom: 1em;
}
.bottom-row{
justify-content: center;
}
<div class="top-row">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="bottom-row">
<div class="item"></div>
</div>
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>
I am using flexbox to center content with justify-content: center which works as intended but flexbox also moves divs to be side by side which I don't want.
Here is an example
.flex {
display: flex;
justify-content: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>
How can I use flexbox while retaining the default one div on top of the other positioning.
You can set flex-direction: column and then you have to use align-items: center. Default flex-direction is row.
.flex {
display: flex;
align-items: center;
flex-direction: column;
}
.content {
width: 100px;
height 100px;
color: #000;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
<div class="flex">
<div class="content"></div>
<div class="content"></div>
</div>
Try following code,
.flex {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>
i managed to have vertically aligned column content with flexbox.
However, I need to have headers for the columns as well.
How can i have headers, in which the text is centered to the width of the column and which are at the top of the columns (the content must remain centered vertically)
see my codepen try:
http://codepen.io/anon/pen/QNmrNx
.tothetop{
position: absolute;
top:0;
text-align:center;
background: yellow;
}
put the headers on top, but the width does not match the column width so I can't center the text
If I understand you correctly, you want header text to be center horizontally in respect to columns. This may help you -
header {
display: flex;
justify-content: center;
width: 500px;
margin: auto;
}
.myView {
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-around;
height: 500px;
width: 500px;
}
.wpType {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
}
.wpType:nth-child(even){
background: blue;
}
.wpType:nth-child(odd){
background: red;
}
.wp{
flex: 0 1 auto;
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
background: white;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<header>header</header>
<div class="myView">
<div class="wpType">
<div class="wp"></div>
</div>
<div class="wpType">
<div class="wp"></div>
<div class="wp"></div>
<div class="wp"></div>
</div>
<div class="wpType">
<div class="wp"></div>
<div class="wp"></div>
<div class="wp"></div>
</div>
<div class="wpType"><div class="wp"></div>
<div class="wp"></div></div>
<div class="wpType"><div class="wp"></div></div>
</div>