How can I make the height of the items in this Flexbox equal to the variable width?

#1

I want the width to be decided by the container width and the then the height of each item equal to the width. Can’t get it working though :confused: Here is a codepen.

Any help appreciated!

<div>
  <img class = "icon" src = "http://via.placeholder.com/100x100">
  <img class = "icon" src = "http://via.placeholder.com/100x100">
  <img class = "icon" src = "http://via.placeholder.com/100x100">
  <img class = "icon" src = "http://via.placeholder.com/100x100">
  <img class = "icon" src = "http://via.placeholder.com/100x100">
  <img class = "icon" src = "http://via.placeholder.com/100x100">
  <img class = "icon" src = "http://via.placeholder.com/100x100">
  <img class = "icon" src = "http://via.placeholder.com/100x100">
</div>

div {
  display : flex;
  flex-flow : row wrap;
  width : 200px;
  height : auto;
  border : solid;
}

.icon {
  margin : 2%;
  flex : 1 1 20%;
  height : auto;
  min-width : 0;
  max-width : 25%;
  min-height : 0;
}
#2

add JQuery (with the cog icon as you did bootstrap in the quickadd), then add the following into JavaScript panel

var $width = $(".icon").prop("width");
console.log($width);
$(".icon").css("height", $width);```
1 Like
#3

You would find this easier with CSS display: grid https://www.w3schools.com/css/css_grid.asp

1 Like
#4

Thanks for your comment, but I’m after a CSS solution ideally. I should have specified, my apologies!

#5

This looks promising, I’ll check it out thanks!

#6

Not sure if this is what you were attempting but this is one way to lay out 2 rows of boxes:

1 Like
#7

I think I’ve managed to figure out how to do what I’m after. In this codepen, you can see the same 8 boxes in the actual layout I’m trying to achieve. If you change the width on the outer wrapper, you can see that the icons (images) grow and shrink proportionally up to the 100px starting resolution, which is what I’m after. I’ve just got to sort out my max-widths/heights etc.

Thank you for the grid suggestion, I want to delve into this anyway as it has been on my radar, but I haven’t got round to checking it out. If you do happen to know how to achieve this result in grid, it would be a great jumping off point but thanks either way!

#8

I know it may be a sore point, but w3schools is a fantastic reference point for css and html what you are looking for is the box model in css, you can create some interesting grids, although most of this can be done automatically with bootstrap, which is where i would probably start looking, unless you feel the absolute need to go poking around the depths of css…

1 Like
#9

Is w3schools a sore point for people? I use that site all the time, it’s really helpful. As for poking around the depths of CSS, that’s pretty accurate. I started out using Bootstrap and jQuery also, but decided to limit myself to vanilla CSS and JS to hopefully get more understanding. I do plan to start using them at some point though, because they make life much easier.

#10

I believe you only need to apply display:flex on the container which is “flexing” the child components in it. You seem to have it on everything.
But if it works for you, it works.:+1:
You can use text-align: center to center text.

1 Like
#11

i wasn’t sure about how people receive information, some i’ve spoken to hate using w3schools, some love it as a reference point. I personally love it as reference.

1 Like
#12