Solved

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

Posted on 2016-11-23
9
23 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
 

Author Comment

by:dlearman1
ID: 41901239
In this case, Flex is just a common shorthand referring to the CSS Flexible Box specification.
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

707 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now