92

When working with flex align-* properties, what's the difference between flex-start and baseline?

The below code snippet gives same output for align-self: flex-start and align-self: baseline.

In which cases will align-self: flex-start and align-self: baseline behave differently?

.flex-container {
  color: white;
  display: -webkit-flex;
  display: flex;
  width: 350px;
  height: 200px;
  background-color: yellow;
}
.flex-item {
  background-color: green;
  width: 50px;
  min-height: 100px;
  margin: 10px;
}
.item1 {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.item2 {
  -webkit-align-self: flex-end;
  align-self: flex-end;
}
.item3 {
  -webkit-align-self: center;
  align-self: center;
}
.item4 {
  -webkit-align-self: baseline;
  align-self: baseline;
}
.item5 {
  -webkit-align-self: stretch;
  align-self: stretch;
}
<div class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item4">baseline</div>
  <div class="flex-item item2">flex-end</div>
  <div class="flex-item item3">center</div>
  <div class="flex-item item5">stretch</div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Zameer Ansari
  • 28,977
  • 24
  • 140
  • 219

2 Answers2

177

See the following two images. The code is identical for both, except for the align-items rule.

align-items: flex-start

enter image description here

align-items: baseline

enter image description here

When using align-items or align-self, the flex-start value will align flex items at the starting edge of the cross-axis of the flex container.

The baseline value will align flex items along their content's baseline.

baseline

The line upon which most letters "sit" and below which descenders extend.

enter image description here

Source: Wikipedia.org

In many cases, when the font size is the same among items (like in the question), or the content is otherwise the same, then flex-start and baseline will be indistinguishable.

But if content size varies among flex items, then baseline can make a noticeable difference.

In terms of where baseline alignment occurs, that is determined by the tallest item in the row.

From the spec:

8.3. Cross-axis Alignment: the align-items and align-self properties

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.

.flex-container {
  color: white;
  display: flex;
  height: 300px;
  background-color: yellow;
  justify-content: space-between;
  align-items: baseline;
}
.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  margin: 10px;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
}
.item1 {  font-size: 2em;  }
.item2 {  font-size: 7em;  }
.item3 {  font-size: .5em; }
.item4 {  font-size: 3em;  }
.item5 {  font-size: 10em; }

/*
.item1 {  align-self: flex-start; }
.item2 {  align-self: flex-end; }
.item3 {  align-self: center; }
.item4 {  align-self: baseline; }
.item5 {  align-self: stretch; }
*/

#dashed-line {
  border: 1px dashed red;
  position: absolute;
  width: 100%;
  top: 170px;
}
<div class="flex-container">
  <div class="flex-item item1">A</div>
  <div class="flex-item item2">B</div>
  <div class="flex-item item3">C</div>
  <div class="flex-item item4">D</div>
  <div class="flex-item item5">E</div>
</div>

<div id="dashed-line"></div>

jsFiddle version

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    This is mostly a decent answer, and more or less answers the question. But there is one major flaw: The "baseline" being referred to in the spec is not about typography. It's about the flex container baseline: https://drafts.csswg.org/css-flexbox-1/#flex-baselines. So the examples you give here would not work if the content was more than one line of text in any single box. See this demo: https://jsbin.com/quyufix/edit?html,css,output – Louis L. Mar 27 '18 at 21:08
  • I still don't fully understand it myself. But see this demo: https://jsbin.com/yoqupih/edit?html,css,output. It seems to be the first line of text (or other inline elements) that creates the baseline. In that example, the first letter (thus, first line) on each is a different size, but the "baseline" is always under that first line, regardless of text size for each. – Louis L. Mar 28 '18 at 15:02
  • In your first demo and also in your second, baseline alignment appears to be the first line of text in each box. Typography appears to matter, but I agree with you that [language in the spec](https://drafts.csswg.org/css-flexbox-1/#flex-baselines) is far from clear. @LouisL. – Michael Benjamin Mar 29 '18 at 13:37
  • 1
    Btw, I've learned a lot over the years from [your website](https://www.impressivewebs.com/). I also quoted you in [my SO answer here](https://stackoverflow.com/q/8564752/3597276) 2 years ago. Thanks, and keep up the great work! @LouisL. – Michael Benjamin Mar 29 '18 at 13:41
  • 1
    Ha, nice, thanks for the shoutout! And yeah, you're right, the baseline value is partly about typography, but I would say it's more about inline elements in HTML. This demo kind of demonstrates that: https://jsbin.com/yoqupih/edit?html,css,output. I've used inline-block elements for each character and I even added top padding to the second one. So baseline still lines up the first line the same way. – Louis L. Mar 29 '18 at 14:06
  • Could you update your answer to show the difference when `flex-direction: column;`? I've tried to fiddle with some examples and can't seem to make an example show the difference. – Katrina Aug 02 '19 at 19:20
  • @GreeKatrina, *"If the item does not have a baseline in the necessary axis, then one is synthesized from the flex item’s border box."* ([spec](https://www.w3.org/TR/css-flexbox-1/#valdef-align-items-baseline)) – Michael Benjamin Aug 02 '19 at 19:24
2

baseline

baseline

I wanted to clarify something really quick.

In terms of where baseline alignment occurs, that is determined by the tallest item in the row.

Not sure if I entirely agree here with all due respect. As you can see, the baseline causes these items to adhere to the item with the largest text size (font size), not the item that is the largest. In fact, the item with the largest text in this case, just so happens to be one of the smaller elements in the collection.

In your example, E was the largest element, and E also had the largest font size. I hope this helps anyone else really hone in on some really crispy designs. Cheers!

Anthony Moon Beam Toorie
  • 115
  • 7