Position Last Flex Item at the End of Container

Position last flex item at the end of container

Flexible Box Layout Module - 8.1. Aligning with auto margins
Auto margins on flex items have an effect very similar to auto margins in block flow:
During calculations of flex bases and flexible lengths, auto margins are treated as 0.
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

Therefore you could use margin-top: auto to distribute the space between the other elements and the last element.

This will position the last element at the bottom.

p:last-of-type {
  margin-top: auto;
}

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 200px;
  width: 100px;
}
p {
  height: 30px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-top: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
</div>

How can I put a flex item to the end?

You were correct in using margin-left: auto on the last flex item. That is one way to position the last item at the end of the main axis. To keep the other flex items positioned in the center, you can simply give the first flex item .item:first-child an auto left margin with margin-left: auto. Now the items 1,2,3,4 are centered in the nav bar with number 5 (the last item) positioned at the end of the row.

#container {
  background-color: wheat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  background-color: thistle;
  margin: 5px;
  padding: 10px;
}

.item:first-child {
  margin-left: auto;
}

.item:last-child {
  margin-left: auto;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>  
</div>

Position two last flex items at the end oft the container

Apply margin-left: auto; only on li:nth-last-child(2).
margin-left: auto; pushes the item and the following ones to the right.
Here is a quick article regarding flex and margins.

Updated code :

li:nth-last-child(1),
li:nth-last-child(2) {
    color: #c2c2c2;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 300;
}

li:nth-last-child(2) {
    margin-left: auto;
}

How can I align the last child of a flex element to the bottom?

You could add the following to have your paragraph tag take up space to push the items down by adding:

.box > p {
  flex: 1;
}

.section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.box {
    display: flex;
    flex-direction: column;
    border: 2px solid lightcoral;
    min-width: 300px;
    max-width: 420px;
    margin: 1em;
    border-radius: 10px;
    padding: 1em;
}

.box > p {
  flex: 1;
}

.elements {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1em 0em 0em 0em;
}

.itm {
    position: relative;
    display: inline-block;
    margin: 1em;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%);
    padding: 0.5em;
}

<div class="section">
    <div class="box">
        <p>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text </p>
        <div class="elements">
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
        </div>
    </div>
    <div class="box">
        <p>Medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text </p>
        <div class="elements">
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
        </div>
    </div>
    <div class="box">
        <p>Short text short text </p>
        <div class="elements">
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
            <div class="itm"><p>asdf asdf</p></div>
        </div>
    </div>
</div>

How can I position the last element at the end of the column using flexbox?

margin-top: auto will push it to the bottom. You can read more about auto margin's and flexbox here - https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6

<!doctype html><html><style>  * {    margin: 0;    padding: 0;    box-sizing: border-box;  }  ul {    list-style: none;    background: red;    width: 100px;    min-height: 100vh;    display: flex;    flex-direction: column;    align-items: flex-start;  }    li {    border: 1px solid blue;  }    li:last-child {    background: blue;    margin-top: auto;  }</style>
<body>  <ul>    <li>foo</li>    <li>foo</li>    <li>foo</li>    <li>foo</li>    <li>foo</li>    <li>foo</li>  </ul></body>
</html>

How can I position one flex item at each end of a row?

If you're in flex-direction: row, then use justify-content. The align-* properties would apply to the vertical axis (the cross axis).

.ant-menu{
   display: flex;
   flex-direction: row ;
   background-color: red;
   justify-content: space-between; /* or space-around */
}

You can also use auto margins on the items (full explanation).

Also, floats don't work in a flex container.

Align flex item to end of container

The align-content property only works when there are multiple lines of flex items in a container. This property is designed to distribute the space between lines.

Since there is only one line in your container, align-content is having no effect.

Use align-items in a single line container.

div {  display: flex;  flex-direction: column;  align-items: flex-end;     /* changed from align-content */  justify-content: flex-end; /* optional */  background: yellow;  padding: 50px;  width: 400px;  height: 300px;}

<div>  <p>    Align me in the bottom left corner.  </p></div>

Why does flex-end does not work for the last item in a list?

There's no justify-self property in flexbox for flex-items to align them on the main axis. For cross-axis, there's align-self property though, to align flex-items vertically.

If you don't like the margin to align flex-items on main axis then you also add an empty span tag before the last-child and give it flex-grow: 1 css to get the same result.

Order flex item at last position always

Normally the elements are laid out in the order of their appearance in the markup. However you can specify an implicit ordering using the order property in css. This will place elements according to their order. If two elements have the same value for this order property, they will stay be layed out following the original markup. In a way you can see it as form of grouping: first the ones with order 0, then with order 1, .... (setting a negative value for order would of course place them before the 0 group; that is how the -1 trick to place the element first works)

You can use this solve your problem by simply setting the order of the second child to 1, all other elements will have the default value of 0 so be placed before.

.child:nth-child(2) {
  order: 1;
}

Position Last Flex Item at the End of Container