Flexbox: Dopasuj dolną do środkowej?

Question

Czy ktoś wie, jak utworzyć ten układ, używając Flexbox?

Tekst zostanie umieszczony w centrum, a przycisk zostanie umieszczony między tekstem i na dole.

mam to teraz:

.aligner { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    height: 100%; 
 
}

<div class="aligner"> 
 
    <h3>SUPERMAN</h3> 
 
    <p>FTW</p> 
 
    <button>BUTTON</button> 
 
</div>

To wyrównuje wszystko w centrum miasta, ale chcę tylko tekst, aby być w centrum, a przycisk pomiędzy centrum i na dole.

Answer 1

Można spróbować tego układu:

• elementu anonimowi flex: 1
• tytuł i podtytuł (tytułów)
• elementu z flex: 1 i display: flex.

Elementy powyżej i poniżej tytułu będą zajmować wolne miejsce po tytułach w równych ilościach. Więc tytuły zostaną wyśrodkowane.

Elementy te mogą być również pojemnikami elastycznymi i można dostosować ich zawartość do własnych potrzeb.

html, body {height: 100% } * { margin: 0; } 
 
.aligner, .below { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
.aligner { 
 
    height: 100%; 
 
} 
 
.aligner::before { content: ''; } 
 
.aligner::before, .below { 
 
    flex: 1; 
 
}

<div class="aligner"> 
 
    <h3>SUPERMAN</h3> 
 
    <p>FTW</p> 
 
    <div class="below"> 
 
    <button>BUTTON</button> 
 
    </div> 
 
</div>

Answer 2

Tekst zostanie umieszczony pośrodku, a przycisk zostanie umieszczony między tekstem a dolnym przyciskiem.

Można użyć kombinacji auto margins z niewidzialnego elastycznego elementu do osiągnięcia układ:

(Edit. Napisałem tę odpowiedź, zanim sprawa została zaktualizowana z przykładowym kodem Więc mój kod jest inny niż w pytanie. Ale nadal ma zastosowanie metoda.)

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
.container > div:nth-child(1) { margin-top: auto; visibility: hidden; } 
 
.container > div:nth-child(2) { margin-top: auto; } 
 
.container > div:nth-child(3) { margin-top: auto; margin-bottom: auto; } 
 

 
/* non-essential decorative styles */ 
 
.container { 
 
    background-color: yellow; 
 
} 
 
.box { 
 
    height: 50px; 
 
    width: 150px; 
 
    background-color: lightgreen; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    font-size: 1.2em; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div class="box">BUTTON</div><!-- invisible flex item --> 
 
    <div class="box">SUPERMAN</div> 
 
    <div class="box">BUTTON</div> 
 
</div>

jsFiddle

---

Ponadto, z dwoma niewielkimi zmianami, dolny element może być równo z krawędzią.

.container > div:nth-child(1) { /* margin-top: auto; */ visibility: hidden; } 
.container > div:nth-child(2) { margin-top: auto; } 
.container > div:nth-child(3) { margin-top: auto; /* margin-bottom: auto; */ } 

jsFiddle

OR, wystarczy użyć justify-content: space-between:

.container > div:nth-child(1) { visibility: hidden; } 
/* .container > div:nth-child(2) { margin-top: auto; } */ 
/* .container > div:nth-child(3) { margin-top: auto; } */ 

.container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    background-color: yellow; 
    height: 100%; 
    box-sizing: border-box; 
    justify-content: space-between; /* NEW */ 
} 

jsFiddle

---

Więcej opcji wyrównania patrz: Methods for Aligning Flex Items