It makes sense that under align-items: baseline, the items on each row whose baselines appear the highest will 'shift down' to meet the lowest baseline.
Using align-items: baseline will give you an intuitive result because it will apply baseline alignment to all the elements (I insist on all). So its result will be the same as applying align-self:baseline to all the elements
html {
font-family: "Ranchers";
font-size: 16px;
}
#flex-container {
display: flex;
width: 300px;
height: 400px;
border: 10px solid black;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
#flex-container>div:nth-child(1) {
padding: 10px 0;
border: solid black 5px;
margin: 8px;
flex-basis: auto;
width: 150px;
height: 100px;
align-self: baseline; /* here */
}
#flex-container>div:nth-child(2) {
padding: 3px;
border: solid black 10px;
border-top: solid black 40px;
margin: 4px;
align-self: baseline; /* here */
}
#flex-container>div:nth-child(3) {
padding: 10px;
border: solid black 10px;
flex-basis: auto;
width: 150px;
}
<head>
<link href="https://fonts.googleapis.com/css2?family=Ranchers&display=swap" rel="stylesheet">
</head>
<div id="flex-container">
<div style="background-color: blue;">I am div 1.</div>
<div style="background-color: red;">I am div 2</div>
<div style="background-color: green;">I am div 3</div>
</div>
Now, applying baseline to only one element is a different story because the other one will have its default alignment or the one defined by align-items (which is flex-start in your case). So we start placing the first item following this rule:
flex-start
The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. ref
Then we place the second one:
baseline
The flex item participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line.
So following both rules, both item are placed flush against the cross-start edge of the line.
html {
font-family: "Ranchers";
font-size: 16px;
}
#flex-container {
display: flex;
width: 300px;
height: 400px;
border: 10px solid black;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
align-items:flex-start;
}
#flex-container>div:nth-child(1) {
padding: 10px 0;
border: solid black 5px;
margin: 8px;
flex-basis: auto;
width: 150px;
height: 100px;
}
#flex-container>div:nth-child(2) {
padding: 3px;
border: solid black 10px;
border-top: solid black 40px;
margin: 4px;
align-self: baseline; /* here */
}
#flex-container>div:nth-child(3) {
padding: 10px;
border: solid black 10px;
flex-basis: auto;
width: 150px;
}
<head>
<link href="https://fonts.googleapis.com/css2?family=Ranchers&display=swap" rel="stylesheet">
</head>
<div id="flex-container">
<div style="background-color: blue;">I am div 1.</div>
<div style="background-color: red;">I am div 2</div>
<div style="background-color: green;">I am div 3</div>
</div>
In other words, applying baseline alignment to one element is useless since it's the only one that will participate to the baseline alignment and it will logically be the one with
the largest distance between its baseline and its cross-start margin edge and it will get placed on the top.
You will see a difference in case you have at least two elements with baseline alignment:
html {
font-family: "Ranchers";
font-size: 16px;
}
#flex-container {
display: flex;
width: 300px;
border: 10px solid black;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
align-items:flex-start;
}
#flex-container>div:nth-child(1) {
padding: 10px 0;
border: solid black 5px;
margin: 4px;
flex-basis: auto;
height: 100px;
}
#flex-container>div:nth-child(2) {
padding: 3px;
border: solid black 10px;
border-top: solid black 40px;
margin: 4px;
align-self: baseline; /* here */
}
#flex-container>div:nth-child(3) {
padding: 10px;
border: solid black 10px;
align-self: baseline; /* here */
}
<head>
<link href="https://fonts.googleapis.com/css2?family=Ranchers&display=swap" rel="stylesheet">
</head>
<div id="flex-container">
<div style="background-color: blue;">I am div 1.</div>
<div style="background-color: red;">I am div 2</div>
<div style="background-color: green;">I am div 3</div>
</div>
<div id="flex-container">
<div style="background-color: blue;">I am div 1.</div>
<div style="background-color: red;border-top:0">I am div 2</div>
<div style="background-color: green;padding-top:50px;">I am div 3</div>
</div>
Note how in both cases, the blue div will always be on the top and will never participate in the baseline alignment and only the other two are considered.
