Как я могу разложить свои гибкие элементы на ширину контейнера? - PullRequest
Новая
       3

Как я могу разложить свои гибкие элементы на ширину контейнера?

4 голосов
/ 19 мая 2019

Я бы хотел использовать flex для создания чего-то похожего на CSS:

Click to see the image in fullscreen

Что я пробовал до сих порэто код: 

#dot-container {
  position: absolute;
  width: 30vw;
  background: black;
  height: 8vw;
  justify-content: center;
  align-items: center;
  display: flex;
}

.dot {
  border-radius: 100%;
  width: 2vw;
  height: 2vw;
  margin: 3.2%; /*(30-2*7) / (7-2)*/
  background: green;
}
<div id="dot-container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

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

Примечание: также justify-content: space-between;, кажется, не работает, потому что сами точки являются самыми левыми, но не центрами точек!

Ответы [ 4 ]

4 голосов
/ 19 мая 2019

Это можно сделать, используя justify-content: space-between и используя отрицательный margin. 

#dot-container {
  position: absolute;
  width: 30vw;
  background: black;
  height: 8vw;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.dot {
  border-radius: 100%;
  width: 2vw;
  height: 2vw;
  margin: -3.2%; /*(30-2*7) / (7-2)*/
  background: green;
}
<div id="dot-container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

Или, если вы не хотите рассчитывать поля, вы можете добавить дочерний элемент с абсолютным позиционированием и изменить количество элементов div.dot так, как вы хотите: 

#dot-container {
  position: relative;
  width: 30vw;
  height: 6vw;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

#dot-container-inner {
  position: absolute;
  left: 3%;
  top: 0;
  z-index: -1;
  height: 100%;
  width: 95%;
  background: black;
}

.dot {
  border-radius: 100%;
  width: 2vw;
  height: 2vw;
  background: green;
}
<div id="dot-container">
  <div id="dot-container-inner">
  </div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
1 голос
/ 19 мая 2019

Если возможно, вы можете попробовать несколько фонов вместо flexbox. Идея состоит в том, чтобы использовать радиальный градиент для кругов и линейный градиент для фона - см. Демонстрацию ниже: 

div{
  width: 30vw;
  height: 8vw;
  margin: 10px;
  background: radial-gradient(circle, green calc(1vw - 2px) calc(1vw - 1px), transparent 1vw) center / calc(100% / var(--n)) 2vw repeat-x,         
              linear-gradient(black, black) center / calc(100% - 100% / var(--n)) 100% no-repeat;  
}
<div style="--n:5"></div>
<div style="--n:9"></div>

Теперь вы можете иметь фиксированную ширину для черного фона , изменяя ширину div в зависимости от количества кругов - см. Демонстрацию ниже с красным фоном, чтобы показать фактические границы: 

div {
  height: 8vw;
  margin: 10px calc(-15vw / var(--n));
  position: relative;
  width: calc(30vw + 30vw / var(--n));
  background: radial-gradient(circle, green calc(1vw - 2px) calc(1vw - 1px), transparent 1vw) 0 50% / calc(30vw / var(--n)) 2vw repeat-x,
              linear-gradient(black, black) center / calc(100% - 30vw / var(--n)) 100% no-repeat, red;
}
<div style="--n:3"></div>
<div style="--n:5"></div>
<div style="--n:9"></div>

Завершите его, используя псевдоэлемент , чтобы применить фон, и ширину, указанную в div для общности - окончательный результат ниже: 

div {
  --w: 30vw;
  height: 8vw;
  width: var(--w);
  margin: 10px;
  position: relative;
}

div:after {
  content: '';
  position: absolute;
  height: 100%;
  width: calc(100% + 100% / var(--n));
  margin: 0 calc(-1 * var(--w) / var(--n) / 2);
  background: radial-gradient(circle, green calc(1vw - 2px) calc(1vw - 1px), transparent 1vw) 0 50% / calc(var(--w) / var(--n)) 2vw repeat-x,
              linear-gradient(black, black) center / calc(100% - var(--w) / var(--n)) 100% no-repeat;
}
<div style="--n:3"></div>
<div style="--n:7"></div>
<div style="--n:9"></div>
0 голосов
/ 20 мая 2019

Вы можете рассчитывать на переполнение, если ширина элементов и поле превышают общую ширину.Из вашей фигуры мы имеем полукруг, переполняющийся слева и справа, таким образом, полный круг переполняется

С учетом этого общая ширина составляет 6*width_of_circle + total_margin.Мы можем разделить это поле на 6 частей (между нашими 7 кругами), и у нас будет 6*width_of_circle + 6*small_margin, поэтому каждое поле будет total_width/6 - width_of_circle, которое мы разделим на каждой стороне: 

#dot-container {
  position: absolute;
  width: 30vw;
  background: black;
  height: 8vw;
  justify-content: center;
  align-items: center;
  display: flex;
  margin:10px;
}

