Tengo un contenedor flex (el cuadrado azul) con las siguientes propiedades:

display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;

Por lo tanto, sus hijos (la luz azul cuadrados), se organizan como se ve a continuación. Sin embargo, me gustaría añadir otro hijo (el cuadrado verde) fuera del flujo normal y la posición es en relación con su progenitor. A la posición como se ve a continuación, me gustaría idealmente escribir algo como bottom: 20px; y margin: auto;.

El centro y la parte inferior-align flex elementos

Traté de jugar con z-index fue en vano. ¿Cómo debo acerca de esto? Debo recurrir a la creación de otro elemento padre?

InformationsquelleAutor Willege | 2016-03-24

3 Comentarios

  1. 49

    A continuación se presentan cinco opciones para lograr este diseño:

    1. Posicionamiento CSS
    2. Flexbox con Invisible Elemento DOM
    3. Flexbox con Invisible Pseudo-Elemento
    4. Flexbox con flex: 1
    5. CSS Diseño de Cuadrícula

    Método #1: Posicionamiento CSS Propiedades

    Aplicar position: relative para el contenedor flex.

    Aplicar position: absolute a la verde flex elemento.

    Ahora el cuadrado verde es absolutamente posicionado dentro del contenedor flex.

    Más específicamente, el cuadrado verde se quita del flujo de documentos, sino que permanece dentro de los límites de la más cercano posicionado antepasado.

    Utilizar el CSS desplazamiento propiedades top, bottom, left y right para mover el cuadrado verde alrededor.

    CSS:

    flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
  border: 4px solid blue;
  height: 300px;
  width: 300px;
}
flex-container > flex-item:first-child {
  display: flex;
}
flex-container > flex-item:first-child > flex-item {
  border: 4px solid aqua;
  height: 50px;
  width: 50px;
  margin: 0 5px;
}
flex-container > flex-item:last-child {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%); /* fine tune horizontal centering */
  border: 4px solid chartreuse;
  height: 50px;
  width: 50px;
}

    HTML:

    <flex-container>
    <flex-item><!-- also flex container -->
	    <flex-item></flex-item>
	    <flex-item></flex-item>
	    <flex-item></flex-item>
    </flex-item>
    <flex-item></flex-item>
</flex-container>

    Una advertencia: Algunos navegadores no puede eliminar completamente una posición absoluta flex elemento en el flujo normal. Esto cambia la alineación en un no-estándar, de forma inesperada. Más detalles: Posición absoluta flex elemento no se elimina del flujo normal en Firefox & IE11

    Método #2: Flex Automático de Márgenes & Invisible Flex Elemento (elemento DOM)

    Con una combinación de auto de los márgenes de y una nueva, invisible flex punto, el diseño se puede lograr.

    El nuevo flex elemento es idéntica a la del elemento inferior y se coloca en el extremo opuesto (la parte superior).

    Más específicamente, porque flex alineación se basa en la distribución del espacio, el nuevo elemento es un necesario contrapeso para mantener las tres cajas azules centrada verticalmente. El nuevo elemento debe ser de la misma altura que los verdes ya existentes elemento, o los cuadros de color azul no será precisamente centrada.

    El nuevo elemento se elimina de la vista con visibility: hidden.

    En resumen:

    • Crear un duplicado de la caja verde.
    • Lugar al comienzo de la lista.
    • Uso de flex auto márgenes para mantener las cajas azules centrada, con ambos cuadros verdes creación de igualdad de equilibrio de ambos extremos.
    • Aplicar visibility: hidden para el duplicado de la caja verde.

    CSS:

    flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 4px solid blue;
    height: 300px;
    width: 300px;
}
flex-container > flex-item:first-child {
    margin-top: auto;
    visibility: hidden;
}
flex-container > flex-item:nth-child(2) {
    margin-top: auto;
    display: flex;
}
flex-container > flex-item:last-child {
    margin-top: auto;
    margin-bottom: auto;
}
flex-container > flex-item:first-child,
flex-container > flex-item:last-child {
    border: 4px solid chartreuse;
    height: 50px;
    width: 50px;
}
flex-container > flex-item:nth-child(2) > flex-item {
    border: 4px solid aqua;
    height: 50px;
    width: 50px;
    margin: 0 5px;
}

    HTML:

    <flex-container>
    <flex-item></flex-item>
    <flex-item><!-- also flex container -->
	    <flex-item></flex-item>
	    <flex-item></flex-item>
	    <flex-item></flex-item>
    </flex-item>
    <flex-item></flex-item>
