css3/flexbox/flex-algorithm-with-margins.html

<!DOCTYPE html>
<html>
<style>
body {
    margin: 0;
}
.flexbox {
    width: 600px;
    display: -webkit-flex;
    background-color: #aaa;
    position: relative;
}
.flexbox div {
    height: 20px;
    border: 0;
}

.flexbox :nth-child(1) {
    background-color: blue;
}
.flexbox :nth-child(2) {
    background-color: green;
}
.flexbox :nth-child(3) {
    background-color: red;
}
</style>
<script>
if (window.testRunner)
    testRunner.dumpAsText();
</script>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.flexbox')">
<div class="flexbox">
  <div data-expected-width="200" style="-webkit-flex: 1 0 0;"></div>
  <div data-expected-width="100" data-offset-x="250" style="width: 100px; margin: 0 50px; -webkit-flex: none;"></div>
  <div data-expected-width="200" data-offset-x="400" style="-webkit-flex: 1 0 0"></div>
</div>

<div data-expected-height="120" class="flexbox">
  <div data-expected-width="200" data-offset-y="50" style="-webkit-flex: 1 0 0; margin: 50px 0;"></div>
  <div data-expected-width="100" data-offset-x="250" style="width: 100px; margin: 0 50px; -webkit-flex: none;"></div>
  <div data-expected-width="200" data-offset-x="400" style="-webkit-flex: 1 0 0"></div>
</div>

<!-- Margins set to auto get space only if there's space available after flexing. -->
<div class="flexbox">
  <div data-expected-width="200" style="-webkit-flex: 1 0 0;"></div>
  <div data-expected-width="200" data-offset-x="200" style="width: 200px; margin: 0 auto; -webkit-flex: none;"></div>
  <div data-expected-width="200" data-offset-x="400" style="-webkit-flex: 1 0 0"></div>
</div>

<div class="flexbox">
  <div data-expected-width="100" style="-webkit-flex: 1 0 0;"></div>
  <div data-expected-width="300" data-offset-x="100" style="-webkit-flex: 2 0 100px; margin-left: auto;"></div>
  <div data-expected-width="100" data-offset-x="400" style="-webkit-flex: 1 0 0; margin-right: 100px"></div>
</div>

<!-- Margins set to auto don't have negative flex. -->
<div class="flexbox">
  <div data-expected-width="150" style="-webkit-flex: 1 1 300px;"></div>
  <div data-expected-width="300" data-offset-x="150" style="-webkit-flex: 1 0 300px; margin: 0 auto;"></div>
  <div data-expected-width="150" data-offset-x="450" style="-webkit-flex: 1 1 300px;"></div>
</div>

<div class="flexbox">
  <div data-expected-width="300px" data-offset-x="150" style="-webkit-flex: 0 0 300px; margin: 0 auto;"></div>
</div>

<!-- margin: auto safe centers, which means it won't overflow to before the start of the flexbox. -->
<div class="flexbox">
  <div data-expected-width="700px" data-offset-x="0" style="-webkit-flex: 0 0 700px; margin: 0 auto;"></div>
</div>

<div class="flexbox">
  <div data-expected-width="600px" data-offset-x="0" style="-webkit-flex: 1 0 300px; margin: 0 auto;"></div>
</div>

<div class="flexbox">
  <div data-expected-width="600" data-offset-x="0" style="-webkit-flex: 4; margin: 0 auto;">
      <div style="width: 100px; height: 100%;"></div>
  </div>
</div>

<div class="flexbox" style="margin: 100px;">
  <div data-expected-width="300" data-offset-x="0" style="-webkit-flex: 1; margin: 0 auto;"></div>
  <div data-expected-width="300" data-offset-x="300" style="-webkit-flex: 1; margin: 0 auto;"></div>
</div>

<div class="flexbox" style="padding: 100px;">
  <div data-expected-width="300" data-offset-x="100" style="-webkit-flex: 1 0 0px; margin: 0 auto;"></div>
  <div data-expected-width="300" data-offset-x="400" style="-webkit-flex: 1 0 0em; margin: 0 auto;"></div>
</div>

<div class="flexbox">
  <div data-expected-width="75" data-offset-x="0" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
  <div data-expected-width="350" data-offset-x="75" style="-webkit-flex: 2 0 0; padding: 0 100px;"></div>
  <div data-expected-width="75" data-offset-x="525" style="-webkit-flex: 1 0 0; margin-left: 100px;"></div>
</div>

</body>
</html>