How to align elements side by side?

Asked

Viewed 69 times

2

How can I align the div’s so that the white part is filled with the elements below it (5,6,7)?

main {
    width: 200px;
    display: flex;
    flex-wrap: wrap;

    text-align: center;
    line-height: 50px;  
    font-size: 15px;
    font-weight: bold;
    color: #fff;

}

div {
    width: 50px;
    height: 50px;
    background-color: #581b98;
}

div:first-child {
    height: 100px;
    background-color: #ff304f;
}

div:last-child{
    background-color: #faee1c;
}

/*Flecha para exemplo*/
#teste{
  position: absolute;
  transform: rotate(300deg) translate(100px, 30px);
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%,     60% 80%, 0% 80%);
  background: red;
}
<main>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div></div>
</main>

<div id="teste"></div>

css

  • Maybe if you use display grid and dense, you get the result you want

  • What you’re trying to do is call masonry layout, to achieve the result you only expect with CSS using flexbox, you’d have to change the flow of Row to column, without varying the width of the items ... or as @hugocsl said, use the grid technique. Here’s the link to a great article to better understand how it works https://w3bits.com/css-masonry/

  • Use Grid Area. See this Video from 02:05:18 If I explained maybe you wouldn’t understand, but in the video you will understand the logic

1 answer

0

Check if this is what you wanted! I could not understand right.. but I did to fill the blank!

Follows the code:

main {
  width: 200px;
  display: flex;
  flex-wrap: wrap;
}

div {
  width: 50px;
  height: 50px;
  background-color: #581b98;
}

div:nth-of-type(5) {
  height: 50px;
  background-color: #ff304f;
}

div:nth-of-type(1) {
  height: 50px;
  background-color: #ff304f;
}

div:last-child {
  height: 50px;
  background-color: #faee1c;
}

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.