This question already has answers here:
How can I align one item right with flexbox?
(5 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
How does flex-wrap work with align-self, align-items and align-content?
(2 answers)
Closed 5 years ago.
According to the spec, and several blogs, the 'align-self' overrides the 'align-items' property of its parent. In the CodePen example, I have used flex-direction: column because align-self only applies to the cross axis. I haven't been able to get rid of the extra white space. I know I could just make each li a container, and align items within them, but I'm really trying to solve with without creating more containers, if possible.
The last item aligns to the end nicely, but everything in between the first and last act almost like 'space-around' but I realize it's really a column that forces each item to wrap. If I remove any alignment properties, the combo of column and flex-wrap causes the items to "distribute". It could be this is a limitation of the flexbox spec... but I'm not sure.
* { box-sizing: border-box; }
ul {
list-style-type: none;
padding: 0;
display: flex;
align-items: flex-start;
border: 1px solid black;
li {
display: flex;
justify-content: center;
width: 100px;
border-right: 1px solid black;
&:last-of-type {
align-self: flex-end;
}
}
}
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
Related
This question already has answers here:
How to select a range of elements in repeated pattern
(2 answers)
Select every Nth element in CSS
(4 answers)
Closed 2 years ago.
I am looking for a way to right-justify specific columns (not all columns) in a grid in CSS without having to explicitly specify a special class or style for each column entry. For example:
<style>
.myclass {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
}
</style>
<div class="myclass">
<span>AAAA</span>
<span>BBBB</span>
<span>CCCC</span>
<span>DDDD</span>
<span>EEEE</span>
<span>FFFF</span>
<span>GGGG</span>
<span>HHHH</span>
</div>
So, I want the first and third columns right justified, and the second and fourth columns left justified without having to explicitly specify style or class for each span.
Thanks!
nth-child selector can do the trick
.myclass {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-gap: 10px;
}
span:nth-child(2n+1) {
background: #eee;
display: flex;
justify-content: flex-end;
}
<div class="myclass">
<span>AAAA</span>
<span>BBBB</span>
<span>CCCC</span>
<span>DDDD</span>
<span>EEEE</span>
<span>FFFF</span>
<span>GGGG</span>
<span>HHHH</span>
</div>
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 2 years ago.
I have a set of divs and want the children to be right aligned:
.parent {
width: 150px;
border: solid;
display: flex;
align-items: center;
justify-content: flex-end;
}
<div class="parent">
<div class="icon">x
</div>
<div>Toooooooo looooooooong</div>
</div>
When the text breaks in a newline, it still occupies all the space, so it's not at the right. I could use width: min-length, but then all the short texts with spaces break in a new line, and I want it only for the long ones.
Here's the example in CodePen: https://codepen.io/rveciana/pen/eYpyKJX
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
What are the differences between flex-basis and width?
(6 answers)
Closed 4 years ago.
Given the following code:
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
}
.right-container {
flex: 0 1 auto;
}
<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>
The right container will grow to be 300px high, despite the flex-grow property being set to 0. How do I prevent this from happening? I.E., I want the right container to only be as tall as its content.
Codepen: https://codepen.io/MaxMillington2/pen/PxOwxo
Add align-self: flex-start on the .right-container
.outer-container {
display: flex;
justify-content: space-evenly;
}
.left-container {
height: 300px;
border: 1px solid blue;
}
.right-container {
align-self: flex-start;
border: 1px solid red;
}
<div class='outer-container'>
<div class='left-container'>Lefto</div>
<div class='right-container'>Righto</div>
</div>
Note: flex-grow, flex-shrink and flex-basis are for controlling how the space is filled along the main axis. In this case, the main axis is left-right because the flex-direction is set to row by default.
The align-items property will align the items on the cross axis. The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default.
MDN - Concepts of Flexbox
That is why you need to override either align-items on your .outer-container or align-self to the flex children.
This question already has answers here:
Aligning to the bottom in flexbox
(2 answers)
Proper use of flex properties when nesting flex containers
(1 answer)
Closed 5 years ago.
I'm trying to position a div with a progress bar to the bottom of my flexbox but everything i find on stackoverflow doesnt work or is not applied as it need to be...
tried absolute to the bottom, auto-margin, flex-grow and none of them has been fixing the problem!
<div class="row statut-plan-action">
<div class="col" *ngFor="let statut of details.statuts">
<div>{{statut.descriptionCourte}}</div>
<div class="fill-space">
<app-etape-plan-action-statut [etape]="obtenirEtape(statut.code)" [descriptionStatut]="statut.descriptionCourte"></app-etape-plan-action-statut>
</div>
<ngb-progressbar class="progression" type="success" [value]="obtenirPourcentageCompletion()"></ngb-progressbar>
</div>
</div>
so i'm trying to put the ngb-progressbar to the bottom of my div, but i didnt success. i've tried by putting it in a div and it didnt work either
here is the last try i've did in css
.statut-plan-action {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
}
.col {
padding-left: 0;
padding-right: 0;
}
.fill-space {
flex-grow: 1;
}
.progression {
margin-top: auto;
}
* EDIT *
Image of the problem
This question already has answers here:
How to adapt div's width to content with flexbox
(4 answers)
How to change flexbox wrap?
(2 answers)
Targeting flex items on the last or specific row
(10 answers)
Closed 5 years ago.
I have what seems like a simple CSS question but has been rather vexing for me as a styles newbie. Any help is really appreciated. I tried to find another example on Stack Overflow and couldn't which surprised me, so if this is a dupe pls point me in the right direction.
I have a container element that contains some text and a list of elements with fixed dimensions.
<div class='container'>
<p> Title </p>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
</div>
I don't know how many items I will actually have - it might be 3 - 9. I want the container to be centered on the page and the heading to be centered above the items, but I want the items to be added left to right. I want the items to align left so that they appear centered under the heading and on the page when the row is full, but should appear from left to right if a row is not full. So if the screen can fit three and there are four, the fourth should align with the first element and not be in the middle.
.container {
margin: 0 auto;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
p {
margin: 0 auto;
text-align: center;
justify-content: center;
align-self: center;
display: block;
}
.item {
flex: none;
width: 200px;
height: 100px;
background-color: red;
margin: 20px;
}
The issue I'm having is that I can center the text, but because the width of the parent is not based on the width of the children, it always appears slightly off center. So, I read that I can force the parent's width to be based on the children's width by setting display: inline-flex on the parent. This accomplishes that, but unfortunately that then forces the heading to be in-line with the items, which defeats the purpose. The only reason I need the width of the parent to be calculated based on children's width is so that the text will know how to center itself inside the parent.
Any help would be really appreciated. I don't need to use flexbox - any other approach that works would be great...this is just the latest in a series of different things I've tried.
If i understood the question correctly, you were on the right track, setting display:block on the p was a good idea, but you also need to set width:100% so it won't stay inline with the other items.
See below or jsFiddle
.container {
margin: 0 auto;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
p {
width: 100%;
margin: 0 auto;
text-align: center;
justify-content: center;
align-self: center;
display: block;
}
.item {
flex: none;
width: 200px;
height: 100px;
background-color: red;
margin: 20px;
}
<div class='container'>
<p> Title </p>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
</div>