order,flex-grow,flex-shrink

by Mo Qiao

HTML

<h1>order(越小越靠前)</h1>
<div id='main'>
  <article class="item">article,order:2</article>
  <nav class="item">nav,order:1</nav>
  <aside class="item">aside,order:3</aside>
</div>
<h1>flex-grow</h1>
<div class="container flex-grow">
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">1</div>
</div>
<h1>flex-shrink</h1>
<div class="container flex-shrink">
  <div class="item">flex-shrink:1</div>
  <div class="item">flex-grow:2</div>
  <div class="item">flex-grow:2</div>
  <div class="item">flex-shrink:1</div>
</div>

SCSS

#main {
  display: flex;
}

#main > article {
  flex: 1;
  order: 2;
}

#main > nav {
  width: 200px;
  order: 1;
}

#main > aside {
  width: 200px;
  order: 3;
}

#main>.item {
  padding: 14px;
  background: #F36E65;
  margin: 0 4px;
}

.container {
  display: flex;
  background: #FFF;
}

.flex-grow {
  .item {
    flex-grow: 1;
    background: #F36E65;
    margin: 0 4px;
    padding: 12px 0;
    text-align: center;
  }
  .item:nth-child(3) {
    flex-grow: 2
  }
}

.flex-shrink {
  .item {
    flex-shrink: 1;
    background: #F36E65;
    margin: 0 4px;
    padding: 12px 0;
    text-align: center;
  }
  .item:nth-child(2) {
    flex-grow: 2;
  }
  .item:nth-child(3) {
    flex-grow: 2;
  }
}