Solved

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

Posted on 2016-11-23
9
43 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
  • 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
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

 

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Host asp.net pages 5 35
CSS z-index issue 3 32
Flex container exceeding stated width in IE11 4 6
How to resize a div in html 3 11
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

831 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