CODEWITHSUNDEEP
htmlcssflexbox
fugu
fugu

Reputation: 6578

Control flex-box overflow

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

enter image description here

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:

enter image description here

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

enter image description here

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>

Upvotes: 1

Views: 241

Answers (2)

git-e-up
git-e-up

Reputation: 904

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>

Upvotes: 1

SuperDJ
SuperDJ

Reputation: 7661

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>

Upvotes: 2

Related Questions