Control flex-box overflow

Question

I'm trying to make a profiles section on my website that has 4 profile boxes:

It looks nice on large screens, but I am trying to control the way in which the boxes wrap on smaller screen sizes. Currently the boxes wrap to the next row as and when they reach the edge of the screen, so I end up with 3 profiles on one line and 1 on the next:

I want to stop this from happening, and set up 3 different configurations depending on screen size:

Is this possible with flex box?

.container {
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
    align-items: flex-start;
    flex-basis: auto;
}

.flex-container {
    margin: 1px;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-between;
}

.flex-item {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.1s;
    -webkit-filter: opacity(60%);
    /* Safari 6.0 - 9.0 */
    filter: opacity(60%);
    width: 231px;
    height: 350px;
    margin-top: 10px;
    line-height: 10px;
    color: white;
    font-weight: bold;
    text-align: center;
}

.flex-item h4 {
    font-size: 22pt;
}

.flex-item p {
    font-size: 14pt;
}

.flex-item:hover {
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.4);
    -webkit-filter: opacity(100%);
    /* Safari 6.0 - 9.0 */
    filter: opacity(100%);
}


.person1 {
    background: #FB8B4F;
}

.person2 {
    background: #1FACE4;
}

.person3 {
    background: #EF626B;
}

.person4 {
    background: #8BE41F;
}

/*When screen is < 1000px : green */
@media screen and (max-width: 1000px) {
   /*  body {
        background-color: lightgreen;
    } */
    .flex-item {
        transform: scale(0.9);
    }
}

/*When screen is < 500px : blue */
@media screen and (max-width: 800px) {
    .flex-item {
      flex-direction: column;
      align-items:center;
    }
   /*  body {
        background-color: lightblue;
    } */
}

<!--Profiles-->
        <div class="container">
            <hr size="0.5">
            <h1 id="people">People</h1>
            <ul class="flex-container">
                <li class="flex-item person1">
                    <!-- <img src="images/profile_placeholder.gif" alt="p1"> -->

                    <h4><b>Person1</b></h4>
                    <p>Founder</p>
                </li>
                <li class="flex-item person2">
                    <!-- <img src="images/profile_placeholder.gif" alt="p2"> -->
                    <h4><b>Person2</b></h4>
                    <p>Treasurer</p>
                </li>
                <li class="flex-item person3">
                    <!-- <img src="images/profile_placeholder.gif" alt="p3"> -->
                    <h4><b>Person3</b></h4>
                    <p>Vice-president</p>
                </li>
                <li class="flex-item person4">
                    <!-- <img src="images/profile_placeholder.gif" alt="p4"> -->

                    <h4><b>Person4</b></h4>
                    <p>Secretary</p>
                </li>
            </ul>
        </div>

I guess the easiest solution would be to have 2/3 media queries and define the width of the boxes within them — SuperDJ, Aug 22 '18 at 17:11
[See this post](https://stackoverflow.com/questions/44230484/center-wrapped-items-in-a-space-between-flexbox). Basically you either have to keep refining your media queries, or use Javascript to detect when wrapping occurs and do stuff. — Kalnode, Aug 22 '18 at 17:21

score 2 · Answer 1 · answered Aug 22 '18 at 17:16

Give the following a try:

.container {
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
    align-items: flex-start;
    flex-basis: auto;
}

.flex-container {
    margin: 1px;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-between;
}

.flex-item {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.1s;
    -webkit-filter: opacity(60%);
    /* Safari 6.0 - 9.0 */
    filter: opacity(60%);
    width: 100%; /* changed */
    height: 350px;
    margin-top: 10px;
    line-height: 10px;
    color: white;
    font-weight: bold;
    text-align: center;
}

/* Added these line */
@media only screen and (min-width: 600px) {
  .flex-item {
    width: 50%;
  }
}

@media only screen and (min-width: 900px) {
  .flex-item {
    width: 25%;
  }
}/* To here */

.flex-item h4 {
    font-size: 22pt;
}

.flex-item p {
    font-size: 14pt;
}

.flex-item:hover {
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.4);
    -webkit-filter: opacity(100%);
    /* Safari 6.0 - 9.0 */
    filter: opacity(100%);
}


.person1 {
    background: #FB8B4F;
}

.person2 {
    background: #1FACE4;
}

.person3 {
    background: #EF626B;
}

.person4 {
    background: #8BE41F;
}

/* Removed lines here */

<!--Profiles-->
        <div class="container">
            <hr size="0.5">
            <h1 id="people">People</h1>
            <ul class="flex-container">
                <li class="flex-item person1">
                    <!-- <img src="images/profile_placeholder.gif" alt="p1"> -->

                    <h4><b>Person1</b></h4>
                    <p>Founder</p>
                </li>
                <li class="flex-item person2">
                    <!-- <img src="images/profile_placeholder.gif" alt="p2"> -->
                    <h4><b>Person2</b></h4>
                    <p>Treasurer</p>
                </li>
                <li class="flex-item person3">
                    <!-- <img src="images/profile_placeholder.gif" alt="p3"> -->
                    <h4><b>Person3</b></h4>
                    <p>Vice-president</p>
                </li>
                <li class="flex-item person4">
                    <!-- <img src="images/profile_placeholder.gif" alt="p4"> -->

                    <h4><b>Person4</b></h4>
                    <p>Secretary</p>
                </li>
            </ul>
        </div>

score 1 · Answer 2 · answered Aug 22 '18 at 17:36

Here's a kinda hacky solution... Nest a container inside the lis with your styles, and then make the lis width 25%, 50%, 100% based on media queries.

.container {
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
    align-items: flex-start;
    flex-basis: auto;
}

.flex-container {
    margin: 1px;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-between;
}
li {
  width: 25%;
  display: flex;
}


.flex-item {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.1s;
    -webkit-filter: opacity(60%);
    /* Safari 6.0 - 9.0 */
    filter: opacity(60%);
    width: 231px;
    height: 350px;
    /* margin-top: 10px; */
    line-height: 10px; 
    margin: 10px auto 0 auto;
    color: white;
    font-weight: bold;
    text-align: center;

}

.flex-item h4 {
    font-size: 22pt;
}

.flex-item p {
    font-size: 14pt;
}

.flex-item:hover {
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.4);
    -webkit-filter: opacity(100%);
    /* Safari 6.0 - 9.0 */
    filter: opacity(100%);
}


.person1 {
    background: #FB8B4F;
}

.person2 {
    background: #1FACE4;
}

.person3 {
    background: #EF626B;
}

.person4 {
    background: #8BE41F;
}

/*When screen is < 1000px : green */
@media screen and (max-width: 1000px) {
   /*  body {
        background-color: lightgreen;
    } */
    .flex-item {
        transform: scale(0.9);
    }
    li {
      width: 50%;
    }
}

/*When screen is < 500px : blue */
@media screen and (max-width: 600px) {
    .flex-item {
      flex-direction: column;
      align-items:center;
    }
    li {
      width: 100%;
    }
   /*  body {
        background-color: lightblue;
    } */
}

<!--Profiles-->
        <div class="container">
            <hr size="0.5">
            <h1 id="people">People</h1>
            <ul class="flex-container">
                <li>
                    <!-- <img src="images/profile_placeholder.gif" alt="p1"> -->
                    <div class="flex-item person1">
                      <h4><b>Person1</b></h4>
                      <p>Founder</p>
                    </div>

                </li>
                <li>
                    <!-- <img src="images/profile_placeholder.gif" alt="p2"> -->
                    <div class="flex-item person2">
                      <h4><b>Person2</b></h4>
                      <p>Treasurer</p>
                    </div>

                </li>
                <li>
                    <!-- <img src="images/profile_placeholder.gif" alt="p3"> -->
                    <div class="flex-item person3">
                      <h4><b>Person3</b></h4>
                      <p>Vice-president</p>
                    </div>
                </li>
                <li>
                    <!-- <img src="images/profile_placeholder.gif" alt="p4"> -->
                    <div class="flex-item person4">
                      <h4><b>Person4</b></h4>
                      <p>Secretary</p>
                    </div>
                </li>
            </ul>
        </div>

Control flex-box overflow

2 Answers2