Hello I want the last item in a flexbox to be justify-content: flex-end; how do I do this? It is a flexbox with direction column ?
<div class='flex'>
<ul>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li >THIS ONE FLEX END</li>
</ul>
</div>
Flex works on the children which is ul not li. Are you getting what you want now? Aside from flex-end I mean.
If the <li>s are supposed to be the flex items, then the <ul> should be the flex container.
Also, note that justify-content and align-items will switch when changing the flex-direction, as an example.
https://jsfiddle.net/t8n2xj5h/
I don’t think this is the layout you are are looking for, I just wanted to show the justify-content and align-items switch.
@crudfunc Look at the example below.
While you are creating the layout of the website you can add ‘border: solid’ to the item so it will be easier to see where the element line up. Then delete ‘border: solid’ later. I add the class “right” to the last li list item to be able to position it. Paste this code into Codepen, then adjust the width of the page larger and smaller than 600px. You can do something like this:
HTML:
<div class='flex'>
<ul>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li class="right">THIS ONE FLEX END</li>
</ul>
</div>
CSS:
body {
width: 100%;
height: 100%;
}
ul {
margin: 0;
padding: 0;
display: flex;
list-style-type: none;
flex-direction: column;
}
li {
border: solid;
padding: .5rem;
}
.right {
margin-top: 500px; /* this number needs adjustment */
}
@media only screen and (min-width: 600px) {
ul {
flex-direction: row;
}
li {
margin-right: 1rem;
}
.right {
margin-top: 0;
margin-left: auto;
}
}
Column:
