Flexbox - justify-content

In this example below you will see how to do a Flexbox - justify-content with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 01luisrene, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 01luisrene ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Flexbox - justify-content</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>JUSTIFY-CONTENT</h1>
<h2>Esta propiedad se encarga de la alineación de los ítems a lo largo del eje X.</h2>
<h3>flex-start</h3>
<p>Alinea los ítems de izquierda a derecha (default).</p>
<section class="flex contenedor-flex-start">
	<div class="item">
		<h2>Título 1</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
	<div class="item">
		<h2>Título 2</h2>
		<p>Lorem ipsum dolor sit amet, consectetur.</p>
	</div>
	<div class="item">
		<h2>Título 3</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	</div>
</section>

<h3>flex-end</h3>
<p>Alinea los ítems de derecha a izquierda.</p>
<section class="flex contenedor-flex-end">
	<div class="item">
		<h2>Título 1</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
	<div class="item">
		<h2>Título 2</h2>
		<p>Lorem ipsum dolor sit amet, consectetur.</p>
	</div>
	<div class="item">
		<h2>Título 3</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	</div>
</section>

<h3>center</h3>
<p>Centra los ítems.</p>
<section class="flex contenedor-center">
	<div class="item">
		<h2>Título 1</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
	<div class="item">
		<h2>Título 2</h2>
		<p>Lorem ipsum dolor sit amet, consectetur.</p>
	</div>
	<div class="item">
		<h2>Título 3</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	</div>
</section>

<h3>space-around</h3>
<p>Alinea los ítems dejando margenes por ambos extremos del contenedor padre.</p>
<section class="flex contenedor-space-around">
	<div class="item">
		<h2>Título 1</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
	<div class="item">
		<h2>Título 2</h2>
		<p>Lorem ipsum dolor sit amet, consectetur.</p>
	</div>
	<div class="item">
		<h2>Título 3</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	</div>
</section>

<h3>space-between</h3>
<p>Alinea los ítems ocupando el 100% del contenedor padre.</p>
<section class="flex contenedor-space-between">
	<div class="item">
		<h2>Título 1</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
	<div class="item">
		<h2>Título 2</h2>
		<p>Lorem ipsum dolor sit amet, consectetur.</p>
	</div>
	<div class="item">
		<h2>Título 3</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	</div>
</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/01luisrene/flexbox-justify-content-yPPxRd */
body {
  padding: 1.5em;
}

.flex {
  display: flex;
  border: thin solid #ABA8A8;
}

.contenedor-flex-start {
  justify-content: flex-start;
}

.contenedor-flex-end {
  justify-content: flex-end;
}

.contenedor-center {
  justify-content: center;
}

.contenedor-space-around {
  justify-content: space-around;
}

.contenedor-space-between {
  justify-content: space-between;
}

.item {
  padding: 15px;
}
.item:first-child {
  background: #00D269;
}
.item:nth-child(2) {
  background: #00A854;
}
.item:nth-child(3) {
  background: #008040;
}

Comments