Diferencia entre alinear contenido y alinear elementos

Tanto align-content como align-items funcionan en el eje transversal. El eje transversal en flexbox depende de la dirección flexible y corre perpendicular al eje principal, si la dirección flexible es fila o fila inversa, entonces la cruz -el eje es vertical, si la dirección de flexión es columna o columna inversa, entonces el eje transversal es horizontal.

alinear-contenido	alinear elementos
Esta propiedad de flex-box alinea las líneas flexibles entre sí a lo largo del eje transversal.	Esta propiedad de flex-box alinea los elementos flexibles dentro de flex-line a lo largo del eje transversal
Esta propiedad funciona solo cuando la propiedad «flex-wrap:» está configurada para envolver	Esta propiedad funciona incluso cuando la propiedad «flex-wrap:» no está configurada para ajustar
Esta propiedad no tiene efecto cuando el número de líneas flexibles es 1.	Esta propiedad no depende del número de líneas flexibles.
La propiedad align-content acepta 6 valores diferentes: flex-start: líneas empaquetadas al inicio del contenedor flex-end: líneas empacadas hasta el final del contenedor centro: líneas empacadas al centro del contenedor espacio entre: líneas distribuidas uniformemente; la primera línea está al principio del contenedor mientras que la última está al final espacio alrededor: líneas distribuidas uniformemente con igual espacio entre estirar (predeterminado): las líneas se estiran para ocupar el espacio restante	La propiedad align-items acepta 5 valores diferentes: inicio flexible: el borde del margen de inicio cruzado de los artículos se coloca en la línea de inicio cruzado extremo flexible: el borde del margen del extremo cruzado de los artículos se coloca en la línea del extremo cruzado centro: los elementos están centrados en el eje transversal línea de base: los elementos están alineados como sus líneas de base se alinean estirar (predeterminado): estirar para llenar el contenedor

Sintaxis:

alinear-contenido:

elemento{
alinear-contenido:estirar | centro | arranque flexible | extremo flexible | espacio-entre | espacio alrededor | inicial | heredar;
// Propiedad CSS
}
alinear elementos:

elemento{
alinear-elementos:estirar | centro | arranque flexible | extremo flexible | línea de base | inicial | heredar;
// Propiedad CSS
}

Ejemplo para alinear contenido

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Align-content</title>
  <style>
    /* flex-container(flex-box) */
    .flex {
      background-color: greenyellow;
      margin: 2% 2%;
      padding: 0% 3%;
      float: left;
      height: 500px;
      width: 50px;
      border: 1px solid black;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
    }
    /* flex-start */
    .flexStart {
      align-content: flex-start;
    }
    /* flex-end */
    .flexEnd {
      align-content: flex-end;
    }
    /* center */
    .center {
      align-content: center;
    }
    /* space-between */
    .spaceBetween {
      align-content: space-between;
    }
    /* space-around */
    .spaceAround {
      align-content: space-around;
    }
    /* stretch */
    .stretch {
      align-content: stretch;
    }
  
    ul {
      list-style: none;
    }
      
    .flex-item {
      background: green;
      padding: 5px;
      width: 50px;
      margin: 5px;
      line-height: 10px;
      color: white;
      font-weight: bold;
    }
  </style>
</head>
  
