• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 91
  • Last Modified:

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/
0
dlearman1
Asked:
dlearman1
  • 5
  • 4
1 Solution
 
NerdsOfTechTechnology ScientistCommented:
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.
0
 
dlearman1Author Commented:
NerdsOfTech,

Thanks for your comment.  I'm well aware of Bootstrap.  I'm just trying  to see how a Flex solution would work?
0
 
NerdsOfTechTechnology ScientistCommented:
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.
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
dlearman1Author Commented:
In this case, Flex is just a common shorthand referring to the CSS Flexible Box specification.
0
 
NerdsOfTechTechnology ScientistCommented:
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...

3-columns auto-sized with flexbox (flex)
0
 
dlearman1Author Commented:
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

0
 
dlearman1Author Commented:
NerdsOfTech,

Please reply so I can accept and assign points to you. Thanks
0
 
NerdsOfTechTechnology ScientistCommented:
Oh did they change the interface?

No problem.
0
 
dlearman1Author Commented:
I'm not sure about the interface. I haven't been on for awhile so it all seems new to me.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now