Flexbox - align-content

In this example below you will see how to do a Flexbox - align-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 - align-content</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>ALIGN-ITEMS</h1>
<h2>Esta propiedad alinea los ítems siempre y cuando haya más de una fila de artículos.</h2>
<h3>stretch</h3>
<p>Alineación de los ítems por defecto.</p>
<section class="flex contenedor-stretch ">
	<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>
  <div class="item">
		<h2>Título 4</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
  <div class="item">
    <h2>Título 5</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
</section>

<h3>flex-start</h3>
<p>Alinea los ítems de izquierda a derecha, desde la parte superior del contenedor padre.</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>
   <div class="item">
		<h2>Título 4</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
  <div class="item">
    <h2>Título 5</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
</section>

<h3>flex-end</h3>
<p>Alinea los ítems de izquierda a derecha, desde la parte inferior del contenedor padre.</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>
   <div class="item">
		<h2>Título 4</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
  <div class="item">
    <h2>Título 5</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
</section>

<h3>space-around</h3>
<p>Alinea los ítems en proporción del contenedor padre, no ocupa el 100%.</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>
   <div class="item">
		<h2>Título 4</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
  <div class="item">
    <h2>Título 5</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
</section>

<h3>space-between</h3>
<p>Alinea los ítems en proporción del contenedor padre, ocupa el 100%.</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>
   <div class="item">
		<h2>Título 4</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
  <div class="item">
    <h2>Título 5</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
	</div>
</section>
  
  

</body>

</html>

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

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

section[class*="contenedor"] {
  min-height: 450px;
}

.contenedor-stretch {
  align-content: stretch;
  align-items: baseline;
}

.contenedor-center {
  align-content: center;
  flex-wrap: wrap;
  align-items: baseline;
}

.contenedor-flex-start {
  align-content: flex-start;
  flex-wrap: wrap;
  align-items: baseline;
}

.contenedor-flex-end {
  align-content: flex-end;
  flex-wrap: wrap;
  align-items: baseline;
}

.contenedor-space-around {
  align-content: space-around;
  flex-wrap: wrap;
  align-items: baseline;
}

.contenedor-space-between {
  align-content: space-between;
  flex-wrap: wrap;
  align-items: baseline;
}

.item {
  padding: 15px;
  width: 30%;
}
.item:first-child {
  background: #00D269;
}
.item:nth-child(2) {
  background: #00A854;
}
.item:nth-child(3) {
  background: #008040;
}
.item:nth-child(4) {
  background: #00592D;
}
.item:nth-child(5) {
  background: #004A25;
}

Comments