html - tabla - Centre un elemento flexible en una fila cuando haya un número diferente de elementos en cada lado

tablas html avanzado

Question

¿Cómo logro este diseño dibujado en la imagen? Por ejemplo, 3 elementos en el lado izquierdo, uno centrado, 2 a la derecha.

el ul es el color anaranjado y las cajas negras son los artículos

ul {
  display: flex;
  width: 100%;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

Answer 1

Flexbox

Usa 7 elementos.

Uno en el centro.

Cada lado tiene 3.

Ocultar uno a la derecha con visibility: hidden .

Si no desea agregar un elemento falso en el DOM, utilice un pseudo-elemento en su lugar, también con visibility: hidden .

Más detalles aquí:

• Centrar y alinear a la derecha los elementos de la caja flexible
• ¿Cómo se puede mantener centrada la caja en un diseño de caja flexible?

Cuadrícula

Si está abierto a otra tecnología CSS3, puede evitar los pirates de flexbox anteriores. Aquí hay una solución limpia y válida que usa Grid:

ul {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 50px;
  grid-gap: 10px;
  grid-template-areas: " item1 item2 item3 item4 ... item5 item6 ";
}

li:nth-child(1) { grid-area: item1; }
li:nth-child(2) { grid-area: item2; }
li:nth-child(3) { grid-area: item3; }
li:nth-child(4) { grid-area: item4; }
li:nth-child(5) { grid-area: item5; }
li:nth-child(6) { grid-area: item6; }

/* non-essential demo styles */
p {
  text-align: center;
}
span {
  background-color: yellow;
  padding: 5px;
}
li {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: black;
}
ul {
  background-color: red;
  list-style: none;
  margin: 0;
  padding: 10px;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>
<p><span>TRUE CENTER</span></p>

Answer 2

Aquí está:

* {
  padding: 0;
  margin: 0;
}

ul,
li {
  list-style:none;
}

ul {
  display:flex;
  width:100%;
  background-color: yellow;
  justify-content: space-between;
}

span {
  width: 50px;
  height: 50px;
  background-color: violet;
}

span + span {
  margin-left: 25px;
}

li {
  display: flex;
  flex-direction: row;
}

.centered {
  margin-left: -75px;
}

<ul>
  <li>
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
  </li>
  <li class="centered">
    <span>Item 4</span>
  </li>
  <li>
    <span>Item 5</span>
    <span>Item 6</span>
  </li>
</ul>

Siéntase libre de hacer preguntas si algo no está claro.

Answer 3

Creo que Flexbox es una gran solución para su caso. He creado un códec donde puedes ver los resultados de mi solución. Utiliza <div> s pero puede cambiarlos a <ul> .

HTML:

<div class="container">
    <div class="inter first">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>
    <div class="inter second">
        <div class="content"></div>
    </div>
    <div class="inter first">
        <div class="content dont-mind-me"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

CSS:

.container {
    width: 600px;
    height: 20px;
    display: flex;
    background-color: orange;
}

.inter {
    flex: 1 0 auto;
    display: flex;
}
.first {
    justify-content: space-between;
}

.second {
    justify-content: center;
}

.content {
    flex: 0 1 60px;
    height: 20px;
    background-color: black;
}

.dont-mind-me {
    visibility: hidden;
}

Answer 4

Si necesita el centrado en el centro exacto de su elemento primario, entonces lo más simple es usar 3 envoltorios que contengan los elementos y darles una flex-basis: 33.333% .

Con esto, puede controlar fácilmente cómo los artículos deben envolver en pantallas más pequeñas.

ul {
  display: flex;
  width: 100%;
  list-style: none;
  padding: 0;
}

ul li {
  flex-basis: 33.333%;
  display: flex;
}

ul li:nth-child(2) span {
  margin: auto;                          /*  align center  */
}

ul li:nth-child(3) span:first-child {
  margin-left: auto;                     /*  align right  */
}

<ul>
  <li>
    <span>Item 1</span><span>Item 2</span><span>Item 3</span>
  </li>
  <li>
    <span>Item 4</span>
  </li>
  <li>
    <span>Item 5</span><span>Item 6</span>
  </li>
</ul>

Otra opción es usar flex: 1 1 0 en los envoltorios izquierdo / derecho

ul {
  display: flex;
  width: 100%;
  list-style: none;
  padding: 0;
}

ul li {
  display: flex;
}

ul li:nth-child(1),
ul li:nth-child(3) {
  flex: 1 1 0;
}

ul li:nth-child(3) span:first-child {
  margin-left: auto;
}

<ul>
  <li>
    <span>Item 1</span><span>Item 2</span><span>Item 3</span>
  </li>
  <li>
    <span>Item 4</span>
  </li>
  <li>
    <span>Item 5</span><span>Item 6</span>
  </li>
</ul>

Otra más, mantener el marcado existente, es utilizar márgenes automáticos, aunque el centrado estará entre, en este caso, 3 y 5.

ul {
  display: flex;
  width: 100%;
  list-style: none;
  padding: 0;
}

ul li:nth-child(4) {
  margin: auto;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

Answer 5

Si no desea cambiar el marcado, puede utilizar el diseño de cuadrícula en lugar de Flexbox:

ul {
  display: grid;
  width: 100%;
  grid-template-columns: auto auto 1fr auto 1fr auto auto;
  grid-column-gap: 20px;
  list-style: none;
  padding: 0;
}

li {
  width: 50px;
  height: 50px;
  background: #000;
  color: #fff;
}

li:nth-child(5) {
  grid-column: 6;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>