I need to reproduce this div:
It simply has a circle (an emoji for semplicity) on the top, and two texts on the bottom.
I try this but it doesn't work as I expect
.container {
width: 70px;
height: 400px;
background-color: lightgray;
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: center;
}
.circle {
}
.bottom-container {
display: flex;
flex-direction: column;
}
.artist {
border: 1px solid red;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.number {
border: 1px solid lime;
}
<div class="container">
<div class="circle">🔴</div>
<div class="bottom-container">
<div class="artist">Artist - Never forget my love</div>
<div class="number">03</div>
</div>
</div>
What's the problem?
You almost had it. Added flex-direction: column and switch your align content and justify content on your container div.
.container {
width: 70px;
height: 400px;
background-color: lightgray;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: center;
justify-content: space-between;
}
.circle {
}
.bottom-container {
display: flex;
flex-direction: column;
}
.artist {
border: 1px solid red;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.number {
border: 1px solid lime;
}
<div class="container">
<div class="circle">🔴</div>
<div class="bottom-container">
<div class="artist">Artist - Never forget my love</div>
<div class="number">03</div>
</div>
</div>
The circle div should take full space. Adding width and text-align to the circle class did the job:
.circle {
width: 100%;
text-align: center;
}
Related
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'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
}
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>
I have created a hover effect on a flexible content box that changes the width of an inner box to reveal text inside. I need this box to be flexible in height so that more content can be added, however, I don't want the height to change as I hover.
I've linked below what I've got so far, the box on the left shows my desired effect with a static height and box on the right shows what happens when I add more text which causes the issue of the height changing as I hover by wrapping the text inside it.
https://jsfiddle.net/ndpty6xa/
.flex {
display: flex;
justify-content: center;
}
.box {
width: 50%;
background-color: red;
border: 2px solid black;
min-width: 200px;
flex-direction: column;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
width: 0%;
height: 90%;
transition: all .5s;
}
.text {
position: relative;
text-align: center;
overflow: hidden;
}
.box:hover>.content {
width: 90%;
}
#media(max-width: 450px) {
.flex {
flex-wrap: wrap;
}
.box {
flex-grow: 1;
}
}
<div class=flex>
<div class=box>
<div class=content>
<div class=text>
<h3>This</h3>
<p>Works</p>
</div>
</div>
</div>
<div class=box>
<div class=content>
<div class=text>
<h3>This doesnt</h3>
<p>TestTe stTestTestTest TestTestTestT estTestT estTes tTestTe stTestTestTest</p>
</div>
</div>
</div>
</div>
I don't think I'm very good at explaining this but hopefully, someone gets the idea.
You can think differently and instead of animating width you animate an overlay above it to simulate the same effect:
.flex {
display: flex;
justify-content: center;
}
.box {
width: 50%;
background-color: red;
border: 2px solid black;
min-width: 200px;
flex-direction: column;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.content {
position: relative;
display: flex;
flex-direction:column;
justify-content: center;
align-items: center;
text-align: center;
background-color: white;
width: 90%;
height: 90%;
}
.content:before {
content:"";
position:absolute;
top:0;
left:50%;
right:0;
bottom:0;
background:red;
z-index:1;
transition: all .5s;
}
.content:after {
content:"";
position:absolute;
top:0;
right:50%;
left:0;
bottom:0;
background:red;
z-index:1;
transition: all .5s;
}
.box:hover>.content:before {
left: 100%;
}
.box:hover>.content:after {
right: 100%;
}
#media(max-width: 450px) {
.flex {
flex-wrap: wrap;
}
.box {
flex-grow: 1;
}
}
<div class="flex">
<div class="box">
<div class="content">
<h3>This</h3>
<p>Works</p>
</div>
</div>
<div class="box">
<div class="content">
<h3>This also works!</h3>
<p>TestTe stTestTestTest TestTestTestT estTestT estTes tTestTe stTestTestTest</p>
</div>
</div>
</div>
Simply add min-height like min-width to box
.box{
width: 50%;
background-color: red;
border: 2px solid black;
min-width: 200px;
flex-direction: column;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
min-height: 250px;
}
This question already has answers here:
White space under image [duplicate]
(5 answers)
Remove white space from image
(3 answers)
Closed 5 years ago.
So I have two divs in a full width container that I want to give variable sizing with flexbox, but no matter what I do, there is an annoying offset at the bottom. Using margins I can come close to fixing the problem, but it's never perfect.
If you run the code snippet below and scroll to the bottom you can see it, the image and the black content container are not aligned at the bottom.
What's going on?
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
margin-bottom:7px;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg"/>
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</container>
There is some space below the image since the image is an inline-element and as such there is some space reserved below the (invisble) baseline that the image is aligned to vertically. To avoid that, there are two possible solutions:
1.) Apply display: block; to the image (see first snippet)
or
2.) Apply font-size: 0 to the image container (see second snippet)
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
}
img {
display: block;
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" />
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</div>
SECOND SOLUTION:
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
font-size: 0;
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" />
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</div>
#container {
width: 100%;
display: inline-flex;
flex-direction: row;
}
#image-wrapper {
flex-grow: 3;
max-width: 1000px;
position: relative;
/*background-color: black;*/
}
#menu {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
background-color: #101010;
color: #fefefe;
align-items: stretch;
display: flex;
margin-bottom:4px;
}
#form {
width: 100px;
}
#image {
width: 100%;
}
<div id="container">
<div id="image-wrapper">
<img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg"/>
</div>
<div id="menu">
<div id="form">
CONTENT<br>CONTENT<br>
</div>
</div>
</container>
Looks like the margin is just a bit off