Skip to main content

Flex Demo

Flex Demo

Aqui tienes una aplicación gráfica de lsa propiedades de Flexbox

Código HTML​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="principal">
      <h2>Properties for the flex container</h2>
      <div class="control">
        <h4>
          <a href="<http://w3.unpocodetodo.info/css3/flex-direction.php>"
            >flex-direction</a
          >
          <small>( property of the flex container )</small>
        </h4>
        <!--flex-direction: row | row-reverse | column | column-reverse;-->
        <div class="radio">
          <input
            name="flex-direction"
            type="radio"
            class="flex-direction"
            id="R11"
            value="row"
            checked
          /><label for="R11">row:</label>
          <input
            name="flex-direction"
            type="radio"
            class="flex-direction"
            id="R12"
            value="row-reverse"
          /><label for="R12">row-reverse:</label>
          <input
            name="flex-direction"
            type="radio"
            class="flex-direction"
            id="R13"
            value="column"
          /><label for="R13">column:</label>
          <input
            name="flex-direction"
            type="radio"
            class="flex-direction"
            id="R14"
            value="column-reverse"
          /><label for="R14">column-reverse:</label>
        </div>
      </div>
      <div class="flex-container" id="direction">
        <div class="item" data-color="2a80b9">
          <p>1</p>
        </div>
        <div class="item" data-color="8f44ad">
          <p>2</p>
        </div>
        <div class="item" data-color="16a086">
          <p>3</p>
        </div>
        <div class="item" data-color="f1c40f">
          <p>4</p>
        </div>
        <div class="item" data-color="e77e23">
          <p>5</p>
        </div>
      </div>

      <div class="control">
        <h4>
          <a href="<http://w3.unpocodetodo.info/css3/flex-wrap.php>">flex-wrap</a>
          <small>( property of the flex container )</small>
        </h4>
        <!--nowrap | wrap | wrap-reverse;-->
        <div class="radio">
          <input
            name="flex-wrap"
            type="radio"
            class="flex-wrap"
            id="R21"
            value="nowrap"
            checked
          /><label for="R21">nowrap:</label>
          <input
            name="flex-wrap"
            type="radio"
            class="flex-wrap"
            id="R22"
            value="wrap"
          /><label for="R22">wrap:</label>
          <input
            name="flex-wrap"
            type="radio"
            class="flex-wrap"
            id="R23"
            value="wrap-reverse"
          /><label for="R23">wrap-reverse:</label>
        </div>
      </div>
      <div class="flex-container" id="wrap">
        <div class="item" data-color="2a80b9">
          <p>1</p>
        </div>
        <div class="item" data-color="8f44ad">
          <p>2</p>
        </div>
        <div class="item" data-color="16a086">
          <p>3</p>
        </div>
        <div class="item" data-color="f1c40f">
          <p>4</p>
        </div>
        <div class="item" data-color="e77e23">
          <p>5</p>
        </div>
      </div>

      <div class="control">
        <h4>
          <a href="<http://w3.unpocodetodo.info/css3/flex-align-items.php>"
            >align-items</a
          >
          <small>( property of the flex container )</small>
        </h4>
        <!-- flex-start | flex-end | center | baseline | stretch;-->
        <div class="radio">
          <input
            name="flex-align-items"
            type="radio"
            class="flex-align-items"
            id="R31"
            value="align-items-start"
          /><label for="R31">flex-start:</label>
          <input
            name="flex-align-items"
            type="radio"
            class="flex-align-items"
            id="R32"
            value="align-items-end"
          /><label for="R32">flex-end:</label>
          <input
            name="flex-align-items"
            type="radio"
            class="flex-align-items"
            id="R33"
            value="align-items-center"
          /><label for="R33">center:</label>
          <input
            name="flex-align-items"
            type="radio"
            class="flex-align-items"
            id="R34"
            value="align-items-baseline"
          /><label for="R34">baseline:</label>
          <input
            name="flex-align-items"
            type="radio"
            class="flex-align-items"
            id="R35"
            value="align-items-stretch"
            checked
          /><label for="R35">stretch:</label>
        </div>
      </div>
      <div class="flex-container" id="align">
        <div class="item" data-color="2a80b9">
          <p>1</p>
        </div>
        <div class="item" data-color="8f44ad">
          <p>2</p>
        </div>
        <div class="item" data-color="16a086">
          <p style="font-size: 50px">3</p>
        </div>
        <div class="item" data-color="f1c40f">
          <p>4</p>
        </div>
        <div class="item" data-color="e77e23">
          <p>5</p>
        </div>
      </div>

      <div class="control">
        <h4>
          <a href="<http://w3.unpocodetodo.info/css3/flex-justify-content.php>"
            >justify-content</a
          >
          <small>( property of the flex container )</small>
        </h4>
        <!--justify-content: flex-start | flex-end | center | space-between | space-around; -->
        <div class="radio">
          <input
            name="justify-content"
            type="radio"
            class="justify-content"
            id="R41"
            value="justify-start"
            checked
          /><label for="R41">flex-start:</label>
          <input
            name="justify-content"
            type="radio"
            class="justify-content"
            id="R42"
            value="justify-end"
          /><label for="R42">flex-end:</label>
          <input
            name="justify-content"
            type="radio"
            class="justify-content"
            id="R43"
            value="justify-space-between"
          /><label for="R43">space-between:</label>
          <input
            name="justify-content"
            type="radio"
            class="justify-content"
            id="R44"
            value="justify-center"
          /><label for="R44">center:</label>
          <input
            name="justify-content"
            type="radio"
            class="justify-content"
            id="R45"
            value="justify-space-around"
          /><label for="R45">space-around:</label>
        </div>
      </div>
      <div class="flex-container" id="justify">
        <div class="item" data-color="2a80b9">
          <p>1</p>
        </div>
        <div class="item" data-color="8f44ad">
          <p>2</p>
        </div>
        <div class="item" data-color="16a086">
          <p>3</p>
        </div>
        <div class="item" data-color="f1c40f">
          <p>4</p>
        </div>
        <div class="item" data-color="e77e23">
          <p>5</p>
        </div>
      </div>

      <!--<p>En <strong>Google Chrome</strong> y <strong>Opera</strong>: problemas al cambiar dinamicamente entre <code>justify-content:space-between</code> y <code>justify-content:space-around</code> </p>-->

      <div class="control">
        <h4>
          <a href="<http://w3.unpocodetodo.info/css3/flex-align-content.php>"
            >align-content</a
          >
          <small>( property of the flex container )</small>
        </h4>
        <!--justify-content: flex-start | flex-end | center | space-between | space-around; -->
        <div class="radio">
          <input
            name="align-content"
            type="radio"
            class="align-content"
            id="R51"
            value="align-content-start"
          /><label for="R51">flex-start:</label>
          <input
            name="align-content"
            type="radio"
            class="align-content"
            id="R52"
            value="align-content-end"
          /><label for="R52">flex-end:</label>
          <input
            name="align-content"
            type="radio"
            class="align-content"
            id="R53"
            value="align-content-center"
          /><label for="R53">center:</label>
          <input
            name="align-content"
            type="radio"
            class="align-content"
            id="R54"
            value="align-content-space-between"
          /><label for="R54">space-between:</label>
          <input
            name="align-content"
            type="radio"
            class="align-content"
            id="R55"
            value="align-content-space-around"
          /><label for="R55">space-around:</label>
          <input
            name="align-content"
            type="radio"
            class="align-content"
            id="R56"
            value="align-content-stretch"
            checked
          /><label for="R56">stretch:</label>
        </div>
      </div>
      <div class="flex-container" id="alignContent">
        <div class="item" data-color="1bbc9d">
          <p>1</p>
        </div>
        <div class="item" data-color="2fcc71">
          <p>2</p>
        </div>
        <div class="item" data-color="3598dc">
          <p>3</p>
        </div>
        <div class="item" data-color="9c59b8">
          <p>4</p>
        </div>
        <div class="item" data-color="34495e">
          <p>5</p>
        </div>
        <div class="item" data-color="16a086">
          <p>6</p>
        </div>
        <div class="item" data-color="27ae61">
          <p>7</p>
        </div>
        <div class="item" data-color="2a80b9">
          <p>8</p>
        </div>
        <div class="item" data-color="8f44ad">
          <p>9</p>
        </div>
        <div class="item" data-color="2d3e50">
          <p>10</p>
        </div>
        <div class="item" data-color="f1c40f">
          <p>11</p>
        </div>
        <div class="item" data-color="e77e23">
          <p>12</p>
        </div>
        <div class="item" data-color="e84c3d">
          <p>13</p>
        </div>
        <div class="item" data-color="ecf0f1">
          <p>14</p>
        </div>
        <div class="item" data-color="96a6a6">
          <p>15</p>
        </div>
        <div class="item" data-color="f49c14">
          <p>16</p>
        </div>
        <div class="item" data-color="d55401">
          <p>17</p>
        </div>
        <div class="item" data-color="c1392b">
          <p>18</p>
        </div>
        <div class="item" data-color="bec3c7">
          <p>19</p>
        </div>
        <div class="item" data-color="808b8d">
          <p>20</p>
        </div>
      </div>
    </div>

    <!-- propiedades de los items -->

    <div class="principal">
      <h2>Properties for the flex items</h2>
      <div class="control">
        <h4>
          <a href="<http://w3.unpocodetodo.info/css3/flex-align-self.php>"
            >align-self</a
          >
          <small>( property for flex items )</small>
        </h4>
        <!--auto | flex-start | flex-end | center | baseline | stretch -->
        <div class="radio">
          <input
            name="align-self"
            type="radio"
            class="align-self"
            id="R61"
            value="align-self-auto"
            checked
          /><label for="R61">auto:</label>
          <input
            name="align-self"
            type="radio"
            class="align-self"
            id="R62"
            value="align-self-start"
          /><label for="R62">flex-start:</label>
          <input
            name="align-self"
            type="radio"
            class="align-self"
            id="R63"
            value="align-self-end"
          /><label for="R63">flex-end:</label>
          <input
            name="align-self"
            type="radio"
            class="align-self"
            id="R64"
            value="align-self-center"
          /><label for="R64">center:</label>
          <input
            name="align-self"
            type="radio"
            class="align-self"
            id="R65"
            value="align-self-baseline"
          /><label for="R65">baseline:</label>
          <input
            name="align-self"
            type="radio"
            class="align-self"
            id="R66"
            value="align-self-stretch"
          /><label for="R66">stretch:</label>
        </div>
      </div>
      <div class="flex-container align-items-center" id="FCI1">
        <div class="item" data-color="f49c14">
          <p>1</p>
        </div>
        <div class="item" data-color="d55401">
          <p>2</p>
        </div>
        <div class="item" data-color="c1392b" id="alignSelf">
          <p style="font-size: 50px">3</p>
        </div>
        <div class="item" data-color="bec3c7">
          <p>4</p>
        </div>
        <div class="item" data-color="808b8d">
          <p>5</p>
        </div>
      </div>

      <div class="control">
        <h4>
          <a href="<http://w3.unpocodetodo.info/css3/flex-abreviado.php#flexGrow>"
            >flex-grow</a
          >
          <small>( property for flex items )</small>
        </h4>
        <!--auto | flex-start | flex-end | center | baseline | stretch -->
        <div class="radio">
          <span class="nbsp"
            ><label for="R71">elemento 1: </label
            ><input type="number" class="flex-grow" id="R71" min="0"
          /></span>
          <span class="nbsp"
            ><label for="R72">elemento 2: </label
            ><input type="number" class="flex-grow" id="R72" min="0"
          /></span>
          <span class="nbsp"
            ><label for="R73">elemento 3: </label
            ><input type="number" class="flex-grow" id="R73" min="0"
          /></span>
          <span class="nbsp"
            ><label for="R74">elemento 4: </label
            ><input type="number" class="flex-grow" id="R74" min="0"
          /></span>
          <span class="nbsp"
            ><label for="R75">elemento 5: </label
            ><input type="number" class="flex-grow" id="R75" min="0"
          /></span>
        </div>
      </div>
      <div class="flex-container align-items-center" id="FCI2">
        <div class="item" id="itemR71" data-color="f49c14">
          <p>1</p>
        </div>
        <div class="item" id="itemR72" data-color="d55401">
          <p>2</p>
        </div>
        <div class="item" id="itemR73" data-color="c1392b">
          <p>3</p>
        </div>
        <div class="item" id="itemR74" data-color="bec3c7">
          <p>4</p>
        </div>
        <div class="item" id="itemR75" data-color="808b8d">
          <p>5</p>
        </div>
      </div>

      <div class="control">
        <h4>
          <a
            href="<http://w3.unpocodetodo.info/css3/flex-abreviado.php#flexShrink>"
            >flex-shrink</a
          >
          <small>( property for flex items )</small>
        </h4>
        <!--auto | flex-start | flex-end | center | baseline | stretch -->
        <div class="radio">
          <span class="nbsp"
            ><label for="R81">elemento 1: </label
            ><input type="number" class="flex-shrink" id="R81" min="0"
          /></span>
          <span class="nbsp"
            ><label for="R82">elemento 2: </label
            ><input type="number" class="flex-shrink" id="R82" min="0"
          /></span>
          <span class="nbsp"
            ><label for="R83">elemento 3: </label
            ><input type="number" class="flex-shrink" id="R83" min="0"
          /></span>
          <span class="nbsp"
            ><label for="R84">elemento 4: </label
            ><input type="number" class="flex-shrink" id="R84" min="0"
          /></span>
          <span class="nbsp"
            ><label for="R85">elemento 5: </label
            ><input type="number" class="flex-shrink" id="R85" min="0"
          /></span>
        </div>
      </div>
      <div class="flex-container align-items-center" id="FCI3">
        <div class="item" id="itemR81" data-color="f49c14">
          <p>1</p>
        </div>
        <div class="item" id="itemR82" data-color="d55401">
          <p>2</p>
        </div>
        <div class="item" id="itemR83" data-color="c1392b">
          <p>3</p>
        </div>
        <div class="item" id="itemR84" data-color="bec3c7">
          <p>4</p>
        </div>
        <div class="item" id="itemR85" data-color="808b8d">
          <p>5</p>
        </div>
      </div>

      <div class="control">
        <h4>
          <a href="<http://w3.unpocodetodo.info/css3/flex-abreviado.php>">flex</a>
          <small>( property for flex items )</small>
        </h4>
        <!--auto | flex-start | flex-end | center | baseline | stretch -->
        <p>.item { flex: flex-grow [flex-shrink] [flex-basis]; }</p>
        <table id="flexBasis">
          <tr>
            <td>elemento 1</td>
            <td>elemento 2</td>
          </tr>
          <tr>
            <td>
              <input
                type="number"
                class="flex-basis"
                id="B1"
                min="0"
                value="50"
              /><label for="B1">flex-basis %</label>
            </td>
            <td>
              <input
                type="number"
                class="flex-basis"
                id="B2"
                min="0"
                value="50"
              /><label for="B2">flex-basis %</label>
            </td>
          </tr>
          <tr>
            <td>
              <input
                type="number"
                class="flex-basis-grow"
                id="G1"
                min="0"
                value="0"
              /><label for="G1">flex-grow</label>
            </td>
            <td>
              <input
                type="number"
                class="flex-basis-grow"
                id="G2"
                min="0"
                value="0"
              /><label for="G2">flex-grow</label>
            </td>
          </tr>
          <tr>
            <td>
              <input
                type="number"
                class="flex-basis-shrink"
                id="S1"
                min="0"
                value="0"
              /><label for="S1">flex-shrink</label>
            </td>
            <td>
              <input
                type="number"
                class="flex-basis-shrink"
                id="S2"
                min="0"
                value="0"
              /><label for="S2">flex-shrink</label>
            </td>
          </tr>
        </table>
      </div>

      <div class="flex-container align-items-center" id="FCI4">
        <div class="item" id="item1" data-color="f49c14">
          <p>1</p>
        </div>
        <div class="item" id="item2" data-color="d55401">
          <p>2</p>
        </div>
      </div>

      <div class="control">
        <h4>
          <a href="<http://w3.unpocodetodo.info/css3/flex-order.php>">order</a>
          <small>( property for flex items )</small>
        </h4>
        <!--auto | flex-start | flex-end | center | baseline | stretch -->
        <div class="radio">
          <span class="nbsp"
            ><label for="R91">elemento 1: </label
            ><input type="number" class="flex-order" id="R91" min="0"
          /></span>
          <span class="nbsp"
            ><label for="R92">elemento 2: </label
            ><input type="number" class="flex-order" id="R92" min="0"
          /></span>
          <span class="nbsp"
            ><label for="R93">elemento 3: </label
            ><input type="number" class="flex-order" id="R93" min="0"
          /></span>
          <span class="nbsp"
            ><label for="R94">elemento 4: </label
            ><input type="number" class="flex-order" id="R94" min="0"
          /></span>
          <span class="nbsp"
            ><label for="R95">elemento 5: </label
            ><input type="number" class="flex-order" id="R95" min="0"
          /></span>
        </div>
      </div>
      <div class="flex-container align-items-center" id="FCI5">
        <div class="item" id="orderR91" data-color="f49c14">
          <p>1</p>
        </div>
        <div class="item" id="orderR92" data-color="d55401">
          <p>2</p>
        </div>
        <div class="item" id="orderR93" data-color="c1392b">
          <p>3</p>
        </div>
        <div class="item" id="orderR94" data-color="bec3c7">
          <p>4</p>
        </div>
        <div class="item" id="orderR95" data-color="808b8d">
          <p>5</p>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Código CSS​

