CODEWITHSUNDEEP
htmlcssflexbox
Artimal
Artimal

Reputation: 661

Flexbox align to right MANY items

Everybody knows how to align ONE item to right in flexbox. But how to align for example the two last elements to right and rest traditional to the left? Here I have an example. I want elements with class .r aligned to right of header menu.

ul {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    /* width: 100%; */
    height: 100px;
    background: #333;
    padding: 15px;
}

ul li {
    padding: 15px;
    margin: 5px;
    background: #efefef;
    border: 1px solid #ccc;
    display: inline-block;
    list-style: none;  
}

.r {
	margin-left: auto;
}
<ul>
    <li>Home</li>
    <li>Menu</li>
    <li>More</li>
    <li>Stuff</li>
    <li class="r">Login</li>
    <li class="r">Sign Up</li>
</ul>

FIDDLE HERE

Please for help.

Upvotes: 1

Views: 98

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371231

Put the margin-left: auto only on the second-to-last flex item.

.r {
  margin-left: auto;
}

ul {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  /* width: 100%; */
  height: 100px;
  background: #333;
  padding: 15px;
}

ul li {
  padding: 15px;
  margin: 5px;
  background: #efefef;
  border: 1px solid #ccc;
  display: inline-block;
  list-style: none;
}
<ul>
  <li>Home</li>
  <li>Menu</li>
  <li>More</li>
  <li>Stuff</li>
  <li class="r">Login</li>
  <li>Sign Up</li>
</ul>

revised fiddle

When a flex item has margin-left: auto, it pushes itself away from everything on its left, and shifts everything on its right along with it.

In your case, margin-left: auto makes sense for the second-to-last child. But it doesn't make sense for the last child.

Alternatively, you can use margin-right: auto on STUFF:

li:nth-child(4) {
	margin-right: auto;
}

ul {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    /* width: 100%; */
    height: 100px;
    background: #333;
    padding: 15px;
}

ul li {
    padding: 15px;
    margin: 5px;
    background: #efefef;
    border: 1px solid #ccc;
    display: inline-block;
    list-style: none;  
}
<ul>
    <li>Home</li>
    <li>Menu</li>
    <li>More</li>
    <li>Stuff</li>
    <li>Login</li>
    <li >Sign Up</li>
</ul>

Upvotes: 4

Michael Coker
Michael Coker

Reputation: 53674

@Michael_B's solution is what I would use, but you can also use a pseudo element and the order attribute to wedge the pseudo element in your markup and set it to flex-grow to fill the space between the left and right sides.

ul {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    /* width: 100%; */
    height: 100px;
    background: #333;
    padding: 15px;
}
ul li {
    padding: 15px;
    margin: 5px;
    background: #efefef;
    border: 1px solid #ccc;
    display: inline-block;
    list-style: none;
}
ul:after {
  content: '';
  flex-grow: 1;
}
.r {
  order: 1;
}
<ul>
    <li>Home</li>
    <li>Menu</li>
    <li>More</li>
    <li>Stuff</li>
    <li class="r">Login</li>
    <li class="r">Sign Up</li>
</ul>

Upvotes: 0

Hum4n01d
Hum4n01d

Reputation: 1370

Try this: Wrap the two links that you want to align to the right in a ul like this:

<ul class="r">
  <li>Login</li>
  <li>Sign Up</li>
</ul>

http://jsfiddle.net/dwLHE/45/

Upvotes: 0

Related Questions