# HTML5/CSS align list-items depending on other columns mutual height

HTMLJavascriptProgramming Scripts

Align list-item with the help of flex. Flex will make columns flexible according to content. The wrapper will layout columns in a row.

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

Flex is basically a property which helps in making element flexible.

Use the following to keep the lists vertically aligned to the bottom −

.col .content {
margin-top: auto;
}
Published on 21-Mar-2018 07:46:37