Align element items according to class using flexbox

Asked

Viewed 157 times

2

I have the following menu:

body {
  padding: 1rem;
}

.menu {
  display: flex;
  padding: 0.5rem;
  border: solid 1px #000;
}

.item {
  border: solid 1px #444;
  padding: 0.25rem;
}

.item:not(:last-child) {
  margin-right: 0.25rem;
}
<div class="menu">
  <span class="item">Esquerda 1</span>
  <span class="item right">Direita 1</span>
  <span class="item">Esquerda 2</span>
  <span class="item">Esquerda 3</span>
  <span class="item right">Direita 2</span>
</div>

How do I use flexbox, all items in class "right" line up on the right keeping the elements without that class on the left? I also need the remaining space to be between all right and left elements. So:

PS: I do not wish to create two Wrappers additional to separate the elements. I want to know if it is possible to separate them only with CSS and using the mentioned HTML structure.

css flexbox

2 answers

1


You can use the property order in the children of a flex container, then only in the first element with the class .right you put margin-left:auto, it will "push" all the other elements with the class .right towards the end of the container

body {
  padding: 1rem;
}

.menu {
  display: flex;
  padding: 0.5rem;
  border: solid 1px #000;
}

.item {
  border: solid 1px #444;
  padding: 0.25rem;
}

.item:not(:last-child) {
  margin-right: 0.25rem;
}

.right {
  order: 2;
}
.right.primeiro {
  margin-left: auto;
}
<div class="menu">
  <span class="item">Esquerda 1</span>
  <span class="item right primeiro">Direita 1</span>
  <span class="item">Esquerda 2</span>
  <span class="item">Esquerda 3</span>
  <span class="item right">Direita 2</span>
</div>

  • Cool, Hugo! Thanks for the answer. But is there any way to get into this without adding class primeiro?

  • @Luizfelipe has, but for me it is can be gambiarra rss... vc can create an empty span as last menu item, and in it vc puts flex-Grow: 1; If you care I edit the question with this template

  • So you don’t have to... What I really needed was to be able to do without touching the HTML. I’m going to end up with the class approach primeiro same. But if you find out or know a way without messing with HTML, I’ll be happy to know!! D

  • 1

    @Luizfelipe a hint, maybe with diplay Grid in place of the Flex display, it is possible to do it without needing the empty Span or the extra class First

  • I’m still a little behind in CSS and I don’t know anything about CSS Grid. :v When I go to learn I’ll take a look at an alternative using this. :)

  • 1

    @Luizfelipe a detail, if you know that the second item will always have the class . right vc can use this CSS, ai do not need the class . first. .item:nth-child(2) {&#xA; margin-left: auto;&#xA;}

  • 1

    @Luizfelipe sometimes this might interest you https://answall.com/questions/380734/selectr-a-primeira-ocorr%C3%Aancia-da-classe-usando-css/

Show 2 more comments

0

Could put margin-left: auto only in the second element .item and order: 1 in class .right. This will make the class elements .right line up on the right causing the second son .item has an automatic left margin of the last element that only has the class .item:

body {
  padding: 1rem;
}

.menu {
  display: flex;
  xflex-direction: row;
  padding: 0.5rem;
  border: solid 1px #000;
}

.item {
  border: solid 1px #444;
  padding: 0.25rem;
}

.item:not(:last-child) {
  margin-right: 0.25rem;
}

.item:nth-child(2){
   margin-left: auto;
}

.right{
   order: 1;
}
<div class="menu">
  <span class="item">Esquerda 1</span>
  <span class="item right">Direita 1</span>
  <span class="item">Esquerda 2</span>
  <span class="item">Esquerda 3</span>
  <span class="item right">Direita 2</span>
</div>

Browser other questions tagged css flexbox

You are not signed in. Login or sign up in order to post.