/ / Flexbox verwenden, um 2 divs auszurichten: eine Mitte-Mitte und die andere untere Mitte [duplizieren] - css, flexbox

Verwenden Sie flexbox, um 2 Divs auszurichten: eine Mitte-Mitte und die andere untere Mitte [duplizieren] - css, flexbox

Ich versuche Flexbox zu verwenden, um zwei divs innerhalb ihres Elternteils mit einem vollständig zentrierten und dem anderen unteren Zentrum auszurichten. Sie teilen sich beide das gleiche Elternteil. Das Ergebnis sollte so sein:

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

Das habe ich bisher:

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>

Es scheint fast da, aber die erste Box ist linksbündig ausgerichtet, während die untere rechtsbündig ist.

Kann jemand helfen?

Bearbeiten: Das ist nicht dasselbe wie die Frage, die ich bei der Kennzeichnung von mir als Duplikat angeführt habe: Diese Frage fragt, wie man den Grund bildet div äquidistant zum Zentrum div und der Boden. Meine fragt, wie man den Boden platziert div am Boden des Behälters.

Antworten:

2 für die Antwort № 1

Sie können zu ändern flex-direction: column und dann können Sie Ränder verwenden, um zu positionieren 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>

Wenn du dich positionieren willst .flex-centered In der vertikalen Mitte des übergeordneten Elements müssen Sie es aus den Elementen entfernen, mit denen es fließt 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>