Solved

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

Posted on 2016-11-23
9
54 Views
Last Modified: 2016-11-27
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
Comment
Question by:dlearman1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 19

Expert Comment

by:NerdsOfTech
ID: 41900561
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
 

Author Comment

by:dlearman1
ID: 41900767
NerdsOfTech,

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

Expert Comment

by:NerdsOfTech
ID: 41900785
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:dlearman1
ID: 41901239
In this case, Flex is just a common shorthand referring to the CSS Flexible Box specification.
0
 
LVL 19

Expert Comment

by:NerdsOfTech
ID: 41901954
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
 

Author Comment

by:dlearman1
ID: 41903544
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
 

Author Comment

by:dlearman1
ID: 41903566
NerdsOfTech,

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

Accepted Solution

by:
NerdsOfTech earned 500 total points
ID: 41903586
Oh did they change the interface?

No problem.
0
 

Author Closing Comment

by:dlearman1
ID: 41903615
I'm not sure about the interface. I haven't been on for awhile so it all seems new to me.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Mobile page Scrolling down when refreshing 4 69
Place text over image using CSS 6 61
How to put a "check" next to active checkboxes. 5 28
Bootstrap 3 - Style a dropdown 1 27
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question