<div class="copy">
  <p>Specification texts are taken from the W3C specification 
    <a href="http://www.w3.org/TR/css3-flexbox/#align-content">W3C CSS Flexible Box Layout Module</a><br><span class="self">Own comments and notes in blue color.</span></p>
</div>

<div class="explain">
  <h1>Flexbox: margin</h1>
    
  Auto margins on flex items have an effect very similar to auto margins in block flow:
<ul>
  <li>During calculations of flex bases and flexible lengths, auto margins are treated as ‘0’.</li>
  <li>Prior to alignment via ‘justify-content’ and ‘align-self’, any positive free space is distributed to auto margins in that dimension.</li>
  <li>Overflowing elements ignore their auto margins and overflow in the end/foot direction.</li>
  </ul>
  <p>
    Note that, if free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.
  </p>
  
</div>

<h2>Demos</h2>
<h3 class="separator">
  margin: auto;
</h3>
<p class="self">
  // horizontal and vertical centering
</p>
<div class="flexboxContainer ">
  <div class="flexboxItem m-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus temporibus?</div>
</div>
  
<h3 class="separator">
  margin-left: auto at second item
</h3>
<p class="self">
  // a possibility to group the flex-items
</p>
<div class="flexboxContainer ">
  <div class="flexboxItem">Lorem ipsum dolor sit amet,</div>
  <div class="flexboxItem ml-auto">Lorem ipsum dolor sit amet, </div>
  <div class="flexboxItem">Lorem ipsum dolor sit amet, </div>
</div>
  
<h3 class="separator">
  margin-left: auto at second and fourth item
</h3>
<p class="self">
  // here: create three groups
</p>
<div class="flexboxContainer ">
  <div class="flexboxItem">Lorem ipsum dolor sit amet,</div>
  <div class="flexboxItem ml-auto">Lorem ipsum dolor sit amet, </div>
  <div class="flexboxItem">Lorem ipsum dolor sit amet,</div>
  <div class="flexboxItem ml-auto">Lorem ipsum dolor sit amet, </div>
  <div class="flexboxItem">Lorem ipsum dolor sit amet, </div>
</div>
  
<h3 class="separator">
  margin-top: auto at last item
</h3>
<p class="self">
  // here: create two groups | flex-direction is column
</p>
<div class="flexboxContainer flex-direction-column">
  <div class="flexboxItem">Lorem ipsum dolor</div>
  <div class="flexboxItem">Lorem ipsum dolor</div>
  <div class="flexboxItem mt-auto">Lorem ipsum dolor</div>
</div>
  
<h3 class="separator">
  margin-top: auto at last item with align-items:flex-start
</h3>
<p class="self">
  // here: create two groups | flex-direction is column<br>
  // same result as above - the align-items property has no effect because margin-top: auto has stolen the free space
</p>
<div class="flexboxContainer flex-direction-column flex-align-items-flex-start">
  <div class="flexboxItem">Lorem ipsum dolor</div>
  <div class="flexboxItem">Lorem ipsum dolor</div>
  <div class="flexboxItem mt-auto">Lorem ipsum dolor</div>
</div>
  
<h3 class="separator">
  No margin-top: auto at last item with align-items:flex-start
</h3>
<p class="self">
  // align-items property works
</p>
<div class="flexboxContainer flex-direction-column flex-align-items-flex-start">
  <div class="flexboxItem">Lorem ipsum dolor</div>
  <div class="flexboxItem">Lorem ipsum dolor</div>
  <div class="flexboxItem">Lorem ipsum dolor</div>
</div>

.flexboxContainer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  min-height: 30rem;
  min-width: 80rem;
  background: #a7a9aa;
}

.flexboxContainer.flex-direction-column {
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
}

.flex-align-items-flex-start {
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.flexboxItem {
  width: 10rem;
  background-color: #b94a48;
  color: #fff;
  border: 1px dashed #333;
  padding: 1rem;
}

.m-auto {
  margin: auto;
}

.ml-auto {
  margin-left: auto;
}

.mt-auto {
  margin-top: auto;
}

html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
  padding: 2rem;
  max-width: 130rem;
}

.explain {
  background: #efefef;
  padding: 2rem;
}

.copy {
  color: #b94a48;
  font-weight: bold;
  font-size: 1.8rem;
}

.self {
  color: #428bca;
}

.separator {
  background-color: #f0ad4e;
  padding: 1.5rem 1rem;
  margin: 2rem 0;
}

.smallSeparator {
  background-color: #2980b9;
  padding: 0.5rem 1rem;
  margin: 2rem 0;
}