Using Images With Flexbox
The images on this website are simple placeholders used to demonstrate their manipulative capabilities in flexbox. Please excuse the lack of aesthetic effort!
The Rules
Flexbox allows the use of the float property for positioning images inside its child containers. You cannot use it in parent containers!
If you want to add an image to a page in flexbox and make it responsive, follow the same rules you would in conventional CSS:
Rule #1
Do not add the width and height measurements to your image code.
<img src="" width="300px" height="200px" alt="alternate text">
Rule #2
Include the line:
img {max-width:100%}
The CSS for the images on this page:
img.l-img {
max-width:100%;
float:left;
margin: 1rem
}
img.r-img {
max-width:100%;
float:right;
margin: 1rem
}
First Things
Before you start adding images to your web pages you need to decide on an image file format.
In the past we taught the image swapping technique. We've used the images that were used for swapping on this page for the positioning demonstrations.
Today with some of the newer file formats, swapping isn't really necessary.
The avif and WebP formats are the most popular. In most cases they provide a file a fraction of the size of the original after conversion.
At the same time it is still a good idea to provide fallback images that display in older browsers like Internet Explorer that don't support the new formats.
Converting Your Images
The best and easiest tool I've found for converting your bulky png and jpg images to avif or WebP is XnConvert.
It is cross platform, so it can be used on Windows, Linux and Apple platforms.
Linux users, you're in luck. It's in the repository. If you can't see the images after you convert them, install gTuumb. It's also in the repository.
Windows and Apple folks can find it using your favorite SE.
It is free if you aren't using it for business. The license is only $15 if you'd like to donate. It's worth that and more.
The Fallback Code
We used the fallback code on the home page of this mini site.
A condenced version of the code without the path and title is given here:
<img class="l-img" src="road-400.avif" alt="required" onerror="this.src='road-400.png'">
The png version of the road image is 361.2kb. The avif version is 63kb. If the visiting browser doesn't support the avif version, the png version is displayed. When you download the kit change the name of the avif image to road-401.avif, then view the page. The png version will be displayed.
A Word About Flexbox
People get confused about what Flexbox is and many fail to try it for that reason.
Think of Flexbox as just another tool that is used to make creating columns on a web page easier.
Some will even tell you that you can't use the float property for positioning images in flexbox. Nothing could be further from the truth.
It is true that you cannot use it in parent containers, but it is completely functional in child containers.
You can use the float property in child containers to position images, lists and iframes.
The text-align property is also allowed in child containers.
Flexbox isn't built for text flow and image placement. Use conventional CSS for best results.
This left column is a child of the flex-container and we used the float property to position the image to the left.