elementi Align utilizzando flex

Question

Ho un requisito come illustrato di seguito:

|[]     [][]| 

Un elemento a sinistra della finestra e due elementi sul lato destro della finestra. Per imparare display: flex, sto provando questo layout senza avvolgere gli elementi.

Questo layout è possibile con il flexbox?

Ecco il codice HTML:

<div class="parent"> 
    <div class="child child--left"></div> 
    <div class="child child--right"></div> 
    <div class="child child--right"></div> 
</div> 

Ho provato ad utilizzare align-items e align-self ma non serve. Per favore aiuto.

CSS:

.parent{ 
    display: flex; // flexbox 
} 

Answer 1

È possibile utilizzare margin-left:auto nel div è necessario nella parte destra:

.parent { 
 
    display: flex; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 

 
.child { 
 
    flex: 0 0 20px; 
 
    border: solid 1px green; 
 
} 
 

 
.child--right { 
 
    margin-left: auto; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child child--right"></div> 
 
    <div class="child"></div> 
 
</div>

Answer 2

è necessario utilizzare un spacer definito come flex:auto; al fine di allineare i Flex-box come previsto: DEMO

CSS

.parent{ 
    display:flex; 
} 
.spacer{ 
    flex:auto; 
} 

e il tuo HTML sarebbe:

<div class="parent"> 
    <div class="child child--left"></div> 
    <div class="spacer"></div> 
    <div class="child child--right"></div> 
    <div class="child child--right"></div> 
</div> 

Answer 3

È possibile utilizzare Flex per riempire uno spazio

body { 
 
    margin: 0; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    background: purple; 
 
    width: 100%; 
 
    height: 75px; 
 
} 
 
.item { 
 
    background: orange; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 12.5px; 
 
} 
 
.filler { 
 
    flex-grow: 1; 
 
}

<div class="flex"> 
 
    <div class="item"></div> 
 
    <div class="filler"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

noterete ho aggiunto un div con la classe e si imposta filler deve avere flex-grow: 1; Ciò significa che div occuperà sempre lo spazio rimanente.

Answer 4

Applicando: margin-<direction>: auto al figlio di un elemento di flessione sarà essenzialmente galleggiare la voce nella direzione opposta (senza nessuna delle complicazioni di float).

.child--right { 
    margin-left: auto; 
} 

Answer 5

HTML

<div class="parent"> 
     <div class="child child--left"><div class="box"></div></div> 
     <div class="child child--right"><div class="box"></div></div> 
     <div class="child child--right"><div class="box"></div></div> 
    </div> 

css

.parent{ 
     display: flex; 
     justify-content: center; 
    } 

    .box{ 
     width: 200px; 
     height: 200px; 
     background: #333; 
     margin: 20px 
    } 

Fonte: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Fiddle: https://jsfiddle.net/rittamdebnath/315wps5g/

Answer 6

Un modo per farlo senza usare un elemento di riempimento aggiuntivo consiste nell'utilizzare i margini automatici.

CSS

.child--left { 
    margin-right: auto; /* <== here's the auto margin */ 
} 

Si aggiungerà un margine a destra del .child--left che riempirà lo spazio disponibile all'interno .parent (in sostanza che agisce come se ci fosse un elemento di riempimento tra destra e sinistra i bambini, ma in realtà senza l'elemento di riempimento)