</flex-container>

    Método #3: Flex Automático de Márgenes & Invisible Flex Elemento (pseudo-elemento)

    Este método es similar al #2, excepto que es un limpiador de la semántica y la altura de la caja verde que debe ser conocido.

    • Crear un pseudo-elemento con la misma altura que el existente de la caja verde.
    • Lugar en el inicio del contenedor con ::before.
    • Uso de flex auto márgenes para mantener las cajas azules centrado, con el verde de la pseudo y elementos DOM creación de igualdad de equilibrio de ambos extremos.

    CSS:

    flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 4px solid blue;
    height: 300px;
    width: 300px;
}
flex-container::before {
  content: "";
  margin-top: auto;
  height: calc(50px + 8px);  /* height + borders */
  visibility: hidden;
}
flex-container > flex-item:first-child {
  margin-top: auto;
  display: flex;
}
flex-container > flex-item:last-child {
  margin-top: auto;
  margin-bottom: auto;
  border: 4px solid chartreuse;
  height: 50px;
  width: 50px;
}
flex-container > flex-item:first-child > flex-item {
  border: 4px solid aqua;
  height: 50px;
  width: 50px;
  margin: 0 5px;
}

    HTML:

    <flex-container>
    <flex-item><!-- also flex container -->
	    <flex-item></flex-item>
	    <flex-item></flex-item>
	    <flex-item></flex-item>
    </flex-item>
    <flex-item></flex-item>
</flex-container>

    Método #4: Agregar flex: 1 a la parte superior e inferior de los elementos

    Empezando con el Método #2 o #3 arriba, en lugar de preocuparse acerca de ser igual a la altura de la parte superior e inferior de los elementos de mantener la igualdad de equilibrio, acaba de dar a cada uno flex: 1. Esto obligará a ambos a consumir el espacio disponible, así centrado el medio punto.

    A continuación, puede agregar display: flex a la parte inferior del elemento, a fin de alinear el contenido.

    Método #5: CSS Diseño de Cuadrícula

    Esta puede ser la más limpia y más eficiente. No es necesario para el posicionamiento absoluto, falso elementos u otros trucos.

    Simplemente crear una cuadrícula con tres filas. Entonces centro de alinear los elementos de la segunda y tercera filas. La primera fila puede permanecer vacío.

    CSS:

    grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  border: 4px solid blue;
  height: 300px;
  width: 300px;
}

grid-item:nth-child(2) {
  display: flex;
}

grid-item:nth-child(2)>flex-item {
  width: 50px;
  height: 50px;
  margin: 0 5px;
  border: 4px solid aqua;
}

grid-item:nth-child(3) {
  border: 4px solid chartreuse;
  height: 50px;
  width: 50px;
}

    HTML:

    <grid-container>
  <grid-item></grid-item>
  <grid-item><!-- also flex container -->
    <flex-item></flex-item>
    <flex-item></flex-item>
    <flex-item></flex-item>
  </grid-item>
  <grid-item></grid-item>
</grid-container>

    InformationsquelleAutor Michael_B
  2. 4

    dejar el recipiente con position: relative y el cuadrado verde con position:absolute;

    CSS:

    body {
  margin: 0;  
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  width: 192px;
  height: 192px;
  border: 4px solid indigo;
  position: relative;
  background: lavender;
}

.blue {
  margin: 10px;
  width: 30px;
  height: 30px;
  outline: 4px solid skyblue;
  background: honeydew;
}

#green {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 20px;
  outline: 4px solid yellowgreen;
  background: greenyellow;
}

    HTML:

    <div id=container>
<div class=blue></div><div class=blue></div><div class=blue></div>
<div id=green></div>
</div>

    InformationsquelleAutor Le____
  3. 3

    puede utilizar un pseudo mover hacia abajo una fila de la primera de tres contenedores, a continuación, applie un margin:auto a última

    CSS:

    div {
  display:flex;
  flex-wrap:wrap;
  border:#0066FD solid;;
  width:200px;
  height:200px;
  justify-content:space-around;
  /* show me box center */
  background:linear-gradient(to top,rgba(0,0,0,0.2) 50%, transparent 50%),linear-gradient(to left,rgba(0,0,0,0.2) 50%, transparent 50%)
 
}

span, div:before {
  width:50px;
  height:50px;
  border:solid #01CDFF;
  margin:0 auto 0;
}
span:last-of-type , div:before{
  margin: 12px auto;
  border:solid  #01FE43;
}
div:before {
  content:'';
  width:100%;
  border:none;
}

span {
   /* show me box center */
  background:linear-gradient(45deg,rgba(0,0,0,0.1) 50%, transparent 50%),linear-gradient(-45deg,rgba(0,0,0,0.1) 50%, transparent 50%)
  }

    HTML:

    <div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

    InformationsquelleAutor G-Cyr

Dejar respuesta

Please enter your comment!
Please enter your name here