luismartinezs/flexbox-tests.html

## flexbox-tests.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .flex-container {
        padding: 0;
        margin: auto;
        /* width: 100%; */
        list-style: none;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
      }

      .flex-item {
        background: tomato;
        /* padding: 5px; */
        width: 100px;
        height: 150px;
        margin-top: 10px;
        border: 2px solid rgb(155, 46, 26);
        line-height: 150px;
        color: white;
        font-weight: bold;
        font-size: 1.5em;
        text-align: center;
      }

      /**
      - Setting one of the flex to a value while all others are initial, makes the item fill as much space as possible
      - Setting more than 1 value of flex growth distributes remaining space in proportion of the factor
      - Flex-shrink: if container width is smaller than elements, flex-shrink at what rate each element shrinks
      - Flex-shrink: 0 does not shrink the element
      - flex-basis: sets the dimension of the element. flex-basis takes priority over width or height
      - Flex-basis: auto uses the dimensions of the item, width and height
      - If we set flex-grow to 0 for all, the items don't fill all the space necessarily, the flexbox will have a max size depending on the size of its items
      */

      .item-1 {
        flex: 0 1 auto;
      }

      .item-2 {
        flex: 0 1 auto;
      }

      .item-3 {
        flex: 0 1 auto;
      }

      .item-4 {
        flex: 0 1 auto;
      }

      .item-5 {
        flex: 0 1 auto;
      }

      .item-6 {
        flex: 0 1 auto;
      }

    </style>
  </head>
  <body>
    <ul class="flex-container">
      <li class="flex-item item-1">1</li>
      <li class="flex-item item-2">2</li>
      <li class="flex-item item-3">3</li>
      <li class="flex-item item-4">4</li>
      <li class="flex-item item-5">5</li>
      <li class="flex-item item-6">6</li>
    </ul>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
	.flex-container {
	padding: 0;
	margin: auto;
	/* width: 100%; */
	list-style: none;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	}

	.flex-item {
	background: tomato;
	/* padding: 5px; */
	width: 100px;
	height: 150px;
	margin-top: 10px;
	border: 2px solid rgb(155, 46, 26);
	line-height: 150px;
	color: white;
	font-weight: bold;
	font-size: 1.5em;
	text-align: center;
	}

	/**
	- Setting one of the flex to a value while all others are initial, makes the item fill as much space as possible
	- Setting more than 1 value of flex growth distributes remaining space in proportion of the factor
	- Flex-shrink: if container width is smaller than elements, flex-shrink at what rate each element shrinks
	- Flex-shrink: 0 does not shrink the element
	- flex-basis: sets the dimension of the element. flex-basis takes priority over width or height
	- Flex-basis: auto uses the dimensions of the item, width and height
	- If we set flex-grow to 0 for all, the items don't fill all the space necessarily, the flexbox will have a max size depending on the size of its items
	*/

	.item-1 {
	flex: 0 1 auto;
	}

	.item-2 {
	flex: 0 1 auto;
	}

	.item-3 {
	flex: 0 1 auto;
	}

	.item-4 {
	flex: 0 1 auto;
	}

	.item-5 {
	flex: 0 1 auto;
	}

	.item-6 {
	flex: 0 1 auto;
	}

	</style>
	</head>
	<body>
	<ul class="flex-container">
	<li class="flex-item item-1">1</li>
	<li class="flex-item item-2">2</li>
	<li class="flex-item item-3">3</li>
	<li class="flex-item item-4">4</li>
	<li class="flex-item item-5">5</li>
	<li class="flex-item item-6">6</li>
	</ul>
	</body>
	</html>