it-swarm.com.ru

Удаление полей из гибких элементов при их намотке

Ниже приведен мой код, который работает нормально, за исключением последней строки в контейнере, который добавляет margin-bottom: 5px; из класса .tag css.

Проблема, с которой я сталкиваюсь, заключается в том, что список тегов динамический поэтому я не могу напрямую нацелиться на Item-13,14 и так далее, и так далее.

Дайте мне знать, во флексе, есть ли у нас какие-либо привилегии для добавления пользовательских css w.r.t в последнюю строку в моем флекс-контейнере. 

* {
	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>

7
Nesh

Наиболее распространенный способ, который большинство фреймворков использует для решения этой проблемы, состоит в том, чтобы вместо этого установить верхнее поле для элементов (tag), а затем компенсировать это отрицательным полем для родительского элемента (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>


И еще лучшим способом может быть предоставление одинакового поля всем сторонам предмета, хотя и половиной стоимости.

* {
  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>

5
LGSon

Как упомянуто в другой ответ , общий способ решения этой проблемы, который используется многими фреймворками, состоит в том, чтобы применять отрицательные комбинации полей и отступов. Даже flexbox не дает чистого решения. Гадкие хаки являются нормой в этой ситуации.

Однако, если вы открыты для другой технологии CSS3 - Grid Layout - решение простое, чистое и легкое.

CSS Grid предоставляет свойства grid-column-gap и grid-row-gap. Сокращение для обоих: grid-gap. Эти свойства позволяют создавать пространство между элементами сетки. Но они никогда не применяются к пространству между предметами и контейнером. Опять же, они работают только между предметами (то есть, желобами).

Так что вы должны использовать grid-gap для расстояния между элементами. Затем используйте padding для того же расстояния между элементами и контейнером.

Вот лишь несколько преимуществ этого метода:

  • Проблема с последней строкой устранена. Количество предметов больше не является проблемой.
  • Нет необходимости во взломах.
  • Нет необходимости в наценках.
  • Ваши элементы выравниваются по столбцам (если это то, что вы хотите).
  • Все свободное пространство в контейнере распределяется равномерно между элементами (если это то, что вы хотите).

.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

Ссылка на спецификацию: https://www.w3.org/TR/css3-grid-layout/#gutters

6
Michael_B

Вместо этого настройте padding-bottom для .tags.

Поскольку вы никогда не будете знать, сколько тегов появится в нижней части списка (это решение очень гибкое),

Подобно:

.tags {
  padding: 5px 0 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;
  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>

Надеюсь это поможет!

1
Saurav Rastogi

использовать этот

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>

0
Hiren Vaghasiya