Kontrol luapan kotak fleksibel

Saya mencoba membuat bagian profil di situs saya yang memiliki 4 kotak profil:

masukkan deskripsi gambar di sini

Kelihatannya bagus di layar besar, tapi saya mencoba mengontrol cara kotak dibungkus pada ukuran layar yang lebih kecil. Saat ini kotak-kotak tersebut terbungkus ke baris berikutnya saat mencapai tepi layar, jadi saya mendapatkan 3 profil di satu baris dan 1 di baris berikutnya:

masukkan deskripsi gambar di sini

Saya ingin menghentikan hal ini terjadi, dan menyiapkan 3 konfigurasi berbeda tergantung pada ukuran layar:

masukkan deskripsi gambar di sini

Apakah ini mungkin dengan kotak fleksibel?

.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>


html css flexbox
person fugu    schedule 22.08.2018    source sumber
comment
Saya kira solusi termudah adalah dengan memiliki 2/3 media queries dan menentukan lebar kotak di dalamnya   -  person SuperDJ    schedule 22.08.2018
comment
Lihat postingan ini. Pada dasarnya Anda harus terus menyempurnakan kueri media Anda, atau menggunakan Javascript untuk mendeteksi kapan pembungkusan terjadi dan melakukan berbagai hal.   -  person MarsAndBack    schedule 22.08.2018
comment
Tentukan lebar yang berbeda di kueri media Anda   -  person Huangism    schedule 22.08.2018

Jawaban (2)


arrow_upward
2
arrow_downward

Cobalah yang berikut ini:

.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>

person SuperDJ    schedule 22.08.2018

arrow_upward
1
arrow_downward

Ini solusi yang agak rumit... Tempatkan wadah di dalam lis dengan gaya Anda, lalu buat lebar lis menjadi 25%, 50%, 100% berdasarkan kueri media.

.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>

person git-e-up    schedule 22.08.2018