css flexbox foundation

css-flexbox-foundation.markdown

css flexbox foundation

A Pen by Edward Lance Lorilla on CodePen.

License.

index.html

<div id="container">
<ul id="flex-container">
<li v-for="item in flexContainer" :style="item.itemGrow">
  {{item.name}} 
  <input type="text" v-model="item.itemGrow['flex-grow']">
  </li>
</ul>
</div>

script.js

new Vue({
  el: '#container',
  data:{
    flexContainer: [
      {name: '1', itemGrow: 
      {
        'flex-grow': 2
      }
      },
      {name: '2', itemGrow: 
      {
        'flex-grow': 2
      }
      },
      {name: '3', itemGrow: 
      {
        'flex-grow': 3
      }
      },
      {name: '4', itemGrow: 
      {
        'flex-grow': 4
      }
      },
      {name: '5', itemGrow: 
      {
        'flex-grow': 5
      }
      },
      {name: '6', itemGrow: 
      {
        'flex-grow': 6
      }
      },
      ]
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

style.css

html,body {
height:100%;
}

ul#flex-container {
  display: flex;
list-style-type:none;
margin:0;padding:0;
}

ul li {
  flex-grow: 1;
height:150px;
padding-top:45px;
color:#fff;
font-weight:bold;
font-size:2.2em;
text-align:center;
}

ul li:first-child { background: #c2d775; }
ul li:nth-child(2) { background: #007278; }
ul li:nth-child(3) { background: #c7b600; }
ul li:nth-child(4) { background: #a90077; }
ul li:nth-child(5) { background: #00a378; }
ul li:last-child { background: #00ea72; }

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" />