flex box #3

by DannyEnglander

HTML

<div class="flex-container">
  <div class="flex-item">
  <img src ="https://images.unsplash.com/photo-1546801226-104a8000e041?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80">
  </div>
<div class="flex-item">
  <img src ="https://images.unsplash.com/photo-1546801226-104a8000e041?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80">
  </div>
  <div class="flex-item">
  <img src ="https://images.unsplash.com/photo-1546801226-104a8000e041?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80">
  </div>
</div>

CSS

*
{
    margin:0;padding:0;
}
html,body
{
    height: 100%;
}
.flex-container {

    height: 100%;

    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    }
.flex-item
{
    width: 100px;
    height:100px;
    background: brown;
    margin: 0 10px;
}

/*
    Legacy Firefox implementation treats all flex containers
    as inline-block elements.
*/

@-moz-document url-prefix() {
.flex-container {
    width: 100%;
    -moz-box-sizing: border-box;
    }

}

img {
display: block;
    max-width: 100%;
    height: auto;
}