.flex-container.row {
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flex-container.row-reverse {
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.flex-container.column {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-container.column-reverse {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column-reverse;
}

/*flex-wrap: nowrap | wrap | wrap-reverse;*/

.flex-container.nowrap {
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.flex-container.wrap {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-container.wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

/*align-items: flex-start | flex-end | center | baseline | stretch;*/

.flex-container.align-items-start {
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.flex-container.align-items-end {
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.flex-container.align-items-center {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex-container.align-items-baseline {
  webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

.flex-container.align-items-stretch {
  webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

/*justify-content: flex-start | flex-end | center | space-between | space-around;*/

.flex-container.justify-start {
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.flex-container.justify-end {
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.flex-container.justify-center {
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flex-container.justify-space-between {
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.flex-container.justify-space-around {
  -webkit-justify-content: space-around;
  -ms-flex-pack: justify;
  justify-content: space-around;
}

/*align-content: flex-start | flex-end | center | space-between | space-around | stretch;*/

.flex-container.align-content-start {
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

.flex-container.align-content-end {
  -webkit-align-content: flex-end;
  -ms-flex-line-pack: end;
  align-content: flex-end;
}

.flex-container.align-content-center {
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
}

.flex-container.align-content-space-between {
  -webkit-align-content: space-between;
  -ms-flex-line-pack: justify;
  align-content: space-between;
}

.flex-container.align-content-space-around {
  -webkit-align-content: space-around;
  -ms-flex-line-pack: justify;
  /*distribute;*/
  align-content: space-around;
}

.flex-container.align-content-stretch {
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
}

/*align-self: auto | flex-start | flex-end | center | baseline | stretch;*/

.item.align-self-auto {
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}

.item.align-self-start {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.item.align-self-end {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.item.align-self-center {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.item.align-self-baseline {
  -webkit-align-self: baseline;
  -ms-flex-item-align: baseline;
  align-self: baseline;
}

.item.align-self-stretch {
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
}

.item.flex-grow1 {
  flex-grow: 1;
}

.item.flex-grow2 {
  flex-grow: 2;
}

.item.flex-grow3 {
  flex-grow: 3;
}

.item.flex-grow4 {
  flex-grow: 4;
}
html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  color: #ddd;
  font-size: 14px;
  font-family: Verdana, Geneva, sans-serif;
  background-color: #333;
}
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.principal {
  width: calc(50% - 40px);
  min-width: 525px;
  margin: 0 20px 20px 20px;
  float: left;
}
.radio {
  margin-bottom: 20px;
}
label {
  line-height: 200%;
}
input[type="radio"] {
  color: white;
}
input[type="radio"]:checked + label {
  color: orange;
}
input[type="number"] {
  width: 40px;
  margin-right: 0.5em;
}
h1 {
  font-size: 200%;
  margin: 20px;
}
h2 {
  font-size: 180%;
  margin: 0px;
}
h4 a {
  font-variant: small-caps;
  font-size: 120%;
  color: #ddd;
  text-decoration: none;
}
h4 small {
  font-variant: normal;
  font-size: 80%;
  font-weight: normal;
  color: #57bcdb;
}
table {
  width: 100%;
  margin-bottom: 1em;
}
table td {
  width: 50%;
  padding: 3px;
}
.principal:last-of-type h4 small {
  color: #ff8080;
}
.flex-container {
  border: 1px solid #555;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 20px;
  width: 100%;
}
.item {
  margin: 0;
  display: inherit;
  padding: 10px;
  width: 100px;
  height: 100px;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.item p {
  width: 100%;
  text-align: center;
  color: #fff;
}
#direction .item {
  flex-wrap: wrap;
}
/*#wrap .item{ height:auto;}*/
#wrap {
  width: 400px;
}
#align .item {
  height: auto;
  height: auto;
  flex-wrap: wrap;
}
#align {
  height: 300px;
}
#justify {
  margin: 20px 0;
  padding: 20px 0;
}
#alignContent {
  flex-wrap: wrap;
  height: 600px;
}
#alignContent .item {
  height: auto;
}
#FCI1 {
  height: 300px;
}
#FCI1 .item {
  height: auto;
}
#FCI3 .item {
  width: 25%;
}
#FCI4 .item {
  width: 50%;
}
#FCI5 .item {
  width: 20%;
}
.nbsp {
  white-space: nowrap;
}

/* @media only screen and (max-width:1100px){.principal{ width:calc(100% - 40px);}} */
@media only screen and (max-width: 1200px) {
  .principal {
    width: calc(100% - 40px);
  }
}
@media only screen and (max-width: 580px) {
  .item {
    width: 50px;
    height: 50px;
  }
  .principal {
    width: calc(100% - 40px);
    min-width: initial;
  }
  .flex-container {
    width: 100%;
    min-width: initial;
  }
  #wrap {
    width: 200px;
  }
}

.item-content {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  border: 1px solid #333;
}

body {
  padding-top: 35px;
}

Código JavaScript

console.clear();
var log = console.log.bind(console);

//
// Code by Gabi
// ===========================================================================
function changeFlex(e, t) {
  for (
    var n = document.querySelectorAll("." + e),
      l = document.querySelector("#" + t),
      r = 0;
    r < n.length;
    r++
  )
    n[r].addEventListener(
      "change",
      function () {
        var e = this.value;
        l.setAttribute("class", "flex-container " + e);
      },
      !1
    );
}

function changeItemFlex(e, t) {
  for (
    var n = document.querySelectorAll("." + e),
      l = document.querySelector("#" + t),
      r = 0;
    r < n.length;
    r++
  )
    n[r].addEventListener(
      "change",
      function () {
        var e = this.value;
        l.setAttribute("class", "item " + e);
      },
      !1
    );
}

function changeFlexBasis(e, t) {
  var n = isNaN(e.value) ? 0 : e.value;
  (document.querySelector("#" + t).style.WebkitFlexBasis = n + "%"),
    (document.querySelector("#" + t).style.flexBasis = n + "%");
}

function changeFlexGrow(e, t) {
  var n = isNaN(e.value) ? 0 : e.value;
  (document.querySelector("#" + t).style.WebkitFlexGrow = n),
    (document.querySelector("#" + t).style.flexGrow = n);
}

function changeFlexShrink(e, t) {
  var n = isNaN(e.value) ? 0 : e.value;
  (document.querySelector("#" + t).style.WebkitFlexShrink = n),
    (document.querySelector("#" + t).style.flexShrink = n);
}

function changeFlexOrder(e, t) {
  var n = isNaN(e.value) ? 0 : e.value;
  (document.querySelector("#" + t).style.WebkitOrder = n),
    (document.querySelector("#" + t).style.order = n);
}

function changeAll(e, t, n, l) {
  changeFlexBasis(e, l), changeFlexGrow(t, l), changeFlexShrink(n, l);
}
for (
  var items = document.querySelectorAll(".item"), i = 0;
  i < items.length;
  i++
)
  if (items[i].hasAttribute("data-color")) {
    var color = items[i].getAttribute("data-color");
    items[i].style.backgroundColor = "#" + color;
  }
for (
  var flexO = document.querySelectorAll(".flex-order"), o = 0;
  o < flexO.length;
  o++
)
  flexO[o].addEventListener(
    "change",
    function () {
      changeFlexOrder(this, "order" + this.id);
    },
    !1
  );
changeFlex("flex-direction", "direction"),
  changeFlex("flex-wrap", "wrap"),
  changeFlex("flex-align-items", "align"),
  changeFlex("justify-content", "justify"),
  changeFlex("align-content", "alignContent"),
  changeItemFlex("align-self", "alignSelf");
for (
  var flexGrow = document.querySelectorAll(".flex-grow"), i = 0;
  i < flexGrow.length;
  i++
)
  flexGrow[i].addEventListener("change", function () {
    var e = "item" + this.id;
    changeFlexGrow(this, e);
  });
for (
  var flexShrink = document.querySelectorAll(".flex-shrink"), j = 0;
  j < flexShrink.length;
  j++
)
  flexShrink[j].addEventListener("change", function () {
    var e = "item" + this.id;
    changeFlexShrink(this, e);
  });
var B1 = document.querySelector("#B1"),
  G1 = document.querySelector("#G1"),
  S1 = document.querySelector("#S1"),
  B2 = document.querySelector("#B2"),
  G2 = document.querySelector("#G2"),
  S2 = document.querySelector("#S2");
B1.addEventListener("change", function () {
  changeAll(B1, G1, S1, "item1");
}),
  G1.addEventListener("change", function () {
    changeAll(B1, G1, S1, "item1");
  }),
  S1.addEventListener("change", function () {
    changeAll(B1, G1, S1, "item1");
  }),
  B2.addEventListener("change", function () {
    changeAll(B2, G2, S2, "item2");
  }),
  G2.addEventListener("change", function () {
    changeAll(B2, G2, S2, "item2");
  }),
  S2.addEventListener("change", function () {
    changeAll(B2, G2, S2, "item2");
  });

//
// ANIMATIONS
// ===========================================================================
var inputs = document.querySelectorAll("input");
var nodes = document.querySelectorAll(".item");
var total = nodes.length;
var dirty = true;
var time = 0.9;
var omega = 12;
var zeta = 0.9;
var boxes = [];

for (var i = 0; i < total; i++) {
  var node = nodes[i];
  var width = node.offsetWidth;
  var height = node.offsetHeight;
  var color = "transparent";

  // Need another element to animate width & height... use clone instead of editing HTML
  var content = node.cloneNode(true);
  content.classList.add("item-content");

  TweenLite.set(node, { x: "+=0" });
  TweenLite.set(content, { width, height });
  TweenLite.set([node, node.children], { backgroundColor: color, color });

  node.appendChild(content);

  var transform = node._gsTransform;
  var x = node.offsetLeft;
  var y = node.offsetTop;

  boxes[i] = { content, height, node, transform, width, x, y };
}

for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("change", layout);
}

window.addEventListener("resize", () => {
  dirty = true;
});

TweenLite.ticker.addEventListener("tick", () => dirty && layout());

layout();

function layout() {
  dirty = false;

  for (var i = 0; i < total; i++) {
    var box = boxes[i];

    var lastX = box.x;
    var lastY = box.y;

    var lastW = box.width;
    var lastH = box.height;

    var width = (box.width = box.node.offsetWidth);
    var height = (box.height = box.node.offsetHeight);

    box.x = box.node.offsetLeft;
    box.y = box.node.offsetTop;

    if (lastX !== box.x || lastY !== box.y) {
      var x = box.transform.x + lastX - box.x;
      var y = box.transform.y + lastY - box.y;

      // Tween to 0 to remove the transforms
      TweenLite.set(box.node, { x, y });
      TweenLite.to(box.node, time, { x: 0, y: 0, ease });
    }

    if (lastW !== box.width || lastH !== box.height) {
      TweenLite.to(box.content, time, {
        autoRound: false,
        width,
        height,
        ease,
      });
    }
  }
}

function ease(progress) {
  var beta = Math.sqrt(1.0 - zeta * zeta);
  progress = 1 - Math.cos((progress * Math.PI) / 2);
  progress =
    (1 / beta) *
    Math.exp(-zeta * omega * progress) *
    Math.sin(beta * omega * progress + Math.atan(beta / zeta));

  return 1 - progress;
}