/ / Použite flexbox na zarovnanie 2 divov: jedno stredové a druhé stredové [duplicitné] - css, flexbox

Použite flexbox na zarovnanie 2 divov: jeden stredný stred a druhý spodný stred [duplicitné] - css, flexbox

Snažím sa používať flexbox na zarovnanie dvoch divov v rámci ich rodičov s jedným úplne centrovaným a druhým spodným stredom. Obaja zdieľajú rovnakú rodičovskú div. Výsledok by mal byť takto:

------------------------
|                      |
|                      |
|                      |
|                      |
|        ------        |
|        | b1 |        |
|        |    |        |
|        ------        |
|                      |
|        ------        |
|        | b2 |        |
|        ------        |
------------------------

To je to, čo mám za sebou:

div {
box-sizing: border-box;
border: 1px black solid;
}

.text-center{
text-align:center;
}

.flex-wrap {
width:400px;
height: 400px;
background: #ddd;
display: flex;
align-items: flex-start;
}

.flex-centered {
align-self: center;
}

.flex-bottom-center {
align-self: flex-end;
}
<div class="flex-wrap">
<div class="flex-centered text-center">
Here is some text for the center
</div>

<div class="flex-bottom-center text-center">
Here is some text for the bottom center
</div>
</div>

Zdá sa, že skoro tam, ale prvý box je vľavo zarovnaný, zatiaľ čo spodná časť je správne zarovnaná.

Môže niekto pomôcť?

editovať: to nie je to isté ako otázka citovaná v označení moja ako duplicitná: táto otázka sa pýta, ako urobiť dno div rovnomerne k stredu div a dno. Dolu sa pýta, ako umiestniť dno div v spodnej časti kontajnera.

odpovede:

2 pre odpoveď č. 1

Môžete zmeniť na flex-direction: column a potom môžete použiť okraje na pozíciu divs

div {
box-sizing: border-box;
border: 1px black solid;
}
.text-center{
text-align:center;
}

.flex-wrap {
width:400px;
height: 400px;
background: #ddd;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}

.flex-centered, .flex-bottom-center {
margin-top: auto;
}
<div class="flex-wrap">
<div class="flex-centered text-center">Here is some text for the center</div>
<div class="flex-bottom-center text-center">Here is some text for the bottom center</div>
</div>

Ak chcete pozíciu .flex-centered vo vertikálnom strede rodičovského elementu musíte ho odstrániť z prúdenia elementov pomocou position: absolute

div {
box-sizing: border-box;
border: 1px black solid;
}
.text-center {
text-align: center;
}
.flex-wrap {
width: 400px;
height: 400px;
background: #ddd;
display: flex;
justify-content: flex-end;
flex-direction: column;
position: relative;
align-items: center;
}
.flex-centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="flex-wrap">
<div class="flex-centered text-center">Here is some text for the center</div>
<div class="flex-bottom-center text-center">Here is some text for the bottom center</div>
</div>