align-items:baseline and align-items:flexstart shows no difference

Question

The baseline and flex-start values for align-items doesn't shows any variations between. I am unable to differentiate between both values because both works same. The code which I used to differentiate between baseline and flex-start is:

div {
  border-right: 1px solid #ff0;
  width: 12vh;
  background-color: orange;
}

.container div:nth-child(1) {
  height: 100px;
}

.container div:nth-child(2) {
  height: 50px
}

.container {
  height: 130px;
  border: 2px solid red;
  display: flex;
}

#st {
  flex-direction: row;
  align-items: baseline;
}

#nd {
  flex-direction: row;
  align-items: flex-start;
}

<section class=container id=st>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>
<section class=container id=nd>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

what is the difference between baseline and flex-start. Editing my code such that baseline and flex-start shows difference is very helpful if you want to answer my question

increase the font-size of only one element and you will see the difference ;) — Temani Afif, Aug 06 '18 at 12:05
@TemaniAfif What if I wanted to align all bottom border of all divs on the same line — Hash, Aug 06 '18 at 12:11

Temani Afif · Accepted Answer · 2018-08-06T12:32:56.890

2

In this particular case the visual is the same because the reference for each alignement is the same. Here is an illustration to better understand:

As you can see the baseline is defined by the text inside. Since you are using the same font-family, font-size, line-height,etc and you have one line of text then the baseline is the same for the 3 boxes thus you will have the same result as flex-start.

Change the baseline of one element by increasing font-size for example and you will notice the difference:

div {
  border-right: 1px solid #ff0;
  width: 12vh;
  background-color: orange;
}

.container div:nth-child(1) {
  height: 100px;
}

.container div:nth-child(2) {
  height: 50px;
  font-size: 25px;
}

.container {
  height: 130px;
  border: 2px solid red;
  display: flex;
}

#st {
  flex-direction: row;
  align-items: baseline;
}

#nd {
  flex-direction: row;
  align-items: flex-start;
}

<section class=container id=st>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>
<section class=container id=nd>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

edited Aug 06 '18 at 12:32

answered Aug 06 '18 at 12:12

Temani Afif

245,468
26
309
415

What to do if I need to situate bottom borders of all divs on a straight line – Hash Aug 06 '18 at 12:15
1

@user9218974 you can use flex-end ;) it's the opposite of flex-start – Temani Afif Aug 06 '18 at 12:17
@TermaniAfif how can i make the height of container equal to the heighest div element dynamically – Hash Aug 06 '18 at 12:19
1

@user9218974 yes, simply remove the fixed height from the container – Temani Afif Aug 06 '18 at 12:19

align-items:baseline and align-items:flexstart shows no difference

1 Answers1