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 actual width and height measurements to your image code.
Include the line:
img {max-width:100%} /*Open Space */
or
img {width:100%} /*Constrained by Container */
The CSS for the image on this page:
div.flex-container picture {
flex: 1;
flex-direction : column;
margin: 0; padding: 0;
}
div.flex-container picture img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto}
Optimize Your Images
The best way to optimize your images these days is to convert them to one of the newer file formats. The two most popular are avif and WebP.
Swapping Images
with the Picture Element
The bare code without text using the picture element for column 2 on the front page is shown here:
Some of the older browsers might not support the new file formats, so it's a good idea to include a fallback version of the image that displays on error.
There are a lot of fallback codes posted on the internet. I tried several before finding one that actually worked.
