Как расставить элементу внизу по центру используя сокращенное свойство place-content?

Question

* {
  box-sizing: border-box;
}

body {
  background-color: #4c4c4c;
  color: white;
}

.container {
  display: flex;
  flex-wrap: wrap;
  border-radius: 8px;
  padding: 16px;
  height: 100%;
  gap: 16px;
}

.item {
  padding: 36px;
  background-color: #2fbe4e;
  border-radius: 8px;
  font-size: 20px;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
</div>

Answer 1

.container {
  display: flex;
  flex-wrap: wrap;
  height: 200px;
  background-color: gray;
  width: 100%;
  place-content: end center;
}
 

.item {
  width: 40px;
  height: 40px;
  background-color: green;
}

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
</div>

БЛОГ НА HUSL

Как расставить элементу внизу по центру используя сокращенное свойство place-content?

Ответы (1 шт):