Equal Height Columns with Flexbox
HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
CSS
ul { display: flex; }
With the simple code above, you can put any amount of content in a list item, and all list items will have equal height.
Notes:
-
An initial setting of a flex container is
flex-direction: row
, which means that child elements (aka, flex items) will line up horizontally. -
Another initial setting of a flex container is
align-items: stretch
, which causes flex items to expand the full height (or width, depending onflex-direction
), of the container. -
Together, both settings above create equal height columns.
-
Flex equal height columns apply only to siblings.
-
Applying a height to a flex item overrides the equal height feature.
-
Equal height columns apply only to flex items on the same line.
Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.