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>
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>
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 3 years ago.
I am trying to create a Bootstrap-like grid of cards using CSS flex properties. I have 10 cards (4 each row). However, when using justify-content: space-around (this is what I need), the last row is not aligning with the others (naturally). What is the workaround?
.card-gallery {
width: 100%;
height: auto;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
flex-direction: row;
}
.card-box {
width: 270px;
height: 400px;
background: red;
}
<div class="container">
<div class="card-gallery">
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
</div>
</div>
You could try CSS :last-child as in the example below to use different style in your last div.
.flexbox {
display: flex;
flex-flow: column;
}
.flex-child {
background: red;
align-content: center;
align-self: center;
}
.flex-child:last-child {
align-content: space-around;
align-self: flex-start;
}
<div class="flexbox">
<div class="flex-child">
one
</div>
<div class="flex-child">
two
</div>
<div class="flex-child">
three
</div>
</div>
By the way space-between and applying relative width to your card div works better.
.card-gallery {
width: calc(100% -2rem);
height: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
padding: 1rem;
}
.card-box {
width: 45%;
height: 40px;
background: #ff0;
align-self: center;
}
div.card-box:last-child {
align-self: flex-start;
}
<div class="container">
<div class="card-gallery">
<div class="card-box">1</div>
<div class="card-box">2</div>
<div class="card-box">3</div>
<div class="card-box">4</div>
<div class="card-box">5</div>
<div class="card-box">6</div>
<div class="card-box">7</div>
</div>
</div>
You can't achieve this easily with flexbox.
Instead, set .card-gallery to display:grid to make sure the cards always line up in a grid formation when multiple rows exist. Then give it this style rule:
grid-template-columns: repeat(auto-fill, 120px)
The auto-fill keyword will make sure the items will wrap when the viewport shrinks:
.container{max-width:479px;background:lightblue}
.card-gallery {
width: 100%;
height: auto;
display: grid;
grid-template-columns: repeat(auto-fill, 120px);
justify-content: space-around;
}
.card-box {
height: 100px;
background: #fff;
margin-bottom:30px;
border:solid 2px dodgerblue
}
<div class="container">
<div class="card-gallery">
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
</div>
</div>
So, I want to align items inside flex-box like in the above picture.
I have html as follows:
<div class="flex-row">
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
</div>
css as
.flex-row {
min-height: 400px;
display: flex;
align-items: flex-start;
}
.flex-item:nth-child(2) {
align-items: center;
}
.flex-item:last-child {
align-items: flex-end;
}
Use align-self not align-items
.flex-row {
min-height: 300px;
display: flex;
width: 90%;
margin: 1em auto;
border: 1px solid red;
justify-content: space-between;
}
.flex-item {
height: 50px;
background: lightblue;
width: 100px;
}
.flex-item:nth-child(2) {
align-self: center;
}
.flex-item:last-child {
align-self: flex-end;
}
<div class="container flex-row">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
Like so?
You need flex-wrap: wrap; In order to wrap the items need to be wide enough (100%). Since 100% flex item is always justified to the full width, you need text-align, not align-items which is the wrong property in the first place.
align-items is the alignment at the cross axis, not the main axis which would be justify-content
.flex-row {
min-height: 400px;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.flex-item {
flex-basis: 100%;
}
.flex-item:nth-child(2) {
text-align: center;
}
.flex-item:last-child {
text-align: right;
}
<div class="flex-row">
<div class="flex-item">
<img src="/default.png" width="100" height="50">
</div>
<div class="flex-item">
<img src="/default.png" width="100" height="50">
</div>
<div class="flex-item">
<img src="/default.png" width="100" height="50">
</div>
</div>
Look at this code
display:flex;
flex-direction: row;
justify-content: flex-start;
align-items: centre;
With flex-direction you specify le principal alignment (horizontal with row , vertical with column). Depending on what you choose here the following properties will have a different effect.
Then with justify-content you specify how your items inside your elements should align on the principal axis you just defined (vertical or horizontal).
In this case flex-start means at the beginning of my axis.
And with align-items you specify the alignment for the secondary axe.The vertical one because we choose flex-direction: row; and not flex-direction: column;. So in the vertical axis items will align at centre
And don't forget to take look at the available properties like space-between or flex-end
NOTE!
to set height to column change the px here:flex: 0 1 50px; or remove it!
Using margin-right/left:auto as:
.flex-row {
min-height: 400px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.flex-item {
flex: 0 1 50px;
}
.flex-item:nth-child(2) {
margin-right: auto;
margin-left: auto;
}
.flex-item:last-child {
margin-left: auto;
}
<div class="flex-row">
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
</div>
2. using align-self
.flex-row {
min-height: 400px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.flex-item {
flex: 0 1 50px;
align-self: flex-start;
}
.flex-item:nth-child(2) {
align-self: center;
}
.flex-item:last-child {
align-self: flex-end;
}
<div class="flex-row">
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
<div class="flex-item">
<img src="/default.png">
</div>
</div>
In the code snippet below, I would like the divs to appear with 2 rows and 2 columns in each row
.column-container {
min-height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.wrapper {
display: flex;
flex-basis: calc(50% - 40px);
justify-content: center;
flex-direction: column;
}
.subject-status-row--count {
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
<div class="column-container">
<div class="wrapper">
<div class="subject-status-row--count">
<span>
10
</span>
</div>
<div class="subject-status-row--count">
<span>
10
</span>
</div>
<div _ngcontent-c17="" class="subject-status-row--count">
<span>
10
</span>
</div>
<div class="subject-status-row--count">
<span>
30
</span>
</div>
</div>
</div>
You're wrapping .column-container, which only has 1 child: .wrapper. You should wrap .wrapper, really:
.column-container {
display: flex;
min-height: 100%;
flex-direction: row;
}
.wrapper {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
justify-content: center;
flex-direction: row;
}
.wrapper > * {
flex-basis: calc(50% - 40px);
}
.subject-status-row--count {
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
<div class="column-container">
<div class="wrapper">
<div class="subject-status-row--count">
<span>
10
</span>
</div>
<div class="subject-status-row--count">
<span>
10
</span>
</div>
<div _ngcontent-c17="" class="subject-status-row--count">
<span>
10
</span>
</div>
<div class="subject-status-row--count">
<span>
30
</span>
</div>
</div>
</div>
You need to give your wrapper a height and width for the wrapping to work. AND you need the flex-basis to be a width/height minus borders.
Also in your case, you have the flex on the wrong container to get wrapping to work.
.flex-wrapper {
display:flex;
flex-direction: column;
flex-wrap: wrap;
height: 400px;
width: 400px;
}
.flex-cell {
flex: 1;
border:1px solid blue;
flex-basis: calc(50% - 2px); //size - border width
// vertically center the content - assume that's what you wanted
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
<div class="flex-wrapper">
<div class="flex-cell">
<span class="content-center">1</span>
</div>
<div class="flex-cell">
<span class="content-center">2</span>
</div>
<div class="flex-cell">
<span class="content-center">3</span>
</div>
<div class="flex-cell">
<span class="content-center">4</span>
</div>
</div>
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/