Draw squares aligned in a row

Question

Draw squares aligned in a row

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

how to draw several squares, my html structure is: I think it draws but I want to space them 1px, and I want to draw more boxes up

.cajas {
  width: 5px;
  height: 5px;
  padding-right: 3px;
  background-color: red;
}

.cajitas {
  display: flex;
}

<div class="cajitas">
  <div class="cajas">

  </div>
  <div class="cajas">

  </div>
  <div class="cajas">

  </div>
  <div class="cajas">

  </div>
  <div class="cajas">

  </div>
  <div class="cajas">

  </div>
  <div class="cajas">

  </div>
</div>

css

asked by hubman 08.12.2017 в 06:03

source

2 answers

1

.cajitas {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.cajas {
    width: 50px;
    height: 50px;
    border: 1px solid red;
    margin: 1px;
}

The boxes that are inside the class div "boxes" will be aligned to the center vertically and horizontally, have the resolution that the browser has

answered by 08.12.2017 в 15:59

vertically position Confirm button "delete" in CRUD

score 2 · Accepted Answer

I do not know if I understood you correctly ... but I think you've had it close enough:

.cajas {
  width: 50px;
  height: 50px;
  border: 1px solid red;
  margin: 1px;
}

.cajitas {
  display: flex;
  
  /* Por si quieres cambiar las alineación */
  
  /* justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; */
}

<div class="cajitas">
  <div class="cajas"></div>
  <div class="cajas"></div>
  <div class="cajas"></div>
  <div class="cajas"></div>
  <div class="cajas"></div>
</div>
<div class="cajitas">
  <div class="cajas"></div>
  <div class="cajas"></div>
  <div class="cajas"></div>
  <div class="cajas"></div>
  <div class="cajas"></div>
  <div class="cajas"></div>
</div>

<div class="cajitas">
  <div class="cajas"></div>
  <div class="cajas"></div>
  <div class="cajas"></div>
  <div class="cajas"></div>
  <div class="cajas"></div>
  <div class="cajas"></div>
  <div class="cajas"></div>
  <div class="cajas"></div>
</div>