CODEWITHSUNDEEP
htmlcssflexbox
Logan Phillips
Logan Phillips

Reputation: 710

Placing text underneath flex items in flex box

I have two divs that are positioned in a flex box container. I want to put text underneath each div. I got it working, but am wondering if there is a better way to do this or if this is even the proper use of Flexbox.

The way I did it is by using a flex container to position the divs, and then I put a flex container underneath that one that was used to position the text. I made all divs the same width, and then used word-wrap: break-word; to stop the text from overflowing outside the div.

Here's what my goal is: enter image description here

* {
  margin: 0;
  padding: 0;
}

section h2 {
  text-align: center;
}

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

.text-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  word-wrap: break-word;
  /*Stop text from overflowing outside the div*/
}

.text-row div {
  border: 2px solid blue;
  width: 33%;
  height: 33%;
  word-spacing: initial;
}

.box {
  width: 33%;
  height: 250px;
}

.row .box-left {
  background-color: black;
}

.row .box-right {
  background-color: blue;
}
<section>

  <h2>HEADER</h2>

  <div class="row">
    <div class="box box-left"></div>
    <div class="box box-right"></div>
  </div>

  <div class="text-row">
    <div class="box-left-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. asdfasdffasdfadsfasdsdf
    </div>
    <div class="box-right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</section>

Here is a codepen: https://codepen.io/anon/pen/jdvWQr

So my final question is: Am I using flex box correctly, or are floats better suited for this goal? Thank you.

Upvotes: 2

Views: 360

Answers (2)

cssyphus
cssyphus

Reputation: 40038

Your method works, but here's a slight variation.

Instead of adding another row, create an inner div that contains both the top and bottom sub-containers within each half.

This gives you more flexibility and allows you to treat each half as a group for some purposes. And the code is a bit simpler, also.

*{margin:0;padding:0;}
section h2{text-align:center;}
.row{display:flex;flex-direction:row;justify-content:space-between;}

.box{width:33%;}
.bl-top, .br-top{height:80px;display:flex;align-items:center;justify-content:center;}

.row .bl-top{background-color:palegreen;}
.row .br-top{background-color:lightblue;}

.bl-bot{border:1px solid palegreen;}
.br-bot{border:1px solid lightblue;}
<section>

  <h2>HEADER</h2>

  <div class="row">
    <div class="box box-left">
      <div class="bl-top"><div>Side Left</div></div>
      <div class="bl-bot">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. asdfasdffasdfadsfasdsdf</div>
    </div>
    <div class="box box-right">
      <div class="br-top"><div>Side Right</div></div>
      <div class="br-bot">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
  </div>
</section>

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371113

...but am wondering if there is a better way to do this or if this is even the proper use of Flexbox ... Am I using flex box correctly, or are floats better suited for this goal?

Flexbox is fine for your layout. But you can build it with more simplicity and efficiency using CSS Grid.

revised codepen

section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 250px 1fr;
  height: 100vh;
  grid-template-areas: " header header header " 
                       "  black    .    blue  " 
                       " text-left . text-right";
}

h2 {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.box-left {
  grid-area: black;
  background-color: black;
}

.box-right {
  grid-area: blue;
  background-color: blue;
}

.box-left-text {
  grid-area: text-left;
}

.box-right-text {
  grid-area: text-right;
}

.box-right~div {
  align-self: start;
  border: 2px solid blue;
}

* {
  margin: 0;
  padding: 0;
}
<section>
  <h2>HEADER</h2>
  <div class="box box-left"></div>
  <div class="box box-right"></div>
  <div class="box-left-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. asdfasdffasdfadsfasdsdf
  </div>
  <div class="box-right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</section>

Upvotes: 2

Related Questions