asked on

How can I create a 3-element, full-width photo grid using Flex?

My code so far creates a horizontal row of 3 images. But, this is not a full-width layout currently.

I want a full browser width layout which is responsive, so when the browser window is scaled the photos will also scale to maintain a full with layout.

Please see this fiddle for code: https://jsfiddle.net/midnightCabbie/fmv9nghx/3/

NerdsOfTech

For significantly more compatibility, using a common compatible framework such as Zurb Foundation 6's "row expanded" container div with "columns small-4" divs or using Twitter Bootstrap in a similar fashion, will produce consistently perfect, full width 3-column results in every viewport.

dlearman1

ASKER

NerdsOfTech,

Thanks for your comment. I'm well aware of Bootstrap. I'm just trying to see how a Flex solution would work?

NerdsOfTech

Do you have a link to the flex / framework you are referring to?

Flex is ambiguous as many companies use that name for their technology.

dlearman1

ASKER

In this case, Flex is just a common shorthand referring to the CSS Flexible Box specification.

NerdsOfTech

Thanks for the clarification.

You will want your images to have a max-width of 100% to keep aspect ratio while shrinking and have your flex columns be defined as flex: 1. I made classless reference to the child elements of the flex container in my code; If you have other elements planned, I recommend creating classes for those elements as you did in your previous code. I added additional compatibility references for flex as well.

<html>
<head>
<style>
.flex-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex-container div {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto; 
	
    text-align: center;
}
.flex-container div img {
	max-width:100%;
}

</style>
</head>
<body>

<div class="container">
	<div>
		<img src="http://placehold.it/350x150">
	</div>
	<div>
		<img src="http://placehold.it/350x150">
	</div>
	<div>
		<img src="http://placehold.it/350x150">
	</div>
</div>
</body>
</html>

Open in new window

add margins if you want as well...

dlearman1

ASKER

NerdsOfTech,

Thanks for your input. You were close on this one. See solution at http://jsfiddle.net/midnightCabbie/fmv9nghx/

<style>
.photobar-3 {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: center;
  flex-wrap: nowrap;
  background-color: #FF00FF;
}

.photobar-3 > img {
  flex: 1 1 33.33333%;
}
.photobar-3 > img:nth-child(2) {
  margin: -0 1rem;
}
</style>

<jhtml>
<body>
<div class="photobar-3">
  <img src="http://placehold.it/250x150" class="img-responsive">
  <img src="http://placehold.it/250x150" class="img-responsive">
  <img src="http://placehold.it/250x150" class="img-responsive">
</div>
</body>
</html>

Open in new window

dlearman1

ASKER

NerdsOfTech,

Please reply so I can accept and assign points to you. Thanks

ASKER CERTIFIED SOLUTION

NerdsOfTech

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dlearman1

ASKER

I'm not sure about the interface. I haven't been on for awhile so it all seems new to me.