<body>
  <ul class="flex flexStart">
    <li class="flex-item">
      <p>F</p>
    </li>
    <li class="flex-item">
      <p>LE</p>
    </li>
    <li class="flex-item">
      <p>X</p>
    </li>
    <li class="flex-item">
      <p>ST</p>
    </li>
    <li class="flex-item">
      <p>A</p>
    </li>
    <li class="flex-item">
      <p>RT</p>
    </li>
  </ul>
  <ul class="flex flexEnd">
    <li class="flex-item">
      <p>F</p>
    </li>
    <li class="flex-item">
      <p>LE</p>
    </li>
    <li class="flex-item">
      <p>X</p>
    </li>
    <li class="flex-item">
      <p>E</p>
    </li>
    <li class="flex-item">
      <p>N</p>
    </li>
    <li class="flex-item">
      <p>D</p>
    </li>
  </ul>
  <ul class="flex center">
    <li class="flex-item">
      <p>C</p>
    </li>
    <li class="flex-item">
      <p>E</p>
    </li>
    <li class="flex-item">
      <p>N</p>
    </li>
    <li class="flex-item">
      <p>T</p>
    </li>
    <li class="flex-item">
      <p>E</p>
    </li>
    <li class="flex-item">
      <p>R</p>
    </li>
  </ul>
  <ul class="flex spaceBetween">
    <li class="flex-item">
      <p>SP</p>
    </li>
    <li class="flex-item">
      <p>AC</p>
    </li>
    <li class="flex-item">
      <p>EB</p>
    </li>
    <li class="flex-item">
      <p>ET</p>
    </li>
    <li class="flex-item">
      <p>WE</p>
    </li>
    <li class="flex-item">
      <p>EN</p>
    </li>
  </ul>
  <ul class="flex spaceAround">
    <li class="flex-item">
      <p>SP</p>
    </li>
    <li class="flex-item">
      <p>AC</p>
    </li>
    <li class="flex-item">
      <p>E</p>
    </li>
    <li class="flex-item">
      <p>AR</p>
    </li>
    <li class="flex-item">
      <p>OU</p>
    </li>
    <li class="flex-item">
      <p>ND</p>
    </li>
  </ul>
  <ul class="flex stretch">
    <li class="flex-item">
      <p>S</p>
    </li>
    <li class="flex-item">
      <p>T</p>
    </li>
    <li class="flex-item">
      <p>R</p>
    </li>
    <li class="flex-item">
      <p>E</p>
    </li>
    <li class="flex-item">
      <p>T</p>
    </li>
    <li class="flex-item">
      <p>CH</p>
    </li>
  </ul>
</body>
  
</html>

Producción
Use of align-content property with different values

Ejemplo para elementos de alineación

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Align-items</title>
  <style>
    /* flex-container(flex-box) */
    .flex {
      background-color: greenyellow;
      margin:0;
      padding:0% 2%;
      float: left;
      height: 200px;
      width: 160px;
      border: 1px solid black;
      display: flex;
      flex-direction: row;
    }
    /* flex-start */
    .flexStart {
      align-items: flex-start;
    }
    /* flex-end */
    .flexEnd {
      align-items: flex-end;
    }
    /* center */
    .center {
      align-items: center;
    }
    /* baseline */
    .baseLine {
      align-items: baseline;
    }
    /* stretch */
    .stretch {
      align-items: stretch;
    }
  
    ul {
      list-style: none;
    }
  
    .flex-item {
      background: green;
      padding: 0px;
      width: 40px;
      margin: 0px;
      line-height: 10px;
      color: white;
      font-weight: bold;
      text-align:center;
    }
  </style>
</head>
  
<body>
  <ul class="flex flexStart">
    <li class="flex-item">
      <p>F</p><br>
      <p>LE</p>
    </li>
    <li class="flex-item">
      <p>X</p>
    </li>
    <li class="flex-item">
      <p>ST</p><br>
      <p>A</p>
    </li>
    <li class="flex-item">
      <p>RT</p>
    </li>
  </ul>
  <ul class="flex flexEnd">
    <li class="flex-item">
      <p>F</p><br>
      <p>LE</p>
    </li>
    <li class="flex-item">
      <p>X</p>
    </li>
    <li class="flex-item">
      <p>E</p><br>
      <p>N</p>
    </li>
    <li class="flex-item">
      <p>D</p>
    </li>
  </ul>
  <ul class="flex center">
    <li class="flex-item">
      <p>C</p><br>
      <p>E</p>
    </li>
    <li class="flex-item">
      <p>N</p>
    </li>
    <li class="flex-item">
      <p>T</p><br>
      <p>E</p>
    </li>
    <li class="flex-item">
      <p>R</p>
    </li>
  </ul>
  <ul class="flex baseLine">
    <li class="flex-item">
      <p>BA</p><br>
      <p>S</p>
    </li>
    <li class="flex-item">
      <p>E</p>
    </li>
    <li class="flex-item">
      <p>LI</p><br>
      <p>N</p>
    </li>
    <li class="flex-item">
      <p>E</p>
    </li>
  </ul>
  <ul class="flex stretch">
    <li class="flex-item">
      <p>S</p><br>
      <p>T</p>
    </li>
    <li class="flex-item">
      <p>R</p>
    </li>
    <li class="flex-item">
      <p>E</p><br>
      <p>T</p>
    </li>
    <li class="flex-item">
      <p>CH</p>
    </li>
  </ul>
</body>
  
</html>

Producción
Use of align-items property with different values

Publicación traducida automáticamente

Artículo escrito por ks99737 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta