How to size boxes in flex-box flex wrap?

0

Issue

I’ve been trying to make just a simple footer with 4 boxes, which should wrap and stack into a column. However each box must have width equal to 25%, but when I do this using percentages (%) it will not wrap (at all), leaving me to go back to pixels, which isn’t ideal for responsiveness.

Could there be a workaround that I’m possibly missing?

.flex-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  text-align: center;
}

.flex-container>div {
  color: teal;
  background: white;
  padding: 1%;
  width: 300px; // box must not be in % otherwise dont work. Bug?
  font-weight: 800;
  h3 {
    color: $smokey;
  }
  a:active,
  a:hover,
  a:visited,
  a:focus {
    color: $smokey;
  }
  ul {
    text-align: left;
    text-decoration: none;
    list-style: none;
    list-style-type: none;
    color: $light;
  }
}
<div class="flex-container">
  <div>
    <h3>Lyntree</h3>
    <ul class="ft-lks">
      <li><a href="">About</a></li>
      <li><a href="">Careers</a></li>
      <li><a href="">Privacy</a></li>
      <li><a href="">Terms & Conditions</a></li>
    </ul>
  </div>
  <div>
    <h3>Framework</h3>
    <ul class="ft-lks">

    </ul>
  </div>
  <div>
    <h3>Support</h3>
    <ul class="ft-lks">
      <li><a href="">FAQ</a></li>
      <li><a href="">Support Base</a></li>
      <li><a href="">Report a Bug</a></li>
      <li><a href="">Submit Ticket</a></li>
    </ul>
  </div>
  <div>
    <h3>Support</h3>
    <div class="ft-at">

    </div>
  </div>
</div>

Might I add, I saw another post about containing a max-width at 100% for the parent container, but I have tried this and it didn’t work either. I have also tried it in Mozilla + Chrome?

Solution

Do you mix up flex-wrap and flex-grow properties? With flex-wrap: wrap the flex-items (children) will wrap into a new row when there is not enough space for the children. flex-grow scales the flex-children size.

Take a look at my example below. I added two footer with a flex-container. I think you want to archive the first setup. The second setup has also the class wrap which lets the flex-items wrap into new lines. Because all flex-items have width: 100%;, they wrap into four rows.

.footer{
    position: relative;
    width: 100%;
    background: red;
    margin-bottom: 24px;
}

.flex-container{
    position: relative;
    display: flex;
    flex-direction: row; /* is default */
    flex-wrap: nowrap;
    height: 64px;
}

.wrap{
    flex-wrap: wrap;
}

.flex-container > .flex-item:nth-child(1){
    background: red;
}
.flex-container > .flex-item:nth-child(2){
    background: green;
}
.flex-container > .flex-item:nth-child(3){
    background: grey;
}
.flex-container > .flex-item:nth-child(4){
    background: orange;
}

.flex-item{
   position: relative;
   width: 100%;
   height: 100%;
}
<div class="footer">
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

<div class="footer">
    <div class="flex-container wrap">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

Answered By – michaelT

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More