CODEWITHSUNDEEP
cssreactjsmaterial-ui
joels
joels

Reputation: 7711

How to specify height in flex container?

I have a flex wrap container. On smaller screens I show 5 columns and on larger screens I show 10 columns. How do I specify the height of the rows so that the text containers are square in both cases instead of the intrinsic height of the text? I'm hoping to keep the sizing dynamic so when the window is resized, the squares fill out the rows.

https://codesandbox.io/s/fragrant-bird-gzvht?fontsize=14

More like this: square

Instead of this: enter image description here

Upvotes: 0

Views: 149

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105843

You may use the padding or margin with a vertical value in percentage , so it can use the width as reference . a mediaquerie to set a break point to turn rows of ten into 5 will do

example down here or a codepen to play with https://codepen.io/gc-nomade/pen/dybRaZp

.flex-container {
  background: rgb(63, 81, 181);
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  counter-reset: items
}

.flex-item {
  background: tomato;
  margin: 5px;
  color: white;
  font-weight: bold;
  font-size: 2vw;
  text-align: center;
  max-width: calc(10% - 10px);
  flex: 1 0 calc(10% - 10px);
  
  /* can be a flex container too */
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-item:before {/* stretch it to be a square */
  content: '';
  float: left;/* if not a flex child*/
  padding-top: 100%;
}

.flex-item:after {
  counter-increment: items;
  content: counter(items)
}

@media screen and (max-width:800px) {
  .flex-item {
    max-width: calc(20% - 10px);
    flex: 1 0 calc(20% - 10px);
  }
}
<p>play me full page </p>
<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Upvotes: 0

Dupocas
Dupocas

Reputation: 21297

Give each card a fixed height and a fixed width

[theme.breakpoints.up("sm")]: {
  backgroundColor: theme.palette.secondary.main,
  flexBasis: "9.5%",
  height: 60,
  width: 60,
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  margin: 5
}

Edit kind-hawking-si2od

Upvotes: 3

Related Questions