Exemplo de Flexbox

Um exemplo de como funciona o Flexbox do CSS3.

by Diego Vieira

HTML

<div class="main">
    <div class="">1</div>
    <div class="">2</div>
    <div class="">3</div>
    <div class="">4</div>
    <div class="">5</div>
    <div class="">6</div>
    <div class="">7</div>
    <div class="">8</div>
    <div class="">9</div>
    <div class="">10</div>
    <div class="">11</div>
    <div class="">12</div>
    <div class="">13</div>
    <div class="">14</div>
    <div class="">15</div>
    <div class="">16</div>
    <div class="">17</div>
    <div class="">18</div>
    <div class="">19</div>
    <div class="">20</div>
    <div class="">21</div>
    <div class="">22</div>
    <div class="">23</div>
    <div class="">24</div>
    <div class="">25</div>
    <div class="">26</div>
    <div class="">27</div>
    <div class="">28</div>
    <div class="">29</div>
    <div class="">30</div>
    <div class="">31</div>
    <div class="">32</div>
    <div class="">33</div>
    <div class="">34</div>
    <div class="">35</div>
    <div class="">36</div>
    <div class="">37</div>
    <div class="">38</div>
    <div class="">39</div>
    <div class="">40</div>
    <div class="">41</div>
    <div class="">42</div>
    <div class="">43</div>
    <div class="">44</div>
    <div class="">45</div>
    <div class="">46</div>
    <div class="">47</div>
    <div class="">48</div>
    <div class="">49</div>
    <div class="">50</div>
    <div class="">51</div>
    <div class="">52</div>
    <div class="">53</div>
    <div class="">54</div>
    <div class="">55</div>
    <div class="">56</div>
    <div class="">57</div>
    <div class="">58</div>
    <div class="">59</div>
    <div class="">60</div>
    <div class="">61</div>
    <div class="">62</div>
    <div class="">63</div>
    <div class="">64</div>
    <div class="">65</div>
    <div class="">66</div>
    <div class="">67</div>
    <div class="">68</div>
    <div class="">69</div>
    <div class="">70</div>
    <div class="">71</div>
    <div class="">72</div>
    <div class="">73</div>
    <div...

CSS

.main {
    width:100%;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;

}

.main div {
    background:#F0F0F0;
    text-align: center;
    border:1px solid #CCC;
    padding: 50px 0;
    -webkit-flex:1 1 auto;
    flex:1 1 auto;
    min-width: 100px;
    max-width: 100%;
    /*
        A propriedade FLEX Ă© uma atalho para a mesma coisa escrita abaixo
        -webkit-flex-basis:auto;
        -webkit-flex-shrink:1;
        -webkit-flex-grow:1;
    */
}

.main div:nth-child(2n){
    background:#FFF;
}