Move specific item to the right using flex

Navigation
3

It turns out that I have a grid of thumbs and I'm using flexbox for the first time because of its simplicity and less use of lines in the code.

I want to always place an advertising banner on the top right, the problem is that it is loaded in the third location of the first row, but on large screens where they have more than three columns per row I do not know how to place it in the% style float: right; . I do not want to use javascript because it takes a few milliseconds to act, and the change is evident.

Here is an illustration in case I did not explain myself well: This is the code for the moment: 

body {
  margin: 50px;
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
  padding: 0px;
}
ul li {
  width: calc(20% - 15px);
  height: 150px;
  background-color: #9e9f9a;
  margin: 0 15px 20px 0;
}
ul li.ad {
  background-color: #ff00d8;
}
<ul>
  <li></li>
  <li></li>
  <li class="ad"></li>
  <li></li>
  <li></li>
</ul>
    
asked by tomillo 08.06.2018 в 20:36
source

2 answers

1

You can achieve what you want by declaring the order: -1; to the element you always want to be above and assign flex-direction: row-reverse; to the container

Try it full screen and change the width of this:) 

body {
  margin: 50px;
}

ul {
  flex-direction: row-reverse;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
  padding: 0px;
}

ul li {
  width: 2rem;
  height: 150px;
  background-color: #9e9f9a;
  margin: 0 15px 20px 0;
}

ul li.ad {
  order: -1;
  background-color: #ff00d8;
}
<ul>
  <li></li>
  <li></li>
  <li class="ad"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Now if you want the elements to fall to the beginning of the next row you can declare justify-content: flex-end; 

body {
  margin: 50px;
}

ul {
  flex-direction: row-reverse;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  list-style-type: none;
  padding: 0px;
}

ul li {
  width: 2.5rem;
  height: 150px;
  background-color: #9e9f9a;
  margin: 0 15px 20px 0;
}

ul li.ad {
  order: -1;
  background-color: #ff00d8;
}
<ul>
  <li></li>
  <li></li>
  <li class="ad"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
    
answered by 08.06.2018 / 21:11
source
2

Try using order .

  

By default, flexible elements are presented in the order of   origin. However, the order property controls the order in which   appear in the flexible container.

If we give value to the property order we can establish the order of the elements, for example, we have 3 div 's, then we put order:1 , order:3 and order:2 to each, and they will be positioned in the way we have specified.

I leave you the documentation . 

body {
  margin: 50px;
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
  padding: 0px;
}
ul li {
  width: calc(20% - 15px);
  height: 150px;
  background-color: #9e9f9a;
  margin: 0 15px 20px 0;
}
ul li.ad {
  background-color: #ff00d8;
  order: 1;
}
<ul>
  <li></li>
  <li></li>
  <li class="ad"></li>
  <li></li>
  <li></li>
</ul>
    
answered by 08.06.2018 в 20:40
Javascript: The check 2 12 returns true Add total column and group by month in mysql