Стайлинг угловой 7 ряд значков материала

Question

Я пытаюсь стилизовать угловой материал 7.В частности, поле, с которым я борюсь, - это иконка-поле-форма.Я хочу иметь значок, метку, а затем ползунок или радио кнопку в качестве ввода для поля.Но я не могу понять, как заставить 3 элемента выстроиться в линию в вертикальном центре поля формы значка, и я не могу заставить поле формы значка занять только 50% горизонтальной шириныDiv (я хочу, чтобы два поля в одной строке).Кроме того, как решить, когда использовать файл scss в компоненте, а когда использовать глобальный файл styles.scss?

Вот снимок экрана с тем, что у меня есть:

Вот HTML:

    <div layout="row" fxFlex>
       <div class="col-sm-2" flex="50" style="border: 1px solid">
         <h2>General</h2>
         <div class="icon-form-field" fxFlexRow style="border: 1px solid;">
             <mat-icon color="accent">reorder</mat-icon>
             <label class="slider-label" style="align-self: center">Sticky Header</label>
             <mat-slide-toggle
               [checked]="settings.stickyHeader"
               (change)="onStickyHeaderToggle($event)">
             </mat-slide-toggle>
         </div>
       </div>
     </div>

и CSS, который я пробовал до сих пор (это в component.scss):

.mat-icon {
  border: solid 1px black;
}

и вstyles.scss:

.slider-label {
  margin: 10px;
  margin-bottom: 20px;
  border: solid 1px black;
}

Любые советы и идеи приветствуются!

Спасибо .....

Answer 1

Какую версию Flex Layout вы используете?Кажется, вы не используете его должным образом.

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

Я очистил материал Flex Layout, все, что вам действительно нужно, это:

<div fxLayout="row">
  <div fxFlex="50">
  </div>
</div>

И тогда вам просто нужно выровнять элементы (значок, метка, слайдер) по вертикали внутри div.Вы можете сделать это с помощью CSS:

.vertical-align {
  vertical-align: middle;
}

И просто применить класс к вышеупомянутым элементам.