CODEWITHSUNDEEP
htmlcss
Timuçin Çiçek
Timuçin Çiçek

Reputation: 1616

How to make flex box (not only for width)

As you know there's a Flex-Box on w3schools example https://www.w3schools.com/css/css3_flexbox.asp . I want to use this logic somewhere in my project and changed a little of this flexBox demo as I wished.When you make the page width less by mouse cursor,box is only getting smaller as width.I also want it getting smaller the height of the box in the same ratio as width getting smaller.This is what Google Material Grid does but I can't use it because I'll use this inside Mat-Menu,not as Grid which covers whole page.Here I tried to demonstrate what I want with images and added what I've done in the code below

What I tried https://www.w3schools.com/code/tryit.asp?filename=G8UM6A52JZL9

What happens when you make smaller of the box(Only width is getting less)

enter image description here

Here what I want to achieve (height and width both getting aligned):

enter image description here

Upvotes: 0

Views: 60

Answers (1)

Deepu Reghunath
Deepu Reghunath

Reputation: 9673

use viewport width(vw) property to adjust the line-height. Run the result on the full screen and resize the browser window and see the difference. 

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100%;
  margin: 10px;
  text-align: center;
  font-size: 30px;
  line-height: calc(20px + 5vw)
}
<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>Something here</div>
</div>

Upvotes: 1

Related Questions