I am learning about align-items and I have some doubt. Is align-items: baseline; only work for flex-direction: row; or it also work for flex-direction:column;
Bacause when I am using it with flex-direction:row; it is working perfectly fine but with flex-direction:column; it is not working.
Here is code using flex-direction:row;: Code link
Using flex-direction:row;
* { 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;}<div class="container"><div class="div div-1">DIV1</div><div class="div div-2">DIV2</div><div class="div div-3">DIV3</div><div class="div div-4">DIV4</div><div class="div div-5">DIV5</div></div>With flex-direction:row; it is working fine aligining bases of all element text at a single line.
Here is code using `flex-direction:column;
* { 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;}<div class="container"><div class="div div-1">DIV1</div><div class="div div-2">DIV2</div><div class="div div-3">DIV3</div><div class="div div-4">DIV4</div><div class="div div-5">DIV5</div></div>Why it is not working for flex-direction: column;
With flex-direction:row; it is working fine but with flex-direction:column; it is not working. I tried to understand but couldn't. I think it only works with flex-direction:row; only.