anton.puiu
/
codecademy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
							<!DOCTYPE html>
<html>

<head>
  <title>Flex Justify</title>
  <link href='resources/css/style.css' rel='stylesheet' />
  <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet'>
</head>

<body>
  <h1>Flex Start</h1>
  <div class='container' id='flexstart'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>
  <h1>Flex End</h1>
  <div class='container' id='flexend'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>
  <h1>Center</h1>
  <div class='container' id='center'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>
  <h1>Space Around</h1>
  <div class='container' id='spacearound'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>
  <h1>Space Between</h1>
  <div class='container' id='spacebetween'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>

  <div class='description'>
      <p>The <span class='keyword'>justify-content</span> property of <span class='keyword'>flexbox</span> display type specifies the position alignment of the elements within the container along the direction of the flex. By default, the direction is <span class='keyword'>column</span>, but it can be changed with <span class='keyword'>flex-direction</span> property.</p>
  </div>
</body>

</html>