Kevin Powell - Community•8mo ago

CSS | Flexbox | 6 images

First post so apologies in advance if I miss on formatting w/ anything. Hoping to get some suggestions (maybe guidance) on a coding assignment rooted in using Flex-box to build out a heading and six portraits. There's some emphasis on 'variable-width' & 'fixed-width', which I don't truly understand yet. Specifics The heading needs to display above the six portraits. At a very wide width, all six portraits will display in a single row. At a moderate width, the portraits will display as two rows of three portraits. At a narrow width the portraits will display as three rows to two portraits. Your flex-container will be variable width. Your images will be fixed width and height. I feel like I have a good handle on how flex-box works in theory, & I'm working on a few different small scale experimental projects to get better with 'flex-shrink', 'flex-grow', but I'm not truly there yet I suppose. If anyone has some suggestions or references on how this can be achieved, considerations for sizing images, and maybe some fixed-width/variable-width explanations/convo, would appreciate the help. Thanks!

5 Replies

Eighth•8mo ago

I have an idea regarding small resolution, to arrange in 3 rows of 2 elements, calculate the maximum and minimum size of each element so that they take up the entire width, add flex-wrap and that's it, don't forget to subtract the padding

Ryan•8mo ago

Thanks for the idea @Eighth

Eighth•8mo ago

Please, there is another option, through JS, to set the rules and based on this, the size of each image via setProperty, so the code will be more flexible and the formula will set the number of images in a row for each of the 3 rules

MarkBoots•8mo ago

just use grid and media queries

header{
  width: fit-content;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(var(--_columns, 2), 1fr);
}
@media (min-width:  800px){ header { --_columns: 3 } }
@media (min-width: 1200px){ header { --_columns: 6 } }

header{
  width: fit-content;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(var(--_columns, 2), 1fr);
}
@media (min-width:  800px){ header { --_columns: 3 } }
@media (min-width: 1200px){ header { --_columns: 6 } }

Ryan•8mo ago

So, I’m specifically not allowed to use media queries for this assignment. I have to use ‘variable widths’ & set breakpoints to where the <img> displays a row of 6 at full size, 3 rows at breakpoint B, & 2 at breakpoint C I can’t use Grid either (not that I know how anyway). I had to try to do it with Flexbox. The professor is using a ‘clamp’ property also but I haven’t grasped how he’s utilizing it yet either in his example

Gaming

Programming

CSS | Flexbox | 6 images