You can go to my demo to download the code and try out on your own.Github repository link for css3flexboxdemo is Flexbox Layout Demo.In the github repo, look for file demo-of-align-item-baseline.html which is relevant to this blog.

With baseline,it means the line upon which most letters sit.When this value is set for Flex Items,then it will align Flex Item along their contents baseline.So if you everu want the text isnside the flex items to line up, go with baseline.In order tp understand it better lets look at an egample. In the first eg,I will have align-items to be flex-start

                  <style>    
                  .flex-container {
                    display: flex;
                    background-color: green;
                    align-items: flex-start;
                    flex-direction: row;
                    height: 100px;
                  }
                  .flex-container > div {
                    width: 1200px;
                  }
                  .item1 {
                    height: 40px;
                    background-color: red;
                    padding: 10px;
                    font-size: 30px;
                  }
                  .item2 {
                    height: 50px;
                    background-color: grey;
                    padding: 10px;
                    font-size: 60px;
                  }
                  .item3 {
                    height: 40px;
                    background-color: cyan;
                    padding: 10px;
                    font-size: 15px;
                  }
                  .item4 {
                    height: 40px;
                    background-color: lightcoral;
                    padding: 10px;
                    font-size: 40px;
                  }
                  .item5 {
                    height: 40px;
                    background-color: lightskyblue;
                    padding: 10px;
                    font-size: 50px;
                  }
                  </style>
                  

If you see the above result closely, you will notice that the text is not aligned properly

Now if you check the resulting image closely and observe, you will notice that all divs/children/Flex Items kind of pass through through the line marked in red.(Please zoom in if you want to see the image better)

Now just to confirm that our understanding is correct of baseline, lets actually try that out.Replace flex-start with baseline for align-items property.

                  <style>    
                  .flex-container {
                    display: flex;
                    background-color: green;
                    align-items: baseline;
                    flex-direction: row;
                    height: 100px;
                  }
                  .... 
                   Rest all remain same as in egample above
                  </style>
                  

Again, please zoom into image to see the baseline better.This time you can see how text inside Flex Items are aligned nicely.All the text is sitting on the baseline.Hope this clarifies baseline value of align-items property

Some Useful links for further reads

• Flexbox Layout Demo Github Code
• Basics of flexbox
• Compare Flexbox layout module with Bootstrap
• What is flexbox-direction and flex-wrap in detail
• What is justify-content property in flexbox-layout
• What is align-items property in flexbox-layout
• What does flex-basis mean in flexbox-layout
• What does order value mean in flexbox-layout
• What is flex-grow and flex-shrink property in flexbox-layout

You can go to my demo to download the code and try out on your own.Github repository link for css3flexboxdemo is Flexbox Layout Demo.In the github repo, look for file demo-of-flex-direction-and-flex-wrap-property.html which is relevant to this blog.