The align-items:baseline; property will position the flex-items at the baseline of the container. The baseline value causes flex-items to be aligned based on the content of the flex-items. This is best explained by the following example which shows the result of using the baseline value:
HTML file: | Displayed by browser: |
---|---|
<style>
.flex-container { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; width: 400px; height: 250px; background-color: lightgrey; } .flex-item1 { background-color: cornflowerblue; width: 100px; margin: 10px; padding: 12px; } .flex-item2 { background-color: cornflowerblue; width: 50px; height: 50px; margin: 10px; } .flex-item3 { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; padding: 20px; } </style> <body> <div class="flex-container"> <div class="flex-item1">This is flex item 1</div> <div class="flex-item2">flex item 2</div> <div class="flex-item3">This is flex item 3</div> </div> </body> |
This is flex item 1
flex item 2
This is flex item 3
|
Padding was added to the first and third flex-items to make each flex-item a different size. Notice how the text inside each flex-items are lined up.