html - separar - Eliminar el margen de los elementos flexibles cuando se envuelven
modelo de caja flexible (4)
El siguiente es mi código que funciona bien, excepto la última línea en un contenedor que agrega
margin-bottom: 5px;
de la clase
.tag
css.
El problema al que me enfrento es que la lista de etiquetas es dinámica, por lo que no puedo apuntar directamente al Elemento-13,14 y así sucesivamente.
Avíseme en flex ¿tenemos algún privilegio para agregar css personalizado wrt la última fila en mi contenedor flex.
* {
margin: 0;
padding: 0;
}
html, body {
box-sizing: border-box;
}
.container {
width: 600px;
margin: 0 auto;
margin-top: 25px;
border: 1px solid;
padding: 5px;
}
.tags {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.tag {
padding: 5px;
background-color: #76FF03;
margin: 0 5px 5px;
}
<div class="container">
<ul class="tags">
<li class="tag item-1">Tag Item 1</li>
<li class="tag item-2">Tag Item 2</li>
<li class="tag item-3">Tag Item 3</li>
<li class="tag item-4">Tag Item 4</li>
<li class="tag item-5">Tag Item 5</li>
<li class="tag item-6">Tag Item 6</li>
<li class="tag item-7">Tag Item 7</li>
<li class="tag item-8">Tag Item 8</li>
<li class="tag item-9">Tag Item 9</li>
<li class="tag item-10">Tag Item 10</li>
<li class="tag item-11">Tag Item 11</li>
<li class="tag item-12">Tag Item 12</li>
<li class="tag item-13">Tag Item 13</li>
<li class="tag item-14">Tag Item 14</li>
<li class="tag item-15">Tag Item 15</li>
<li class="tag item-16">Tag Item 16</li>
</ul>
</div>
Ajuste la
padding-bottom
del
padding-bottom
para
.tags
en
.tags
lugar.
Como nunca sabrá cuántas etiquetas aparecerán en la parte inferior de la lista (esta solución es muy flexible),
Me gusta:
.tags {
padding: 5px 0 0;
}
Echa un vistazo al fragmento a continuación:
* {
margin: 0;
padding: 0;
}
html, body {
box-sizing: border-box;
}
.container {
width: 600px;
margin: 0 auto;
margin-top: 25px;
border: 1px solid;
padding: 5px;
}
.tags {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
padding: 5px 0 0;
}
.tag {
padding: 5px;
background-color: #76FF03;
margin: 0 5px 5px;
}
<div class="container">
<ul class="tags">
<li class="tag item-1">Tag Item 1</li>
<li class="tag item-2">Tag Item 2</li>
<li class="tag item-3">Tag Item 3</li>
<li class="tag item-4">Tag Item 4</li>
<li class="tag item-5">Tag Item 5</li>
<li class="tag item-6">Tag Item 6</li>
<li class="tag item-7">Tag Item 7</li>
<li class="tag item-8">Tag Item 8</li>
<li class="tag item-9">Tag Item 9</li>
<li class="tag item-10">Tag Item 10</li>
<li class="tag item-11">Tag Item 11</li>
<li class="tag item-12">Tag Item 12</li>
<li class="tag item-13">Tag Item 13</li>
<li class="tag item-14">Tag Item 14</li>
<li class="tag item-15">Tag Item 15</li>
<li class="tag item-16">Tag Item 16</li>
</ul>
</div>
¡Espero que esto ayude!
Como se mencionó en otra respuesta , la forma común de resolver este problema, que es utilizado por muchos marcos, es aplicar combinaciones de margen negativo y relleno. Incluso flexbox no proporciona una solución limpia. Los hacks feos son la norma en esta situación.
Sin embargo, si está abierto a otra tecnología CSS3, Grid Layout, la solución es simple, limpia y fácil.
CSS Grid proporciona las propiedades
grid-column-gap
y
grid-row-gap
.
La taquigrafía para ambos es
grid-gap
.
Estas propiedades le permiten crear espacio
entre los
elementos de la cuadrícula.
Pero nunca se aplican al espacio entre los artículos y el contenedor.
Nuevamente, solo funcionan entre elementos (es decir, las canaletas).
Entonces, lo que harías es usar
grid-gap
de la
grid-gap
para espaciar entre los elementos.
Luego use
padding
para el mismo espacio entre los artículos y el contenedor.
Aquí hay algunos beneficios de este método:
- El problema del margen de la última fila se elimina. El número de artículos ya no es una preocupación.
- No hay necesidad de hacks.
- No hay necesidad de márgenes.
- Sus elementos se alinean en columnas (si eso es algo que desea).
- Todo el espacio libre en el contenedor se distribuye de manera uniforme entre los elementos (si eso es algo que desea).
.container {
width: 600px;
margin: 0 auto;
margin-top: 25px;
border: 1px solid;
padding: 5px;
}
.tags {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
grid-gap: 5px;
list-style-type: none;
}
.tag {
padding: 5px;
background-color: #76FF03;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
<div class="container">
<ul class="tags">
<li class="tag item-1">Tag Item 1</li>
<li class="tag item-2">Tag Item 2</li>
<li class="tag item-3">Tag Item 3</li>
<li class="tag item-4">Tag Item 4</li>
<li class="tag item-5">Tag Item 5</li>
<li class="tag item-6">Tag Item 6</li>
<li class="tag item-7">Tag Item 7</li>
<li class="tag item-8">Tag Item 8</li>
<li class="tag item-9">Tag Item 9</li>
<li class="tag item-10">Tag Item 10</li>
<li class="tag item-11">Tag Item 11</li>
<li class="tag item-12">Tag Item 12</li>
<li class="tag item-13">Tag Item 13</li>
<li class="tag item-14">Tag Item 14</li>
<li class="tag item-15">Tag Item 15</li>
<li class="tag item-16">Tag Item 16</li>
</ul>
</div>
jsFiddle demo
Referencia de especificaciones: https://www.w3.org/TR/css3-grid-layout/#gutters
La forma más común, que la mayoría del marco utiliza para resolver eso, es establecer un margen superior en los elementos (
tag
) y luego compensarlo con un margen negativo en los elementos principales (
tags
)
* {
margin: 0;
padding: 0;
}
html, body {
box-sizing: border-box;
}
.container {
width: 600px;
margin: 0 auto;
margin-top: 25px;
border: 1px solid;
padding: 5px;
}
.tags {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
margin-top: -5px; /* compensate top */
}
.tag {
padding: 5px;
background-color: #76FF03;
margin: 5px 5px 0 0; /* top, right */
}
<div class="container">
<ul class="tags">
<li class="tag item-1">Tag Item 1</li>
<li class="tag item-2">Tag Item 2</li>
<li class="tag item-3">Tag Item 3</li>
<li class="tag item-4">Tag Item 4</li>
<li class="tag item-5">Tag Item 5</li>
<li class="tag item-6">Tag Item 6</li>
<li class="tag item-7">Tag Item 7</li>
<li class="tag item-8">Tag Item 8</li>
<li class="tag item-9">Tag Item 9</li>
<li class="tag item-10">Tag Item 10</li>
<li class="tag item-11">Tag Item 11</li>
<li class="tag item-12">Tag Item 12</li>
<li class="tag item-13">Tag Item 13</li>
<li class="tag item-14">Tag Item 14</li>
<li class="tag item-15">Tag Item 15</li>
<li class="tag item-16">Tag Item 16</li>
</ul>
</div>
Y una forma aún mejor podría ser dar el mismo margen a todos los lados del artículo, aunque sea la mitad del valor.
* {
margin: 0;
padding: 0;
}
html, body {
box-sizing: border-box;
}
.container {
width: 600px;
margin: 0 auto;
margin-top: 25px;
border: 1px solid;
padding: 5px;
}
.tags {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.tag {
padding: 5px;
background-color: #76FF03;
margin: 2.5px;
}
<div class="container">
<ul class="tags">
<li class="tag item-1">Tag Item 1</li>
<li class="tag item-2">Tag Item 2</li>
<li class="tag item-3">Tag Item 3</li>
<li class="tag item-4">Tag Item 4</li>
<li class="tag item-5">Tag Item 5</li>
<li class="tag item-6">Tag Item 6</li>
<li class="tag item-7">Tag Item 7</li>
<li class="tag item-8">Tag Item 8</li>
<li class="tag item-9">Tag Item 9</li>
<li class="tag item-10">Tag Item 10</li>
<li class="tag item-11">Tag Item 11</li>
<li class="tag item-12">Tag Item 12</li>
<li class="tag item-13">Tag Item 13</li>
<li class="tag item-14">Tag Item 14</li>
<li class="tag item-15">Tag Item 15</li>
<li class="tag item-16">Tag Item 16</li>
</ul>
</div>
utilizar esta
li.tag:nth-last-child(-n+4) {
margin-bottom: 0;
}
* {
margin: 0;
padding: 0;
}
html, body {
box-sizing: border-box;
}
.container {
width: 600px;
margin: 0 auto;
margin-top: 25px;
border: 1px solid;
padding: 5px;
}
.tags {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.tag {
padding: 5px;
background-color: #76FF03;
margin: 0 5px 5px;
}
li.tag:nth-last-child(-n+4) {
margin-bottom: 0;
}
<div class="container">
<ul class="tags">
<li class="tag item-1">Tag Item 1</li>
<li class="tag item-2">Tag Item 2</li>
<li class="tag item-3">Tag Item 3</li>
<li class="tag item-4">Tag Item 4</li>
<li class="tag item-5">Tag Item 5</li>
<li class="tag item-6">Tag Item 6</li>
<li class="tag item-7">Tag Item 7</li>
<li class="tag item-8">Tag Item 8</li>
<li class="tag item-9">Tag Item 9</li>
<li class="tag item-10">Tag Item 10</li>
<li class="tag item-11">Tag Item 11</li>
<li class="tag item-12">Tag Item 12</li>
<li class="tag item-13">Tag Item 13</li>
<li class="tag item-14">Tag Item 14</li>
<li class="tag item-15">Tag Item 15</li>
<li class="tag item-16">Tag Item 16</li>
</ul>
</div>