FLEX-BASIS

Run
<!doctype html>
	<head>
		<style>
			/* CSS comes here */
            .flex-container {
              display: flex;
            }
            .flex-item {
              height: 150px;
              width: 150px;
              margin: 5px;
              font-size: 30px;
              padding: 10px;
            }
            .maroon {
              background-color: maroon;
              color: white;
            }
            /* The flex-basis Property */
            .item-1 {
              flex-basis: 250px;
            }
            
            .item-2 {
              flex-basis: 30%;
            }
            
            .item-3 {
              flex-basis: auto;
            }
            
            /* Google Fonts Setup */
            body {
              font-family: "Roboto", sans-serif;
            }

		</style>
		<title>My Favorite Sport</title>
	</head>
	<body>
  <div class="flex-container">
    <div class="flex-item item-1 maroon">1</div>
    <div class="flex-item item-2 maroon">2</div>
    <div class="flex-item item-3 maroon">3</div>
    <div class="flex-item item-4 maroon">4</div>
  </div>
</body>
</html>