Css flex element spacing

Asked

Viewed 6,921 times

-1

Hello, Someone who can help me build a static grid if you can call it that: What I want is to be able to add 3 blocks per Row these with a fixed size equal, with tendency to grow vertically. And apply the margins as shown in the image:

inserir a descrição da imagem aqui

Can someone give me a hand?

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  background-color: blue;
  padding: 10px;
}

.box {
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 5px;
}
<div class="wrapper">
  <div class="box">
    Box1
  </div>
  
  <div class="box">
    Box1
  </div>
  
  <div class="box">
    Box1
  </div>
  
  <div class="box">
    Box1
  </div>
  
  <div class="box">
    Box1
  </div>
  
  <div class="box">
    Box1
  </div>
</div>

css html5 css3 flexbox

  • Dear your question is not very clear, if you want fixed branch 100px pro box and fixed size 300px pro container, how do you want it to grow horizontally? Will the container always have 300px or will it have at least 300px can increase? And the box, the minimum size of it should be 100px can increase if the container grows tbm?

  • Collapse, what I meant was, grow vertically, the Container will always have 3 elements per horizontal Row (3 of 100px = 300px). The size of the box fits according to your children. Gave to clarify?

  • So it won’t grow horizontally, it will grow vertically? The box will always be 100px wide, but.can be 200px high for example?

  • Simply put, I don’t want to know the sizes I want is the children of the box every 3 pass to the bottom Row and have a margin between them 8/5px, and the margin of "out" is 10/20 px relative to the larger Row. All this in a dynamic way.

2 answers

4

I’ll give you a solution that is the most current in css level, it uses display:grid. There are even other ways to get this layout, but not as simple and dynamic as you want.

Note the image below, see that I used a padding in the container to give spacing acima/abaixo 20px and in the direita/esquerda 10px, among the .box i used the property of grid called grid-gap note that in the gap i put 8px de espaçamento horizontal and 5px de espaçamento vertical between one and the other. Notice the image with the display:grid spacing is only between .box, and do not add to other values of grid

inserir a descrição da imagem aqui

I set the number of columns here grid-template-columns: repeat(3, 1fr); this way each of the columns will always have 1fr. Here is a basic documentation from Mozilla about the Grid Layout, I think it’ll help you: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

Dry the code referring to the image above, I left the comments in the code to help you better understand how the grid works

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  display: grid;
  /* aqui eu determino é são 3 colunas de tamanhos iguas, cada coluna tem uma fração */
  grid-template-columns: repeat(3, 1fr);
  /* esssa é a altura das linhas, se vc quiser pode apaga-la caso não queira uma altura definida */
  grid-auto-rows: 100px;
  /* espaço entre um elemento interno e outro */
  grid-gap: 5px 8px;
  /* margem interna que afasta os elementos da borda do grid */
  padding: 20px 10px;
}
.box {
  background-color: red;
}
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>

2

resultado do código

I don’t know if it will be useful yet but I think maybe I can help other people, if I want to use flex specifically, for some specific reason, so my solution:

.wrapper{
    background: blue;
    width: 336px;
    height: 245px;
    margin: 0 auto;
}
.flex{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.box{
    width: 100px;
    height: 100px;
    background: red;
}
.m-8{
    margin: 0 8px;
}
.linha2{
    margin-top: 5px;
}
.box{
    text-align: center;
}

<div class="wrapper flex">
    <div class="container">
        
        <div class="linha1 flex">
            <div class="box">Box1</div>
            <div class="box m-8">Box2</div>
            <div class="box">Box3</div>
        </div>
        
        <div class="linha2 flex">
            <div class="box">Box4</div>
            <div class="box m-8">Box5</div>
            <div class="box">Box6</div>
        </div>
        
    </div>
</div>

Browser other questions tagged css html5 css3 flexbox

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