HTML5/CSS align list items based on mutual height of other columns

Align list items by using flex. Flex makes columns flexible based on their content. The wrapper will lay out the columns in a row.

.wrap{
   display : flex
}// This will help wrapper to become flexible
.wrap.col{
   flex: 1 0 33%;
}

Flex is basically an attribute that helps make an element flexible.

Use the following code to vertically align the list to the bottom −

.col .content {
   margin-top: auto;
}

The above is the detailed content of HTML5/CSS align list items based on mutual height of other columns. For more information, please follow other related articles on the PHP Chinese website!