CODEWITHSUNDEEP
htmlcss
user18923455
user18923455

Reputation:

How to make autoresize flex elements?

I have some squares inline:

.parent {
  padding: 0;
  list-style: none;
  display: flex;
  gap: 20px;
}

.parent div {
  background: red;
  width: 120px;
  height: 120px;
}
<div class="parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

I need to resize the squares to fit in one line if the blocks are not fitted inline.

How to do that using flex?

Upvotes: 0

Views: 63

Answers (1)

cSharp
cSharp

Reputation: 3159

If you want the divs to resize, you should not use absolute units such as px, but write them as relative size against the parent div, such as in %. However, you might want to max them out at a certain size before they get too big, so you might want to use a max-width such as follows.

.parent {
  padding: 0;
  list-style: none;
  display: flex;
  gap: 20px;
}

.parent div {
  background: red;
  width: 20%;
  max-width: 120px;
  aspect-ratio: 1;
}
<div class="parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Upvotes: 1

Related Questions