Flexbox Column Align Self to Bottom

Flexbox column align self to bottom

Basically, the answer is to give to the last of the middle elements a flex grow 1 code as follows:

.middle-last{
  flex-grow: 1; // assuming none of the other have flex-grow set
}

Thanks, T04435.

Align an element to bottom with flexbox

You can use auto margins

Prior to alignment via justify-content and align-self,
any positive free space is distributed to auto margins in that
dimension.

So you can use one of these (or both):

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

.content {  height: 200px;  border: 1px solid;  display: flex;  flex-direction: column;}h1, h2 {  margin: 0;}a {  margin-top: auto;}

<div class="content">  <h1>heading 1</h1>  <h2>heading 2</h2>  <p>Some text more or less</p>  <a href="/" class="button">Click me</a></div>

Aligning a single child to the bottom of a flex container

If I understand it correctly you are trying something like this using the same markup?

body {
  margin: 0;
}

.section__intro {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    &__button {
      align-self: left;
      margin-bottom: auto;
    }
    &__scroll {
      margin: 0 auto;
    }
    &__title {
      margin-top: auto;
    }
}

view in codepen

How to let a Flex column on the bottom keeping the items order using CSS?

You can use justify-content: end;

.container {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
}

.content {
  width: 25px;
  height: 25px;
  border: 1px solid black;
}

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

align-self: flex-end not moving item to bottom

Try add to .author

margin-top: auto;

You also need to remove flex-end.

How to align Items at the top and on the bottom in a Sidebar with flexbox?

To get what you want, apply margin-top: auto; to the first element that should be part of the "bottom-group", and leave the justify-content setting of the flex container at its default (i.e. no definition for that setting). Also, you need to define a height for the flex container, otherwise it will only have the added height of all its children by default (I made it 100vh, i.e. full viewport height, but adjust that as needed):

(note: view the snippet in full page view, otherwise it's not high enough to show the desired result)

html, body {
  margin: 0;
}
.sidebarleft {
  background-color: rgb(25, 20, 26);
  display: flex;
  flex-direction: column;
  flex: 0 0 50px;
  height: 100vh;
}

.sidebarleft-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  border: none;
  background-color: inherit;
  color: rgb(100, 110, 122);
}
.sidebarleft-button:nth-child(4) {
  margin-top: auto;
}

<div class="sidebarleft">
  <button class="sidebarleft-button">A</button>
  <button class="sidebarleft-button">B</button>
  <button class="sidebarleft-button">C</button>

  <button class="sidebarleft-button">Y</button>
  <!-- this Item should be on the bottom -->
  <button class="sidebarleft-button">Z</button>
  <!-- this Item should be on the bottom -->
</div>

Aligning element to bottom with flexbox

Right now, .slots is a flex container containing flex items. One way to align it with the bottom by using flexbox is by putting it in another flexbox container. This can be visualized by asking the question: "align it to the bottom of what?" The answer is: "to the bottom of another flex container".

So, in addition to being a flex container, .slots can also be a flex item inside another flex container. Then you can align .slots with the bottom of its container.

Below, I've set it's container <body> to be a flex container for the .slots element. This is similar to one of the methods for a "sticky footer", detailed at CSS-Tricks.

html,body {  height: 100%;  margin: 0;}