.dot {
  border-radius: 100%;
  width: 2vw;
  height: 2vw;
  margin: 0 calc((100%/6 - 2vw)/2); 
  background: green;
  flex-shrink:0; /* Don't shrink*/
}
<div id="dot-container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

Вы можете выразить все в процентах, если хотите: 

#dot-container {
  position: absolute;
  width: 30vw;
  background: black;
  height: 8vw;
  justify-content: center;
  align-items: center;
  display: flex;
  margin:10px;
}

.dot {
  border-radius: 100%;
  width: calc(100%/15);
  margin: 0 calc((100%/6 - 100%/15)/2); 
  background: green;
  flex-shrink:0; /* Don't shrink*/
}

/* To keep the square ratio*/
.dot:before {
  content:"";
  display:block;
  padding-top:100%;
}
<div id="dot-container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

И мы можем добавить переменную CSS, чтобы легко контролировать ширину точек, сохраняя ту же конфигурацию и переполнение первого / последнего круга: 

#dot-container {
  width: 30vw;
  background: black;
  height: 8vw;
  justify-content: center;
  align-items: center;
  display: flex;
  margin:10px;
}

.dot {
  border-radius: 100%;
  width: calc(100%/var(--d));
  margin: 0 calc((100%/6 - 100%/var(--d))/2); 
  background: green;
  flex-shrink:0; /* Don't shrink*/
}

/* To keep the square ratio instead of setting height*/
.dot:before {
  content:"";
  display:block;
  padding-top:100%;
}
<div id="dot-container" style="--d:10">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<div id="dot-container" style="--d:8">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
<div id="dot-container" style="--d:20">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

Если вы будете добавлять / удалять точки, просто отрегулируйте значение 6, которое представляет собой число точек минус один: 

#dot-container {
  width: 30vw;
  background: black;
  height: 8vw;
  justify-content: center;
  align-items: center;
  display: flex;
  margin:10px;
}

.dot {
  border-radius: 100%;
  width: calc(100%/var(--d));
  margin: 0 calc((100%/(var(--n) - 1) - 100%/var(--d))/2); 
  background: green;
  flex-shrink:0; /* Don't shrink*/
}

/* To keep the square ratio*/
.dot:before {
  content:"";
  display:block;
  padding-top:100%;
}
<div id="dot-container" style="--d:10;--n:5">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<div id="dot-container" style="--d:8;--n:7">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
<div id="dot-container" style="--d:20;--n:9">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

В качестве примечания, левый край первого элемента и правый край последнего элемента не обязательно должны быть равныРасчетное значение, так как они переполнены.Они просто должны быть одинаковыми, даже 0:

равно 0: 

#dot-container {
  width: 30vw;
  background: black;
  height: 8vw;
  justify-content: center;
  align-items: center;
  display: flex;
  margin:10px;
}

.dot {
  border-radius: 100%;
  width: calc(100%/var(--d));
  margin: 0 calc((100%/(var(--n) - 1) - 100%/var(--d))/2); 
  background: green;
  flex-shrink:0; /* Don't shrink*/
}
.dot:first-child {
 margin-left:0;
}
.dot:last-child {
 margin-right:0;
}

/* To keep the square ratio*/
.dot:before {
  content:"";
  display:block;
  padding-top:100%;
}
<div id="dot-container" style="--d:10;--n:5">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<div id="dot-container" style="--d:8;--n:7">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
<div id="dot-container" style="--d:20;--n:9">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

Равен случайному значению: 

#dot-container {
  width: 30vw;
  background: black;
  height: 8vw;
  justify-content: center;
  align-items: center;
  display: flex;
  margin:10px;
}

.dot {
  border-radius: 100%;
  width: calc(100%/var(--d));
  margin: 0 calc((100%/(var(--n) - 1) - 100%/var(--d))/2); 
  background: green;
  flex-shrink:0; /* Don't shrink*/
}
.dot:first-child {
 margin-left:658624px;
}
.dot:last-child {
 margin-right:658624px;
}

/* To keep the square ratio*/
.dot:before {
  content:"";
  display:block;
  padding-top:100%;
}
<div id="dot-container" style="--d:10;--n:5">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<div id="dot-container" style="--d:8;--n:7">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
<div id="dot-container" style="--d:20;--n:9">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
0 голосов
/ 19 мая 2019

Вы можете выбрать псевдоэлемент с черным фоном.Немного увеличьте ширину вашего контейнера, чтобы точки могли растягиваться на 1vw больше.С justify-content: space-Между вам не нужно поля на точках.Точки имеют относительное положение, поэтому они отображаются на черном фоне. 

#dot-container {
  position: absolute;
  width: 32vw;
  height: 8vw;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

#dot-container:before {
  content: '';
  display: block;
  position: absolute;
  width: 30vw;
  height: 8vw;
  margin: 0 1vw;
  background: black;
}

.dot {
  border-radius: 100%;
  width: 2vw;
  height: 2vw;
  background: green;
  position: relative;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...