Estoy usando materiales de diseño el diseño flexbox y en una caja, tengo dos cajas. Creo en jsfiddle, para aclarar lo que quiero decir:

Angular Material de aplicación

Quiero establecer entre estos cuadros de un espacio

<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>
InformationsquelleAutor zero_coding | 2015-03-10

3 Comentarios

  1. 3

    Para aquellos interesados en una solución con Angular Flex Diseño, usted puede lograr esto con fxLayoutGap directiva.

    Sin fxLayoutGap

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

    Cómo establecer el espacio entre dos flexbox

    Con fxLayoutGap

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

    Cómo establecer el espacio entre dos flexbox

  2. 1

    Creo que se puede hacer que sea mucho más sencillo:

    <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>
    

    Puede insertar elemento flexible entre el HOGAR y la SUSCRIPCIÓN de los elementos y llenar el espacio entre ellos.

Dejar respuesta

Please enter your comment!
Please enter your name here