Flexbox Space-Between and Align Right

flexbox space-between and align right

There is a selector for that.

.container div:only-child {
  margin-left: auto;
}

.container {  display: flex;  width: 300px;  justify-content: space-between;  /* Styling only */  padding: 10px;  background: #ccc;  margin-bottom: 10px;}.container div {  /* Styling only */  background: white;  padding: 20px 40px;  width: 10px;}.container div:only-child {  align-self: flex-end;  margin-left: auto;}

<div class="container">  <div>    1  </div>  <div>    2  </div>  <div>    3  </div></div>
<div class="container">  <div>    3  </div></div>

justify: space-between with right aligned last element

space-between will work- check out the example below:

body {  margin: 0;}* {  box-sizing: border-box;}.wrapper {  display: flex;  justify-content: space-between;}.wrapper > * {  border: 1px solid;}

<div class="wrapper">  <div>one</div>  <div>two</div>  <div>three</div>  <div>four</div>  <div>five</div></div>

Better way to set distance between flexbox items

• Flexbox doesn't have collapsing margins.
• Flexbox doesn't have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use)

Therefore achieving what you are asking for is a bit more difficult.

In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.

Demo

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

How do i align text to right with space-between flex box

Set a flex-grow propery and a text-align on .skilltitle, like this:

.skilltitle {
  flex: 1 0 auto;
  align-content: flex-end;
  margin-top: auto;
  margin-bottom: auto;
  padding-right: 20px;
  padding-left: auto;
  text-align: end;
}

Flexbox - Using Space-between whilst aligning items left

"Otherwise during the responsiveness I would have to eliminate the margins on odd / evens / first / last etc to ensure the entire container is taken up."

You don't have to clear margin for hard-coded child elements. Here is the trick:

1. Add overflow: hidden on parent of flex container to avoid horizontal scroll.
2. Extend flex container with negative margin from both sides equal to margin applied on flex child on either side.
3. Add same left / right margin on flex child.

.row {  overflow: hidden;  margin: 0 auto 20px;  background: #ebebeb;}
ul {  margin:0;  padding:0;  list-style:none;}
li {  margin-bottom: 10px;  background: #999;}
@media (min-width: 768px) {  ul {    flex-wrap: wrap;    display:flex;    margin: 0 -1%;  }  li {    margin-right: 1%;    margin-left: 1%;    width: 48%;  }}
@media (min-width: 1024px) {  li {    width: 23%;  }}

<div class="row row--ideal">  <h3>Ideal Result</h3>  <ul>    <li> Item 1 </li>    <li> Item 2 </li>    <li> Item 3 </li>  </ul></div><div class="row row--ideal">  <h3>Ideal Result</h3>  <ul>    <li> Item 1 </li>    <li> Item 2 </li>    <li> Item 3 </li>    <li> Item 4 </li>  </ul></div>

Flex-box: Align last row to grid

Add a ::after which autofills the space. No need to pollute your HTML. Here is a codepen showing it: http://codepen.io/DanAndreasson/pen/ZQXLXj

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

How to align right when flex-wrap is triggered but justify-content space-between otherwise?

row-reverse wrap-reverse can do it

.box {
  display:flex;
  justify-content:space-between;
  flex-flow: row-reverse wrap-reverse;
  /* OR
     flex-direction: row-reverse;
     flex-wrap: wrap-reverse;
  */
  
  /* to illustrate */
  overflow:hidden;
  resize:horizontal;
  padding:10px;
  border:1px solid;
  /**/
}

.box > div {
  padding:10px 30px;
  border:1px solid blue;
} 

.box > div:first-child {
  order:1; /* to rectify the order swapped by row-reverse */
}

<div class="box">
<div>some text A</div>
<div>some text B</div>
</div>

How to Right-align flex item?

A more flex approach would be to use an auto left margin (flex items treat auto margins a bit differently than when used in a block formatting context).

.c {
    margin-left: auto;
}

Updated fiddle:

.main { display: flex; }.a, .b, .c { background: #efefef; border: 1px solid #999; }.b { flex: 1; text-align: center; }.c {margin-left: auto;}

<h2>With title</h2><div class="main">    <div class="a"><a href="#">Home</a></div>    <div class="b"><a href="#">Some title centered</a></div>    <div class="c"><a href="#">Contact</a></div></div><h2>Without title</h2><div class="main">    <div class="a"><a href="#">Home</a></div>    <!--<div class="b"><a href="#">Some title centered</a></div>-->    <div class="c"><a href="#">Contact</a></div></div><h1>Problem</h1><p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

---

Related Topics