How to use p class and flexbox together

Dr-Lupo 0
Viewed 41

I have four flexed container boxes. I want to put text underneath these boxes in a row.

Any ideas on how I could put these evenly in a row under these containers, as well as any tips to clean up code would be appreciated.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.square {
  flex: 1;
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}

.subtext {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

p {}
<div class="container">
  <div class="square one"></div>
  <div class="square two"></div>
  <div class="square three"></div>
  <div class="square four"></div>
</div>
</div>

<div class="subtext">
  <p class="sub">
    <div class="box1">
      Wow !
    </div>
    <div class="box2">
      Wow !
    </div>
    <div class="box3">
      Wow !
    </div>
    <div class="box4">
      Wow !
    </div>
</div>

flexbox text css html
3 Answers

I would bundle the boxes and the text. You can keep it separate, but this is less likely to have problems and results in tidier markup.

.container {
  display: flex;
  /* flex-direction: row; - not needed (default) */
  justify-content: space-around;
  align-items: center;
}

.container>div {
  flex: 1;
  text-align: center;
}

.square {
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}
<div class="container">
  <div>
    <div class="square"></div>
    <p>Paragraph 1.</p>
  </div>

  <div>
    <div class="square"></div>
    <p>Paragraph 2.</p>
  </div>

  <div>
    <div class="square"></div>
    <p>Paragraph 3.</p>
  </div>

  <div>
    <div class="square"></div>
    <p>Paragraph 4.</p>
  </div>
</div>

isherwood0 

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.square {
  flex: 1;
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}

.subtext {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
<div class="container">
  <div class="square one"></div>
  <div class="square two"></div>
  <div class="square three"></div>
  <div class="square four"></div>
</div>

<div class="subtext">
  <div class="box1">Wow !</div>
  <div class="box2">Wow !</div>
  <div class="box3">Wow !</div>
  <div class="box4">Wow !</div>
</div>

<p>This is a sample line below the boxes</p>

Azu0

Add CSS position absolute to paragraph elements and position relative to parent element.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.square {
  flex: 1;
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}

.subtext {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position:relative;
}

p {
  
  position:absolute;
}
<div class="container">
  <div class="square one"></div>
  <div class="square two"></div>
  <div class="square three"></div>
  <div class="square four"></div>
</div>
</div>

<div class="subtext">
  <p class="sub">
    <div class="box1">
      Wow !
    </div>
    <div class="box2">
      Wow !
    </div>
    <div class="box3">
      Wow !
    </div>
    <div class="box4">
      Wow !
    </div>
</div>

Musawar ahmed0
Related