/ / Użyj Flexbox, aby wyrównać 2 elementy div: jedno centrum centrum, a drugie centrum dolne [duplikat] - css, flexbox

Użyj flexbox, aby wyrównać 2 elementy div: jedno centrum centrum, a drugie centrum dolne [duplikat] - css, flexbox

Próbuję użyć flexbox, aby wyrównać dwa divy w ich rodzicach z jednym całkowicie wyśrodkowanym i drugim środkiem od dołu. Oboje mają ten sam div rodziców. Wynik powinien wyglądać następująco:

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

Oto, co do tej pory miałem:

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>

Wydaje się, że jest prawie na miejscu, ale pierwsze pole jest wyrównane do lewej, podczas gdy dolne jest wyrównane do prawej.

Czy ktoś może pomóc?

Edytować: to nie to samo, co w cytowanym pytaniu o oznaczenie jako duplikatu: to pytanie jest pytaniem, jak zrobić dno div w równej odległości od centrum div i na dole. Mój pyta, jak umieścić dno div na dnie pojemnika.

Odpowiedzi:

2 dla odpowiedzi № 1

Możesz zmienić na flex-direction: column a następnie możesz użyć marginesów do pozycjonowania 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>

Jeśli chcesz ustawić .flex-centered w pionowym środku elementu nadrzędnego musisz usunąć go z elementów przepływu 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>