I want to center a div with flex boxes, but don't want it to collapse.
#forum {
display: flex;
flex-direction: column;
align-items: center;
}
.forum__layout__container {
display: flex;
flex-direction: column;
max-width: 960px;
margin-top: 30px;
}
here the HTML ...
<div id="forum">
<div class="forum__layout__container">
...
</div>
</div>
The problem: forum__layout__container collapses. I want it to fill the screen.
Thanks.
EDIT:
Thanks for your attempts, but my problem is my max-width ... It makes my container collapse, which I don't desire !
To use the whole screen for a column, you need to specify the height. When then using justify-content, the flexbox will automatically spread the content.
#forum {
display: flex;
flex-direction: column;
align-items: center;
}
.forum__layout__container {
display: flex;
flex-direction: column;
max-width: 960px;
margin-top: 30px;
height: 100vh;
justify-content: space-around;
}
p {
margin: 0;
}
<div id="forum">
<div class="forum__layout__container">
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
</div>
Related
I've tried using text-align and justify-content but both of them refuse to work. I think I've made a mistake with all the spacings.
Here's the HTML:
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
}
.contents1 {
display: flex;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1>This website is awesome</h1>
<p>This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
Put the justify-contents and align-items into class image
.container1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.image{
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
}
It is a good practice to first add some background-color to better see where each element is and then remove these dumb colors.
For the container which has a display:flex, please add
width:100%;
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 75%;
margin: auto;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 75%
height: 200px;
margin: auto;
}
.contents1 {
display: flex;
flex-direction: column;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1 class="center">This website is awesome</h1>
<p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
Assuming you want to center the container1 div with the image placeholder div, the issue is that your divs don't have an assigned with. Set their width to a percentage less than the parent and then use the CSS property margin: auto. You will also need to apply flex-direction: column to your parent div, contents1
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 400px;
margin: auto;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
margin: auto;
}
.contents1 {
display: flex;
flex-direction: column;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1 class="center">This website is awesome</h1>
<p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 1 year ago.
I'm trying to create this style of gallery layout with flexbox, but running into some trouble.
So far my code is putting two small ones and the large one in the top row, and then the second small ones on the bottom row.
Something like this.
.container {
display: flex;
justify-content: space-between;
flex-direction: row;
}
.item {
width: 100%;
margin: 1em;
}
.content {
border: 1px solid black;
margin-bottom: 1em;
height: 100%;
}
<div class="container">
<div class="item">
<div class="content">half</div>
<div class="content">half</div>
</div>
<div class="item content">full</div>
<div class="item">
<div class="content">half</div>
<div class="content">half</div>
</div>
</div>
Html
<div class"parent">
<div class="leftContent"></div>
<div class="centerContent"></div>
<div class="rightContent"></div>
</div>
Css
.parent{
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
}
.leftContent{
display: flex;
justify-content: space-between;
height: 100%;
flex-direction: column;
align-items: stretch;
}
.rightContent{
display: flex;
justify-content: space-between;
height: 100%;
flex-direction: column;
align-items: stretch;
}
add now the contents in the divs. i think this should work
I am fiddling with this simple layout for a while now.
The goal is to utilize flexbox to center 2 images that resize when the screen gets to small because the images themself are rather large.
Desktop:
Mobile:
Also the body itself stays above the Footer element, but the content in the body overlaps the footer, do someone knows how to fix this maybe?
The HTML looks like this:
<div class="row">
<div class="imagecontainer">
<img class="prijsimage" src="../../assets/images/example1.png">
<img class="prijsimage" src="../../assets/images/example2.png">
</div>
</div>
The CSS looks like this:
.imagecontainer{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
I also tried this code:
<div class="row">
<div class="imagecontainer">
<img class="prijsimage" src="../../assets/images/prijslijst_noback.png">
</div>
<div class="imagecontainer">
<img class="prijsimage" src="../../assets/images/pijslijst_noback_wax.png">
</div>
</div>
.imagecontainer{
flex: 50%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 5%;
}
.prijsimage{
max-height: 100%;
vertical-align: bottom;
}
.row{
display: flex;
flex-direction: row;
}
#media (max-width: 480px) {
.row {
flex-direction: row;
}
.imagecontainer {
height: auto;
width: 100%;
}
.prijsimage {
width: 100%;
max-height: 75vh;
min-width: 0;
}
}
I really hopes that brings clarity of my issue. Can someone help me out on this one?
You need to set the flex-direction: column; to the container in your media query. I cleaned up your code and made it as vanilla as possible so you can copy and paste into your project.
.block {
width: 100%
}
.container {
display: flex;
flex-wrap: wrap;
}
.container>div {
padding: 1em;
flex: 0 50%;
box-sizing: border-box;
border: red solid;
}
/* Changed the max-width for testing purposes */
#media (max-width: 600px) {
.container {
flex-direction: column;
}
}
<div class="container">
<div class="block">content 1</div>
<div class="block">content 2</div>
<div class="block">content 3</div>
<div class="block">content 4</div>
</div>
I am trying to create a scrollable file tree. Minimal code can be found below.
https://jsfiddle.net/3kLmchot/1/
Problem is when I try to add overflow-y: scroll;, to the filebrowse-outer div, the first few items are not visible at all. This problem gets worse when I add more divs.
It seems like items are added about the center of the filebrowse-outer div, so the items that are added at the bottom can be found via scrolling, but the items that are added at the top are invisible. (see the visual aid below)
item 1
item 2
center of the div
item 3
item 4
Scroll bar forms at around item 2, which makes item 1 invisible. Does anyone know why this is happening, and potential solutions?
I got it to work with the following styles, specifically removing justify-content: center; from your .flex-container that is being used by multiple divs and only applying it to the one that is for .flex-container.filebrowse-inner
.side-bar {
position: fixed;
width: 20%;
height: 200px;
display: flex;
flex-direction: column;
}
.flex-container {
display: flex;
/* justify-content: center; <-- THIS LINE IS CAUSING THE ISSUE */
align-items: center;
}
.flex-container.filebrowse-outer {
flex-direction: column;
border: 1px solid #f00;
overflow-y: scroll;
align-items: stretch;
}
.flex-container.filebrowse-inner {
flex-direction: row;
justify-content: center;
width: 100%;
padding-bottom: 15px;
text-align: left;
position: relative;
}
/* .display-container {
width: 70%;
overflow: auto;
} */
I think that you meant to have scroll bar in the external div with class 'side-bar', if yes:
.side-bar {
position: fixed;
width: 20%;
height: 200px;
display: flex;
flex-direction: column;
overflow-y:scroll;
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.flex-container.filebrowse-outer {
flex-direction: column;
border: solid;
min-height: max-content; /* For safari*/
/* overflow-y: scroll; */
align-items: stretch;
}
.flex-container.filebrowse-inner {
flex-direction: row;
width: 100%;
min-height: max-content; /* For safari*/
padding-bottom: 15px;
text-align: left;
position: relative;
}
.display-container {
width: 70%;
overflow: auto;
}
<div class="side-bar">
<div class="flex-container filebrowse-outer">
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 1!</p>
</div>
</div>
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 2!</p>
</div>
</div>
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 3!</p>
</div>
</div>
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 4!</p>
</div>
</div>
</div>
</div>
You can then move the border to 'side-bar' class.
I am trying to build a slider which is aligned horizontally and vertically.
I am using display: flex; in this code:
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
<div id="slider">
the content
</div>
I want the div to be in the center of the screen but without giving the body a certain height this doesn't seem to work for me. Do I have to use height: 100vh; or is there a much better solution?
You need to set height: 100% on html also.
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
<div id="slider">
the content
</div>
Don't make body flex. Use a container instead:
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
/*or use height:100vh;*/
}
<div class="container">
<div id="slider">
the content
</div>
</div>