Центрирование соседних изображений с помощью flexbox - PullRequest
Новая
       19

Центрирование соседних изображений с помощью flexbox

2 голосов
/ 18 апреля 2020

Я пытаюсь использовать flexbox для отображения переменного количества значков изображений, центрированных по горизонтали в контейнере.

  1. Один значок должен масштабироваться до высоты контейнера и центрироваться по горизонтали.
  2. Небольшое количество значков должно быть масштабировано до высоты контейнера и нарисовано непосредственно рядом с центром.
  3. Если значков больше, чем можно разместить горизонтально на высоте контейнера, их следует масштабировать, чтобы они соответствовали без изменения соотношения сторон.

Мне удалось с (1) и (3), но (2) доставляет мне проблемы. Изображения не рисуются рядом друг с другом. Вот как это выглядит:

scaled/centered icon group test

Вот документ HTML, который производит этот вывод ( также jsfiddle ): 

<!DOCTYPE html>
<style>
.flex-container {
  display: flex;
  justify-content: center;
  width: 2in;
  height: 0.5in;
  background: lightblue;
  margin-bottom: 1em;
}

.flex-item {
  flex: 1 1;
  height: 100%;
  width: auto;
  object-fit: contain;
}

.block-container {
  width: 2in;
  height: 0.5in;
  background: lightblue;
  margin-bottom: 1em;
  text-align: center;
}
</style>
<body>
  One item displays centered at container height.
  <div class="flex-container">
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg>
  </div>

  Many items get scaled to fit in the box, which is
  what I want. The image aspect ratio correctly remains
  unchanged.
  <div class="flex-container">
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg> 
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg> 
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg> 
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg> 
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg> 
  </div>

  But if there are not enough images to fill the container
  then I want the images adjacent and centered. Instead
  they are distributed.
  <div class="flex-container">
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg> 
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg> 
  </div>

  This is what the above case should look like, but it
  doesn't use flexbox so it won't scale properly with
  many items.
  <div class="block-container">
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg><svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg> 
  </div>
</body>

Я действительно думал, что justify-content: center именно для этой ситуации, но я не могу заставить это работать. Я чувствую, что упускаю что-то очевидное. Кто-то может указать на это?

Ответы [ 2 ]

4 голосов
/ 18 апреля 2020

На самом деле, вам просто нужно удалить flex:1 1;, потому что оно заставляет изображения занимать свободное место.

jsfiddle Пример: https://jsfiddle.net/gzxu5va8/2/

CSS: 

.flex-container {
  display:flex;
  flex-direction:row;
  justify-content:center;
  width: 2in;
  height: 0.5in;
  background: lightblue;
  margin-bottom: 1em;
}

.flex-item {
  height: 100%;
  width: auto;
  display:flex;
  flex-direction:row;
  justify-content:center;
}

.block-container {
  width: 2in;
  height: 0.5in;
  background: lightblue;
  margin-bottom: 1em;
  display:flex;
  flex-direction:row;
  justify-content:center;
}
2 голосов
/ 18 апреля 2020

Я думаю, это то, что вы ищете: 

.flex-container {
  display: flex;
  margin-right: 0;
  margin-left: 0;
  width: 2in;
  height: 0.5in;
  background: lightblue;
  margin-bottom: 1em;
  padding: 0;
  margin: 0;
  list-style: none;
}

.center {
  justify-content: center;
}

.flex-item {
  text-align: center;
  height: 100%;
  width: auto;
  object-fit: contain;
}

.block-container {
  width: 2in;
  height: 0.5in;
  background: lightblue;
  margin-bottom: 1em;
  text-align: center;
}
<body>
  One item displays centered at container height.
  <div class="flex-container center">
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg>
  </div>

  Many items get scaled to fit in the box, which is what I want. The image aspect ratio correctly remains unchanged.
  <div class="flex-container">
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg>
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg>
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg>
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg>
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg>
  </div>

  But if there are not enough images to fill the container then I want the images adjacent and centered. Instead they are distributed.
  <div class="flex-container center">
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg>
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg>
  </div>

  This is what the above case should look like, but it doesn't use flexbox so it won't scale properly with many items.
  <div class="block-container">
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg><svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...