/* ADDED THIS */body {  display: flex;  flex-direction: column;  justify-content: flex-end;}
div.slots {  background: white;  display: flex;  flex-direction: column;  width: 250px;  /* align-content: flex-end; - NOT NEEDED */}
div.slots div.top_slots {  display: grid;  grid-template-columns: 25% 50% 25%;}
div.slots div.bottom_slots {  display: grid;  grid-template-columns: 25% 25% 25% 25%;}
div.slots div.slot {  display: flex;  align-items: center;  justify-content: center;  cursor: pointer;  background: #676767;  height: 35px;}
div.slots div.slot svg {  fill: #272727;}
div.slots div.slot:hover {  background-color: #8d8d8d;}
div.slots div.pane {  background: grey;  height: 100px;  width: auto;  text-align: center;}

<div class="slots">  <div class="top_slots">    <div class="slot stats">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M20 22H4a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h4V8c0-1.1.9-2 2-2h4V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2zM14 8h-4v12h4V8zm-6 4H4v8h4v-8zm8-8v16h4V4h-4z"/></svg>    </div>    <div class="inventory slot">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M8 7V5c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2h4zm8 2H8v10h8V9zm2 0v10h2V9h-2zM6 9H4v10h2V9zm4-2h4V5h-4v2z"/></svg>    </div>    <div class="wear slot">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z"/></svg>    </div>  </div>
  <div class="pane">    Stuff goes here  </div>
  <div class="bottom_slots">    <div class="slot friends_list">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.54-4.46a1 1 0 0 1 1.42-1.42 3 3 0 0 0 4.24 0 1 1 0 0 1 1.42 1.42 5 5 0 0 1-7.08 0zM9 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>    </div>    <div class="slot settings">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M9 4.58V4c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v.58a8 8 0 0 1 1.92 1.11l.5-.29a2 2 0 0 1 2.74.73l1 1.74a2 2 0 0 1-.73 2.73l-.5.29a8.06 8.06 0 0 1 0 2.22l.5.3a2 2 0 0 1 .73 2.72l-1 1.74a2 2 0 0 1-2.73.73l-.5-.3A8 8 0 0 1 15 19.43V20a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-.58a8 8 0 0 1-1.92-1.11l-.5.29a2 2 0 0 1-2.74-.73l-1-1.74a2 2 0 0 1 .73-2.73l.5-.29a8.06 8.06 0 0 1 0-2.22l-.5-.3a2 2 0 0 1-.73-2.72l1-1.74a2 2 0 0 1 2.73-.73l.5.3A8 8 0 0 1 9 4.57zM7.88 7.64l-.54.51-1.77-1.02-1 1.74 1.76 1.01-.17.73a6.02 6.02 0 0 0 0 2.78l.17.73-1.76 1.01 1 1.74 1.77-1.02.54.51a6 6 0 0 0 2.4 1.4l.72.2V20h2v-2.04l.71-.2a6 6 0 0 0 2.41-1.4l.54-.51 1.77 1.02 1-1.74-1.76-1.01.17-.73a6.02 6.02 0 0 0 0-2.78l-.17-.73 1.76-1.01-1-1.74-1.77 1.02-.54-.51a6 6 0 0 0-2.4-1.4l-.72-.2V4h-2v2.04l-.71.2a6 6 0 0 0-2.41 1.4zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>    </div>    <div class="slot logout">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2zm0 2v14h14V5H5zm11 7a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1z"/></svg>    </div>    <div class="slot quests">      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M19 10v6a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2v-6a2 2 0 0 1-2-2V7a1 1 0 0 1 .55-.9l8-4a1 1 0 0 1 .9 0l8 4A1 1 0 0 1 21 7v1a2 2 0 0 1-2 2zm-6 0h-2v6h2v-6zm4 0h-2v6h2v-6zm-8 0H7v6h2v-6zM5 7.62V8h14v-.38l-7-3.5-7 3.5zM5 18v2h14v-2H5z"/></svg>    </div>  </div></div>

Flexbox: Possible to align the 1st row=bottom and 2nd row=top, when columns are different widths?

You can consider a trick with baseline alignment. The idea is that the image will define the baseline of each flex item. Then you consider width:0;min-width:100% to have the text equal to the image (How to match width of text to width of dynamically sized image?)

.container {  display: flex;  max-width:800px;  align-items: baseline;  border:1px solid red;  flex-wrap:wrap;}
.container>div {  margin: 0 5px;  display:flex;  flex-direction:column;  min-width:0;  flex-grow:1;}img {  width:100%;}span {  width: 0;  min-width: 100%;}

<div class="container">  <div><img src="https://i.picsum.photos/id/1001/100/300.jpg"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>  <div><img src="https://i.picsum.photos/id/1001/250/100.jpg"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>  <div><img src="https://i.picsum.photos/id/1001/200/200.jpg"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>  <div><img src="https://i.picsum.photos/id/1001/200/400.jpg"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div></div>

Aligning to the bottom in flexbox

You need to make the parent a flex container:

.flex-list .flex-row .flex-item-wrapper .flex-item {
    width: 100%;
    height: 100%;
    display: flex;                      /* new */
    flex-direction: column;             /* new */
}

Then, tell the .caption element to fill available height:

.caption { flex: 1; }

Revised Fiddle

It's a common question. Here are other options:

Methods for Aligning Flex Items
Flexbox align to bottom
Pin a flex item to the bottom of the container
Pin element (flex item) to bottom of container
Pin element to the bottom of the container
Pin a button to the bottom corner of a container
Aligning element to bottom with flexbox
Aligning items to the bottom using flex
Align content of flex items to bottom
Align content in a flex container to the bottom
Aligning element to bottom with flexbox
Nested flexbox, align-items do not flex-end
align-content: flex-end not shifting elements to container bottom
Sticky footer with flexbox
Why isn't align-self aligning my div to the bottom of my flexbox?
How to bottom-align an element inside a flex item?
Flexbox difficulties aligning icons to bottom of container
Make an item stick to the bottom using flex in react-native
Equal height columns and align last item to bottom

Flexbox Column Align Self to Bottom