7 replies

Positioning last div at end, when using flex and flex-wrap

Hi!

See screenshot for reference.

I'm banging my head against this one. I have a flex container with flex-wrap enabled. I want the last button (class "close-button") to show at the bottom right corner of the flex-container. The number of buttons in the container can be anything.
I also want the container height to only be the needed height. So if there are only 3 room buttons, it should only be high enough to show the three buttons plus the close buttons.
I can't get this to work without setting the container to a fixed height.

Any input is appreciated.

Thanks in advance.

PS. This is my first post, so please let me know if this should be structured in better way

<div class="rooms">
  <div class="rooms-title">Xxxxxx</div>
  <div class="room-buttons">
    <div class="room-button" v-for="number in x">
      <SharingIcon></SharingIcon>
      <BaseButton></BaseButton>
    </div>
    <div class="close-button">
      <MyButton title="Stäng"></MyButton>
    </div>
  </div>
</div>

<div class="rooms">
  <div class="rooms-title">Xxxxxx</div>
  <div class="room-buttons">
    <div class="room-button" v-for="number in x">
      <SharingIcon></SharingIcon>
      <BaseButton></BaseButton>
    </div>
    <div class="close-button">
      <MyButton title="Stäng"></MyButton>
    </div>
  </div>
</div>

.rooms {
  height: 100%;
  border-left: 1px solid var(--col-line);
}

.room-buttons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  max-height: calc(100vh - 16rem);
}
.room-button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem 0;
  border-left: 1px solid var(--col-line);
}
.close-button {
  margin-top: auto;
  align-self: flex-end;
}

.rooms {
  height: 100%;
  border-left: 1px solid var(--col-line);
}

.room-buttons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  max-height: calc(100vh - 16rem);
}
.room-button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem 0;
  border-left: 1px solid var(--col-line);
}
.close-button {
  margin-top: auto;
  align-self: flex-end;
}

Simplified fiddle:
https://shorturl.at/buyA3

KP-C

Kevin Powell - Community•2y ago•

7 replies

Niklas Westman

Positioning last div at end, when using flex and flex-wrap

<div class="rooms">
  <div class="rooms-title">Xxxxxx</div>
  <div class="room-buttons">
    <div class="room-button" v-for="number in x">
      <SharingIcon></SharingIcon>
      <BaseButton></BaseButton>
    </div>
    <div class="close-button">
      <MyButton title="Stäng"></MyButton>
    </div>
  </div>
</div>

<div class="rooms">
  <div class="rooms-title">Xxxxxx</div>
  <div class="room-buttons">
    <div class="room-button" v-for="number in x">
      <SharingIcon></SharingIcon>
      <BaseButton></BaseButton>
    </div>
    <div class="close-button">
      <MyButton title="Stäng"></MyButton>
    </div>
  </div>
</div>

.rooms {
  height: 100%;
  border-left: 1px solid var(--col-line);
}

.room-buttons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  max-height: calc(100vh - 16rem);
}
.room-button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem 0;
  border-left: 1px solid var(--col-line);
}
.close-button {
  margin-top: auto;
  align-self: flex-end;
}

.rooms {
  height: 100%;
  border-left: 1px solid var(--col-line);
}

.room-buttons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  max-height: calc(100vh - 16rem);
}
.room-button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem 0;
  border-left: 1px solid var(--col-line);
}
.close-button {
  margin-top: auto;
  align-self: flex-end;
}

Simplified fiddle:
https://shorturl.at/buyA3

Positioning last div at end, when using flex and flex-wrap

Positioning last div at end, when using flex and flex-wrap

Similar Threads

Similar Threads

Similar Threads