99

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>

0

2 Answers 2

194

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

7
  • 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: 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: jsbin.com/quyufix/edit?html,css,output
    – Louis L.
    Commented Mar 27, 2018 at 21:08
  • I still don't fully understand it myself. But see this demo: 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.
    Commented Mar 28, 2018 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 is far from clear. @LouisL. Commented Mar 29, 2018 at 13:37
  • 1
    Btw, I've learned a lot over the years from your website. I also quoted you in my SO answer here 2 years ago. Thanks, and keep up the great work! @LouisL. Commented Mar 29, 2018 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: 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.
    Commented Mar 29, 2018 at 14:06
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!

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.