Как установить пространство между двумя флексбоксами

Я использую макет flexbox для материального дизайна, и в коробке у меня есть две коробки. Я создаю на jsfiddle, чтобы уточнить, что я имею в виду:

приложение Angular Material

Я хочу установить между этими коробками пробел

<div flex layout="row" layout-align="space-between center">
            <md-toolbar flex="15">
                 <h2 class="md-toolbar-tools">
                    <span>Home</span>
                  </h2>

            </md-toolbar>
                <!--How to set space between -->
            <md-toolbar>
                 <h2 class="md-toolbar-tools" layout-align="end center">
                    <span>Sign Up</span>
                    <span>Sign In</span>
                  </h2>

            </md-toolbar>
        </div>

angular-material
person softshipper    schedule 10.03.2015    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Я думаю, вам нужно «layout-margin» https://material.angularjs.org/latest/layout/options

<div layout="row" layout-margin>
  <div flex>Parent layout and this element have margins.</div>
</div>
person SmoveBB    schedule 17.11.2016

arrow_upward
9
arrow_downward

Для тех, кто заинтересован в решении с использованием Angular Flex Layout, вы можете добиться этого с помощью директива fxLayoutGap.

Без fxLayoutGap

<div fxLayout="row">
   <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>

введите описание изображения здесь

С fxLayoutGap

<div fxLayout="row" fxLayoutGap="20px">
  <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>

введите описание изображения здесь

person Arthur Silva    schedule 21.02.2018

arrow_upward
1
arrow_downward

Я думаю, что вы можете сделать это намного проще:

<md-toolbar>
    <div class="md-toolbar-tools">
        <span>Home</span>
        <span flex></span>
        <div>
            <span>Sign Up</span>
            <span>Sign In</span>
        </div>
    </div>
</md-toolbar>

Вы можете вставить гибкий элемент между элементами HOME и SIGNUP, и он заполнит пространство между ними.

person Zhorzh Alexandr    schedule 10.03.2015