Scalable CSS Squares

Question

I'm a little confused with width/height and working with flexbox. I've been trying to get each div to be a purple square but it seems to crop to the size of the text. I'd like each colour to maintain a square shape when resized, but just get smaller in scale.

.dark-box
{
    background: #8f6cda;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    font-family: 'verdana';
}

.med-box
{
    background: #a68fd8;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    font-family: 'verdana';
}

.light-box
{
    background: #b5a5d7;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    font-family: 'verdana';
}

.dark-box:hover, .med-box:hover, .light-box:hover
{
    opacity: 0.5;
}

.dark-box a, .med-box a, .light-box a
{
    text-decoration: none;
    color: #ffffff;
    font-family: 'verdana';
}

.col-md-2
{
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    transition: opacity .2s ease-in-out;
}

https://codepen.io/adms2000/pen/wvaaxNz

I'm also unsure why the text only centres when display: flex is set as a property in the tile class. Thanks!

Does this answer your question? [css grid of squares with flexbox](https://stackoverflow.com/questions/29307971/css-grid-of-squares-with-flexbox) — Aleksandr Belugin, Feb 11 '20 at 08:59
Not quite, I just tried it but still seem to be having an issue with the squares cropping to the text. I've edited the code above to fit with the solution you sent across. — andredms, Feb 11 '20 at 09:07

Aleksandr Belugin · Accepted Answer · 2020-02-11T10:45:59.177

Use :before to style your flex-items. Look in snippet.

.col-md-2 {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  transition: opacity .2s ease-in-out;
}

.flex-item {
  /*text-align: center;*/
  text-decoration: none;
  color: #ffffff;
  font-family: 'verdana';
  
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-item:before {
  content: '';
  float: left;
  padding-top: 100%;
  opacity: 1;
}

.dark-box {
  background: #8f6cda;
}

.med-box {
  background: #a68fd8;
}

.light-box {
  background: #b5a5d7;
}

.flex-item:hover {
  opacity: 0.5;
}

.flex-item a {
  text-decoration: none;
  color: #ffffff;
  font-family: 'verdana';
}

<div class="col-md-2">
  <div class="dark-box flex-item">
    <span>Hello</span>
  </div>
</div>

<div class="col-md-2">
  <div class="med-box flex-item">
    <span>Hello</span>
  </div>
</div>

<div class="col-md-2">
  <div class="light-box flex-item">
    <span>Hello</span>
  </div>
</div>

Thanks! This seems to be working a bit better. Is there a reason why the squares overlap when resizing? Is it also possible to use a % for the padding? — andredms, Feb 11 '20 at 10:21
@andredms updated answer, use `width` instead of `padding` for `flex-items` — Aleksandr Belugin, Feb 11 '20 at 10:47

Shervin Mirostovar · Answer 2 · 2020-02-11T11:01:16.967

you can try the following solution:

HTML:

<div class="container">

    <div class="box">
      <div class="box-text">Hello</div>
      <div class="box-content">
        <div class="box-fill box-fill-1"></div>
      </div>
    </div>

    <div class="box">
      <div class="box-text">Hello</div>
      <div class="box-content">
        <div class="box-fill box-fill-2"></div>
      </div>
    </div>

    <div class="box">
      <div class="box-text">Hello</div>
      <div class="box-content">
        <div class="box-fill box-fill-3"></div>
      </div>
    </div>
</div>

CSS:

.container {
  display: flex;
}

.box {
  position: relative;  
  line-height: 0;     
}

.box-content {
  padding-bottom: 100%;
}

.box-fill {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;  
  width: 100%;
  height: 100%;
  z-index: 1;
}

.box-fill-1 {
  background-color: #8f6cda; 
}

.box-fill-2 {
  background-color: #a68fd8;
}

.box-fill-3 {
  background-color: #b5a5d7;
}

.box-text {
  position: relative;
  top: 50%;
  padding: 0 5px;
  z-index: 2;
}

Test-Link: https://codepen.io/shervinmr/pen/vYOOzpK

Scalable CSS Squares

2 Answers2