Ist Align-Item: Baseline nur mit Flex-Regisseur-Zeile funktioniert? ⇐ HTML

[Anonymous]

Ich lerne über Align-items und ich habe Zweifel. Ist Align-items: Baseline; Nur für die Flex-Region: Zeile; oder es funktioniert auch für die flex-Richtung: Spalte;
bacause, wenn ich es mit Flex-Region verwende: Zeile; : Codeverbindung < /p>
Verwenden Flex-Direktion: Zeile; < /strong> < /p>


* {
margin: 0px;
padding: 0px;
}

.container {
width: 70vw;
height: 70vh;
background-color: orange;
border: 1px solid red;
display: flex;
flex-direction: row;
justify-content: center;
align-items: baseline;
}

.div {
width: 40px;
height: 40px;
margin: 20px;
background-color: cyan;
}

.div-1 {
padding-top: 10px;
}

.div-2 {
padding-top: 15px;
}

.div-3 {
padding-top: 8px;
}

.div-4 {
padding-top: 30px;
}

.div-5 {
padding-top: 12px;
}< /code>

Code: Select all

DIV1
DIV2
DIV3
DIV4
DIV5
< /code>
< /div>
< /div>
< /p>
Mit Flex-Region: Zeile; Es funktioniert feine Aliginierungsbasen des gesamten Elementtextes in einer einzelnen Zeile.* {
margin: 0px;
padding: 0px;
}

.container {
width: 70vw;
height: 70vh;
background-color: orange;
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: baseline;
}

.div {
width: 60px;
height: 40px;
margin: 20px;
background-color: cyan;
}

.div-1 {
padding-left: 10px;
}

.div-2 {
padding-left: 15px;
}

.div-3 {
padding-left: 8px;
}

.div-4 {
padding-left: 30px;
}

.div-5 {
padding-left: 12px;
}< /code>

DIV1
DIV2
DIV3
DIV4
DIV5

Warum es nicht für die Flex-Region funktioniert: Spalte;
mit

Code: Select all

 flex-direction:row;

Es funktioniert einwandfrei, aber mit Flex-Richtung: Spalte; funktioniert es nicht. Ich versuchte zu verstehen, konnte es aber nicht. Ich denke, es funktioniert nur mit Flex-Richtung: Zeile; nur.