Приклеивание элементов flexbox к каждой стороне контейнера (один элемент слева, другой справа) - PullRequest
Новая
       73

Приклеивание элементов flexbox к каждой стороне контейнера (один элемент слева, другой справа)

0 голосов
/ 28 мая 2020

Я знаю, что это очень простой c вопрос, но я не могу sh чего хочу.

Фон

Я строю приложение Angular 7 с компонентами Angular Material (v7).

В заголовках карт материалов, например:

Цель

Я хочу, чтобы значки оставались справа, а текст - слева. Итак, какой бы ни была ширина элемента, они прикреплены к каждой стороне.

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

|-----container (mat-card-title)-----|
|Short title-------------------|icons|
|A longer title----------------|icons|
|A muuuuuuuuch longer title----|icons|

|----------very large container (mat-card-title)-------------|
|Short title-------------------------------------------|icons|
|A longer title in a large container-------------------|icons|
|A muuuuuch longer title in a veeeery large container--|icons|

Кроме того, я хочу, чтобы оба значка (элементы кнопок) располагались рядом, если из-за небольшой ширины требуется разрыв.

Итак far

Я пробовал несколько вещей, подходя к этим стилям flexbox к mat-card-title element 

mat-card-title {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
}

А затем, inline : 

<mat-card-title>
  <div style="flex: 2 1 auto">
    <span>Latest Messages ({{count}})</span>
  </div>
  <div style="flex: 1; justify-self: flex-end; display: flex; flex-direction: row; justify-content: end; 
              flex-wrap: nowrap">
    <button></button>
    <button></button>
  </div>
</mat-card-title>

Вопрос

Этот подход подходит? Как я могу достичь sh своей цели?

Дайте мне знать, если я должен предоставить дополнительную информацию

Большое спасибо

1 Ответ

1 голос
/ 28 мая 2020

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

mat-card-title {
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.buttons {
  display:flex;
  justify-content: flex-end;
  flex: 0.2; //note you can also just specify a width in percentage, this is like setting a width of 20% (or however wide the buttons are)
}

<mat-card-title>
  <div>
    <span>Latest Messages ({{count}})</span>
  </div>
  <div class="buttons">
    <button></button>
    <button></button>
  </div>
</mat-card-title>

Удачи!

...