Как сохранить пробел между средними элементами? - PullRequest
Новая
       6

Как сохранить пробел между средними элементами?

0 голосов
/ 06 марта 2019

вот демонстрация, которую я создал: https://stackblitz.com/edit/flex-layout-angular-material-fgconc

шагов для воспроизведения:

  1. «Открыть в новом окне» и перетащите его в полный размер.
  2. перетащите правую границу и уменьшите окно.
  3. когда начинается обтекание среднего элемента -> проблема

Когда начинается обтекание, пространство слева исчезает, а все пространство справа.

Как я могу иметь одинаковое пространство "влево и вправо", когда средний элемент переносится?

@ Предложение Акбера Икбала style="text-align:center" уже хорошо работает.

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

enter image description here

1 Ответ

1 голос
/ 06 марта 2019

Используя существующий stackblitz , внесите одно изменение в ваш app.component.html, просто добавьте: style = "text-align: center" во 2-й div

Финал app.component.html : 

<div fxLayout = "row nowrap" fxLayoutAlign = "space-evenly center">
  <img fxFlex="0 0 auto" fxFlexAlign="center" style="height: 3em" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">

  <div fxLayout = "row wrap" fxFlex = "0 1 auto" style="text-align:center">
  <app-many-buttons [N]="10"></app-many-buttons>
  </div>

  <div fxLayout = "row nowrap" fxFlex = "0 0 auto">
      <button mat-button class="materialIconButton">lol_1</button>

      <button mat-button class="materialIconButton">lol_1</button>

      <button mat-button class="materialIconButton">lol_1</button>
  </div>
</div>
...