Untitled

dabblet.css

ul, li, p {
  margin:0;
  padding:0;
  list-style: none;
}

html {
  height:100%;
}

body {
  display: flex;
  align-items: center;
  height: 100%;
}
.list {
  margin: auto;
  width: 50%;
  border: 1px solid red;
  justify-content: center;
}

.list li {
  background: #fc0;
}

.list ul {
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */     
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

    /* 以下Firefox不支持 */
    
    -webkit-justify-content: space-between; 
            justify-content: space-between; 
            
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap; 
}

.list li {
  flex: 1；
}

.list li:nth-child(1) {
   flex: 4;
   background: #f80;
}

.list li:nth-child(2) {
   order: -1;
   background: #f90;
}

.list li:nth-child(3) {
   background: #fa0;
}

.list li:nth-child(4) {
   background: #fb0;
}

.list li:nth-child(5) {
   background: #fc0;
}

dabblet.html

<div class="list">
Flex Container
<ul>
<li><p>Flex Item 1<p>Flex Item 1<p>Flex Item 1
<li>Flex Item 2
<li>Flex Item 3
<li>Flex Item 4
<li>Flex Item 5
</ul>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}