CODEWITHSUNDEEP
htmlcssflexbox
Kimberly Wright
Kimberly Wright

Reputation: 531

Aligning images on two rows with flexbox

I am trying to create a flexbox with 6 boxes that go across the page.

However, for some reason it won't behave properly as they have different sizes.

enter image description here

they must behave like this:

enter image description here

/* ================================= 
      Base Styles
    ==================================== */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.row {
  flex: 1;
}
/* ================================= 
      Media Queries
    ==================================== */

@media (min-width: 769px) {
  .main-header,
  .main-nav,
  .row {
    display: flex;
  }
  .main-header {
    flex-direction: column;
    align-items: center;
  }
  .col {
    flex: 1 50%;
  }
  .row {
    flex-wrap: wrap;
  }
  .item-2 {
    order: -1;
  }
}
@media (min-width: 1025px) {
  .main-header {
    flex-direction: row;
    justify-content: space-between;
  }
  .col {
    flex-basis: 0;
  }
  .item-1 {
    flex-grow: 1.4;
  }
}
<div class="row">

  <div class="item-1 col">
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
  </div><!--/.primary-->

  <div class="item-2 col">
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
  </div><!--/.secondary-->

  <div class="item-3 col">
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
  </div><!--/.tertiary-->

  <div class="item-4 col">
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
  </div><!--/.tertiary-->

  <div class="item-5 col">
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
  </div><!--/.tertiary-->

  <div class="item-6 col">
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
  </div><!--/.tertiary-->

</div>

YOU CAN VIEW THE JSFIDDLE HERE: https://jsfiddle.net/ju157mnj/2/

Upvotes: 8

Views: 7880

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371133

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.col {
   flex: 0 0 calc(33.33% - 30px);   /* flex-basis adjustment for margin */
   margin: 5px;
}

img { 
    width: 100%;
}
<div class="row">

    <div class="item-1 col">
        <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
    </div><!--/.primary-->

    <div class="item-2 col">
        <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
    </div><!--/.secondary-->

    <div class="item-3 col">
        <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
    </div><!--/.tertiary-->

    <div class="item-4 col">
        <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
    </div><!--/.tertiary-->

    <div class="item-5 col">
        <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
    </div><!--/.tertiary-->

    <div class="item-6 col">
        <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png">
    </div><!--/.tertiary-->

</div>

Revised Fiddle

Upvotes: 3

wdickerson
wdickerson

Reputation: 869

Made these changes to your css:

img {
  max-width: 100%; //Keeps the img in its container
}
.col {
  padding: 0 1em;
  flex: 1; 
  min-width: 200px;
}
.row {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

https://jsfiddle.net/v2tuoojd/

Upvotes: 0

theblindprophet
theblindprophet

Reputation: 7927

Your images were quite massive and with your media queries it was a little difficult to edit. However, flex is powerful enough that you shouldn't need media queries. Below are two examples of how you could present your images (wasn't sure of how you wanted them).

Wraps:

.row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    flex-grow: 1;
    margin: 5px;
    text-align: center;
}

.col img {
    height: 60px;
    width: 90px;
}

Fiddle: https://jsfiddle.net/awvpezbt/

3 Per Row (no wrap):

.row {
    display: flex;
}

.col {
    flex-grow: 1;
    margin: 5px;
    text-align: center;
}

.col img {
    height: 60px;
    width: 90px;
}

Fiddle: https://jsfiddle.net/awvpezbt/1/

Upvotes: 0

Related Questions