How can I make my flexbox with column direction children be same width.
JSFiddle Example:
https://jsfiddle.net/6ynofan5/
<div class="block">
<div class="title">Some dummy text here, huh</div>
<div class="info">
<div class="text">1</div>
<div class="text">2</div>
<div class="text">3</div>
</div>
</div>
.block {
display: flex;
flex-direction: column;
align-items: center;
}
.block .title {
font-size: 30px;
}
.block .info {
display: flex;
justify-content: space-between;
}
Div with class .info should be the same width as .title, there should not be fixed width.
The equalising of widths is managed by align-items where the default is stretch. In this instance you have over-ridden this and so a wrapper is needed.
Then the two inner divs can be their natural 100% width.
.block {
display: flex;
flex-direction: column;
border: 1px solid grey;
justify-content: center;
align-items: center;
}
.title {
font-size: 30px;
background: lightblue;
}
.info {
display: flex;
justify-content: space-between;
background: plum;
}
<div class="block">
<div class="wrap">
<div class="title">Some dummy text here, huh</div>
<div class="info">
<div class="text">1</div>
<div class="text">2</div>
<div class="text">3</div>
</div>
</div>
</div>
.block {
display: table;
flex-direction: column;
align-items: center;
}
https://jsfiddle.net/1mz9f8p0/1/
Related
I am dealing with a flex-box issue. It seems that a flex item with flex basis is shrunk accordingly but the parent maintains its size as if the child still occupied its full size.
These two images are the exact same code except the .earnings-claim-wrapper in the second one does not have the flex property. The last image shows how chrome "represents" that empty space.
Expected behaviour:
I've reduced the code to this:
div{
padding:10px;
}
.earnings-container {
display: flex;
background-color: red;
}
.earnings-info-container {
background-color: orange;
}
.earnings-info {
display: flex;
flex-wrap: wrap;
justify-content: left;
align-items: flex-start;
background-color: green;
}
.earnings-info .earnings-claim {
align-self: flex-start;
background-color: yellow;
}
.earnings-claim-wrapper {
flex: 0 1 100px;
position: relative;
display: flex;
display: flex;
flex-direction: column;
background-color: purple;
}
<div class="earnings-container">
<div class="earnings-info-container">
<div class="earnings-info">
<div class="earnings-icon student-points"></div>
<div class="earnings-title">earnings-title</div>
<div class="earnings-claim-wrapper">
<div class="earnings-claim not-enough-effort">earnings-claim</div>
<span class="effort-message">Some long text text text text text text long text</span>
</div>
</div>
</div>
<div class="earnings-info-container">
<div class="earnings-info">
<div class="earnings-icon diamonds"></div>
<div class="earnings-title">earnings-title</div>
</div>
</div>
</div>
Instead of using flex: 0 1 100px; on earnings-claim-wrapper class, use width:100px;
div{
padding:10px;
}
.earnings-container {
display: flex;
background-color: red;
}
.earnings-info-container {
background-color: orange;
}
.earnings-info {
display: flex;
flex-wrap: wrap;
justify-content: left;
align-items: flex-start;
background-color: green;
}
.earnings-info .earnings-claim {
align-self: flex-start;
background-color: yellow;
}
.earnings-claim-wrapper {
width:100px;
position: relative;
display: flex;
display: flex;
flex-direction: column;
background-color: purple;
}
<div class="earnings-container">
<div class="earnings-info-container">
<div class="earnings-info">
<div class="earnings-icon student-points"></div>
<div class="earnings-title">earnings-title</div>
<div class="earnings-claim-wrapper">
<div class="earnings-claim not-enough-effort">earnings-claim</div>
<span class="effort-message">Some long text text text text text text long text</span>
</div>
</div>
</div>
<div class="earnings-info-container">
<div class="earnings-info">
<div class="earnings-icon diamonds"></div>
<div class="earnings-title">earnings-title</div>
</div>
</div>
</div>
I've got to be honest that I can't fully reproduce what happens in your code that makes .earning-info expand. But I did find out it has to do with setting a flex-basis on the .earnings-claim-wrapper elements.
Giving all it's parents a flex-basis as well did the trick here.
Also, I think you can remove some properties, I've commented them out in the snippet.
div{
padding:10px;
}
.earnings-container {
display: flex;
background-color: red;
}
.earnings-info-container {
flex: 0 1 1%;
background-color: orange;
display: flex;
align-items: flex-start;
}
.earnings-info {
flex: 0 1 1%;
display: flex;
/*flex-wrap: wrap;*/
/*justify-content: left;*/
/*align-items: flex-start;*/
background-color: green;
}
.earnings-info .earnings-claim {
/*align-self: flex-start;*/
background-color: yellow;
}
.earnings-claim-wrapper {
flex: 0 1 100px;
/*position: relative;
display: flex;*/
display: flex;
flex-direction: column;
background-color: purple;
}
<div class="earnings-container">
<div class="earnings-info-container">
<div class="earnings-info">
<div class="earnings-icon student-points">x</div>
<div class="earnings-title">earnings-title</div>
<div class="earnings-claim-wrapper">
<div class="earnings-claim not-enough-effort">earnings-claim</div>
<span class="effort-message">Some long text text text text text text long text</span>
</div>
</div>
</div>
<div class="earnings-info-container">
<div class="earnings-info">
<div class="earnings-icon diamonds">x</div>
<div class="earnings-title">earnings-title</div>
</div>
</div>
</div>
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>
I have code below for multiple flex boxes. How would I center them vertically in the page when the page is being expanded? I tried using justify-content: center; in my flex-container but it does work when I'm using flex: 1 0 auto; to make the boxes responsive. Anything helps, thanks.
.flex-container {
display:flex;}
.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;
align-items: center;
justify-content: center;
display:flex;}
.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>
Try this out:
.full-width {
width: 100%;
}
.full-height {
height: 100%;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.flex-center {
justify-content: center;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
Now with those classes, you can do things like this:
Horizontally center:
<div class="flex flex-row flex-center">foo</div>
Vertically center:
<div class="flex flex-column flex-center full-height">foo</div>
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 ceated a flexbox grid and tried to make each item the same hight which is not working. Basically all those blue containers shall have the same height.
HTML:
<div class="outer">
<div class="item">
<h1>Contact</h1>
</div>
<div class="item">
<h3>Mail:</h3>
<a>john#doe.com</a>
<br>
<a>PGP</a>
</div>
<div class="item">
<h3>Telegram:</h3>
<a>www.t.me/doe</a>
</div>
</div>
CSS:
.outer {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: 100vh;
width: 100vw;
}
.item {
background-color: aqua;
flex: 1;
}
Photo:
I would add another element that is the only flex child of .outer, centered vertically, with the background applied to it, then make that element the flex parent that holds your 3 sections and aligns them.
.outer, .inner {
display: flex;
align-items: center;
}
.outer {
height: 100vh;
width: 100vw;
}
.inner {
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex: 1 0 0;
background-color: aqua;
}
.item {
flex: 1;
}
<div class="outer">
<div class="inner">
<div class="item">
<h1>Contact</h1>
</div>
<div class="item">
<h3>Mail:</h3>
<a>john#doe.com</a>
<br>
<a>PGP</a>
</div>
<div class="item">
<h3>Telegram:</h3>
<a>www.t.me/doe</a>
</div>
</div>
</div>