Align items using flexbox

Question

Align items using flexbox

Navigation

#1 by (1 votes)

1

Greetings to the whole community, I'm entering the world of boostrap, I need help to align 6 items by flexbox so that they are like a staircase, then I show a photo of the items

! Items to order 1

This I already did with only 3 items through align-self.

.contenedor {
  width: 800px;
  height: 500px;
  background: gray;
  margin: 50px auto;
  display: flex;
  flex-direction: row;
  
}

.hijo {
  width: 150px;
  height: 100px;
  background: red;
  margin: 30px;
  padding: 20px;
  font-size: 40px
}

.arriba {
  align-self: flex-start;
}

.centro {
  align-self: center;
}

.abajo {
  align-self: flex-end;
}

<body>
  <div class="contenedor">
    <div class="hijo abajo">A</div>
    <div class="hijo centro">B</div>
    <div class="hijo arriba">C</div>

  </div>

I hope you can help me.

css flexbox

asked by Alejandro Castillo López 26.04.2018 в 22:41

source

1 answer

Draw an odd vector from a matrix. Python Improve this script (linting). Function statements should not be placed in blocks

score 1 · Answer 1

Good afternoon, you could review something like the following example:

HTML:

<div class="grid">
  <div class="cell top">Celda en el top</div>
  <div class="cell ancha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mollis mi a diam tempor, sit amet fermentum turpis posuere. Phasellus a auctor dolor, et feugiat eros. Etiam id quam mauris. Curabitur libero nisi, dignissim sed urna quis, malesuada tristique arcu. Sed purus urna, facilisis sit amet maximus placerat, pharetra eu nisi.</div>
  <div class="cell center">Centro</div>
  <div class="cell bottom">Abajo</div>
</div>

CSS:

*{
  box-sizing: border-box;
}

.grid{
  display: flex;
}

.cell{
  width: 25%;  
  background-color: lightgray;
  padding: 1em;
  margin: 1em;
}
.top{
  align-self: flex-start;
}

.center{
  align-self: center;
}

.bottom{
  align-self: flex-end;
}

Now here is played with the css flexbox guidelines such as top (top), bottom (bottom), center (center) ... and also with the content that your div has ... in any case it would be necessary review to make it dynamic in items that exist in your obj.

I hope you find it useful, greetings.

Bibliography: link