Ширина карт не соответствует размеру ширины, и только 3 карты подряд - PullRequest
Новая
       2

Ширина карт не соответствует размеру ширины, и только 3 карты подряд

0 голосов
/ 27 февраля 2020

Здравствуйте. Я пытаюсь настроить карты в интерфейсе пользователя, используя angular -flex. Ширина карточек зависит от длины текста в ней. Но я хочу, чтобы каждая карта была одинаковой ширины независимо от ее содержимого.

Если я использую max-width, то это влияет на карты в мобильном адаптивном режиме. Еще в отзывчивом виде все карты одинакового размера и ширины.

Если я использую display:grid;, то карты идеальны. Но мне нужно сделать это с помощью flex, чтобы я использовал display:flex;

Это пользовательский интерфейс: -

UI

HTML: - 

<div class="container">
  <div class="cont">
    <app-overview *ngFor="let item of data" [extra]="item.extra" [colorcode]="item.color" [ovrno]="item.value" [ovrtitle]="item.info" >
    </app-overview>
  </div>
</div>

CSS: - 

.cont {
  display: flex;
  grid-template-columns: 1fr 1fr 1fr;
  flex-direction: column;
  flex-wrap: wrap;
}

@media (min-width: 900px) {
  .cont {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
    margin: auto;
    align-items: stretch;  

}
}

  1. Как показать одинаковую ширину карты независимо от длины контента?

    PS: - Также я хочу избежать использования медиазапроса. Как я могу сделать то же самое для разных видов, используя только flex?

  2. Также необходимо показывать только 3 карты подряд.

EDIT: -

компонент обзора приложения: -

HTML: - 

<div class="overview" [ngStyle]="getColor()" (click)="onSelect()">
    <p class="no">{{no}}</p>
    <p class="otitle">{{title}}</p>
</div>

CSS: - 

.overview {
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  color: #fff;
  margin: 10px;
  height: 270px;
  cursor: pointer !important;
  .no {
    font-size: 6.5em;
    font-weight: bold;
    padding: 0.3em 0;
  }
  .otitle {
    font-size: 25px !important;
    font-weight: 300;
    padding: 0.3em 0;
  }  
}

1 Ответ

1 голос
/ 27 февраля 2020

Я не знаю ни о каких медиа-запросах ... это странное требование, поскольку они поддерживаются на 97,97% согласно caniuse . Но вы можете сделать все это с помощью одного правила медиа-запроса или пропустить его и иметь 3 действительно сжатых поля в строке.

Для вашего родительского элемента вам нужны только два правила: 

.cont {
  display: flex;
  flex-wrap: wrap;
}

И Для детей вам понадобится немного математики: поле (сколько вам нужно расстояния между карточками) плюс горизонтальное отступление внутри карточек, умноженное на 2, - это конечное значение изгиба в вашем большем экране медиазапроса, например: 

.child {
    margin: .5rem; /* This value plus the left to right padding * 2 == final flex value */
    padding: 2rem .25rem; /* Padding given for example on inner element */  
    flex: 100%;
    display: flex;
}

@media (min-width: 640px) { /* Or whatever breakpoint makes your content not look janky */
    .child {
        flex: 0 1 calc(33.33333% - 1.5rem); /* (.5 + .25)*2 = 1.5rem this is the final flex value */
    }
}

Почему это работает хорошо: на небольших экранах (по умолчанию) настройка flex: 100% эквивалентна установке flex-based на 100% (так как мы предоставляем единицу), которая заполняет ширину, когда мы хотим сложить элементы.

На больших экранах основание flex (последнее число в свойстве flex) явно задается как 1/3 ширины экрана минус сумма горизонтального поля и отступа элемента внутри контейнера, который вызывает каждое один занимает 1/3 экрана, в то время как flex-grow (первое число в свойстве flex) устанавливается в 0, в противном случае строки с менее чем тремя будут увеличиваться для распределения доступного пространства.

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

...