I'm trying to create a layout for this website using flexbox but the justify-content property doesn't seem to be working. Ultimately, I want it to look like this:
I have the grid laid out correctly but can't get space between elements at this point. This is what I've got right now:
How do I align my content correctly? Here is my codepen: https://codepen.io/caseycling/pen/poNXRXZ
.service-container {
display: flex;
justify-content: center;
}
.img {
margin: .5rem;
border: 1px solid grey;
min-width: 100px;
}
.container>div {
border: 1px solid grey;
min-height: 100px;
min-width: 100px;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around; //Not working
}
.service {
flex: 40%;
margin: .5rem;
}
<div class='service-container'>
<div class='img'>IMG</div>
<div class='container'>
<div class='service'>Service</div>
<div class='service'>Service</div>
<div class='service'>Service</div>
<div class='service'>Service</div>
</div>
</div>
I think it's because you attach space-around in wrong place. Now you have it on container which is only the left rectangle. This property will affect everything inside but not outside. You should add this prop to the highest wrapper which in this case is service-container
.service-container {
display: flex;
justify-content: space-around; // working here
}
Your primary flex container has justify-content: center applied.
You don't want to center the items, it seems. You want them separated like in your image.
So use justify-content: space-between.
But if you still want the layout centered, set a width to the container and use the margin property.
.service-container {
display: flex;
justify-content: space-between;
width: 800px;
margin: 0 auto;
}
.img {
margin: .5rem;
border: 1px solid grey;
min-width: 100px;
}
.container>div {
border: 1px solid grey;
min-height: 100px;
min-width: 100px;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around; //Not working
}
.service {
flex: 40%;
margin: .5rem;
}
<div class='service-container'>
<div class='img'>IMG</div>
<div class='container'>
<div class='service'>Service</div>
<div class='service'>Service</div>
<div class='service'>Service</div>
<div class='service'>Service</div>
</div>
</div>
Add margin-right to .img
.img {
margin: .5rem;
border: 1px solid grey;
min-width: 100px;
margin-right: 100px; // Increase space between image and servies
}
Related
So basically I am trying to make all my div boxes one size but a unique color. I currently have just done it in CSS below. However I know this isn't efficient, calling out each box with a specific class and changing the color. Is there a better way in CSS?
<div class='containera'>
<div class='box1a'>#c37857</div>
<div class='box2a'>#eeedbe</div>
<div class='box3a'>#99b27f</div>
</div>
.containera{
display: flex;
height: 250px;
width: 800px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-shrink: 1;
background-color: #734444;
border-radius: 35px;
}
.box1a,.box2a,.box3a{
height: 100px;
width: 200px;
margin: -50px 5px 5px 5px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.box1a{
background-color: #c37857;
}
.box2a{
background-color: #eeedbe;
}
.box3a{
background-color: #99b27f;
}
Create a new class then add that class name onto the element you want.
.containera{
display: flex;
height: 250px;
width: 800px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-shrink: 1;
background-color: #734444;
border-radius: 35px;
}
.box-size{
height: 100px;
width: 200px;
margin: -50px 5px 5px 5px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.box1a{
background-color: #c37857;
}
.box2a{
background-color: #eeedbe;
}
.box3a{
background-color: #99b27f;
}
<div class='containera'>
<div class='box-size box1a'>#c37857</div>
<div class='box-size box2a'>#eeedbe</div>
<div class='box-size box3a'>#99b27f</div>
</div>
You can give div a comprehensive style using * and set separate classes for each box with your favorite colors
you can write inline css... you should use !important to make sure that inline css overwrites class
<div class='containera'>
<div class='box-size box1a' style="background-color:red !important;">#c37857</div>
<div class='box-size box2a'>#eeedbe</div>
<div class='box-size box3a'>#99b27f</div>
</div>
I am using this to center things in CSS:
.testclass {
display: flex;
justify-content: center;
}
but when i want to scale elements using width and height, it doesn't work and my elements are not centered.
Like this:
.testclass {
display: flex;
justify-content: center;
width: 200px;
height: 200px;
}
What's the problem?
This looks like the expected behavior.
Remember that in this case justify-content: center; centers what is inside the container - not the container itself.
EDIT:
I added margin: 0 auto; to center the container.
#container1 {
display: flex;
justify-content: center;
border: 1px solid red;
}
#container1 > div {
border: 1px solid blue;
background: yellow;
}
#container2 {
display: flex;
justify-content: center;
border: 1px solid red;
width: 200px;
height: 200px;
margin: 0 auto;
}
#container2 > div {
border: 1px solid blue;
background: yellow;
}
<div id="container1">
<div>test 1</div>
</div>
<div id="container2">
<div>test 2</div>
</div>
display: flex; and justify-content: center;
works for parent elements. That is, child elements of that particular parent will be centered, not the parent.
To center .testclassHTML
<div class="parent">
<div class="testclass"></div>
</div>
CSS
.parent {
background-color: red;
display: flex;
justify-content: center;
}
.testclass {
background-color: green;
width: 200px;
height: 200px;
}
If you want full center (horizontal vertical) you can use this code:
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="testclass">Content</div>
</div>
I cannot understand WHY I am not getting this:
.container {
width: 600px;
height: 400px;
border: 3px solid green;
}
.cg-panel {
display: flex;
flex-flow: column;
align-items: stretch;
justify-content: center;
}
.cg-panel .content {
flex: 1;
background-color: tomato;
}
<div class="container">
<div class="cg-panel">
<div class="content"></div>
</div>
</div>
I, for the life of me, cannot understand why the content panel does not vertically stretch the entire container. What is the purpose of "flex:1" if it isn't going to work? Am I not reading the documentation correctly?
There's nothing in your CSS that is expanding the height of .cg-panel to fit its parent .container.
Adding height: 100%; to .cg-panel fixes this:
.container {
width: 600px;
height: 400px;
border: 3px solid green;
}
.cg-panel {
display: flex;
flex-flow: column;
align-items: stretch;
justify-content: center;
height: 100%; /* add this */
}
.cg-panel .content {
flex: 1;
background-color: tomato;
}
<div class="container">
<div class="cg-panel">
<div class="content"></div>
</div>
</div>
HTML:
<div id="content">
<div class="card">
<span class="card-title">Album</span>
<div class="card-content">
<img class="album-thumbnail" src="a.jpg">
<img class="album-thumbnail" src="b.jpg">
<img class="album-thumbnail" src="c.jpg">
<img class="album-thumbnail" src="d.jpg">
</div>
</div>
</div>
CSS:
.card {
background-color: white;
margin: 0 2em 2em 0;
display: inline-flex;
flex-direction: column;
padding: 1.5em;
border: 1px solid black;
}
.card-content {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: flex-start;
max-height: 300px;
}
.album-thumbnail {
width: 150px;
margin: 1px;
}
In the browser I can see two columns of images, but the width of card-content ends where the first column ends. What causes this and how can I solve it?
This is how it looks currently:
Cause you have a duplicate for display in this code section:
.card {
background-color: white;
margin: 0 2em 2em 0;
display: flex;
flex-direction: column;
padding: 1.5em;
border: 1px solid black;
display: inline-block;
}
Remove this line display: inline-block; and it should work just fine. Here's a replica jsfiddle of the problem with the applied solution
Here's a screenshot with your element inspected:
Another thing you should remove if you don't want space around the columns is align-items: center; inside the class .card-content.
Open the updated fiddle to see the changes.
I have a flex item that is also a flex container .sub-con, problem is the flex item of .sub-con is refusing to wrap, even after adding : flex-flow: row wrap.
Can anyone fix this for me, or point out what I'm doing wrong.
.container {
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
height: 100vh;
}
.sub-con {
margin-right: 50px;
margin-left: 50px;
height: 500px;
background-color: #fff;
display: flex;
justify-content: center;
flex-flow: row wrap;
}
.col-one {
height: 100px;
border: 1px solid lightgreen;
flex-grow: 2;
}
.col-two {
height: 100px;
border: 1px solid red;
flex-grow: 1;
}
<div class="container">
<div class="sub-con">
<div class="col-one"></div>
<div class="col-two"></div>
</div>
</div>
Your flex items in the nested container are sized with percentages.
.col-one{
width: 40%;
height: 100px;
border: 1px solid lightgreen;
}
.col-two{
width: 40%;
height: 100px;
border: 1px solid red;
}
Because percentage lengths are based on the length of the parent they have no reason to wrap. They will always be 40% of the parent, even if the parent has a width of 1%.
If you use other units for length, such as px or em, they will wrap.
jsFiddle demo
.container {
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
height: 100vh;
}
.sub-con {
flex: 1; /* for demo only */
align-content: flex-start; /* for demo only */
margin-right: 50px;
margin-left: 50px;
height: 500px;
background-color: #fff;
display: flex;
justify-content: center;
flex-flow: row wrap;
}
.col-one {
width: 200px;
height: 100px;
border: 1px solid lightgreen;
}
.col-two {
width: 200px;
height: 100px;
border: 1px solid red;
}
<div class="container">
<div class="sub-con">
<div class="col-one"></div>
<div class="col-two"></div>
</div>
</div>