Flex in columns

flex-in-columns.markdown

Flex in columns

A Pen by Matic Leva on CodePen.

License.

index.html

<div class="images">
<div class="image"><img src="https://images.unsplash.com/photo-1542321508-2160d24e6c7f"></div>
<div class="image"><img src="https://images.unsplash.com/photo-1537005081207-04f90e3ba640"></div>
<div class="image"><img src="https://images.unsplash.com/photo-1541202060524-fb245ae9b9ec"></div>
</div>

style.sass

body
  margin: 0

.images
    column-count: 2
    column-gap: 10px

.image
    display: flex
    align-items: center
    justify-content: center
    flex-direction: column
    border: 2px solid red
  
.image:not(:last-child)
    margin-bottom: 10px

.image img
    display: block
    width: 100%