Menu
How may I locate few elements in one line with flex-start property and few elements with flex-end in one line.
309
flex-start : lines packed to the start of the container. flex-end : lines packed to the end of the container. center : lines packed to the center of the container. space-between : lines evenly distributed; the first line is at the start of the container while the last one is at the end.
Aligning one item with align-self This means you can explicitly declare the align-self property to target a single item. The align-self property accepts all of the same values as align-items plus a value of auto , which will reset the value to that which is defined on the flex container.
In addition to the initial value of stretch, you can give align-items a value of flex-start , in which case they align to the start of the container and no longer stretch to the height. The value flex-end moves them to the end of the container on the cross axis. We can also do baseline alignment.
The easiest way to achieve this would be to use justify-content: space-between;:
.parent {
display: flex;
justify-content: space-between;
}
.parent > div {
padding: 10px;
background: grey;
}<div class="parent">
<div>1</div>
<div>2</div>
</div>The first div will display as the flex-start and the second as a flex-end.
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
