與響應式設計搏鬥

Question

我正在爲一件事而掙扎。我編碼的PSD爲HTML，但是當我想讓我的網站響應我無法修復一個div的問題。

https://codepen.io/Dzonyy/pen/jmjOWV

.features_items { 
 
    margin: 0 auto; 
 
    display: flex; 
 
    flex: column; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.features_item { 
 
    padding: 200px 0 100px 0; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.features_items h3 { 
 
    padding-top: 80px; 
 
    color: #f4d320; 
 
} 
 

 
.features_item_text { 
 
    padding-top: 15px; 
 
    line-height: 200%; 
 
} 
 

 
.features_items_person { 
 
    background: url(../images/person.png) top 20% center no-repeat; 
 
} 
 

 
.features_items_cloud { 
 
    background: url(../images/cloud.png) top 20% center no-repeat; 
 
} 
 

 
.features_items_database { 
 
    background: url(../images/database.png) top 20% center no-repeat; 
 
} 
 

 
.features_items_monitoring { 
 
    background: url(../images/screen.png) top 20% center no-repeat; 
 
} 
 

 
.features_items_person:before, 
 
.features_items_cloud:before, 
 
.features_items_database:before, 
 
.features_items_monitoring:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border-bottom: 2px solid #8d8d99; 
 
    height: 1px; 
 
    width: 15%; 
 
    top: 48%; 
 
    left: 43%; 
 
}

<div class="features_items"> 
 
    <figure class="features_item features_items_person"> 
 
    <h3>Live Support</h3> 
 
    <figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption> 
 
    </figure> 
 
    <figure class="features_item features_items_cloud"> 
 
    <h3>Cloud Technology</h3> 
 
    <figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption> 
 
    </figure> 
 
    <figure class="features_item features_items_database"> 
 
    <h3>Hi Tech Database</h3> 
 
    <figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption> 
 
    </figure> 
 
    <figure class="features_item features_items_monitoring"> 
 
    <h3>Live Monitoring</h3> 
 
    <figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption> 
 
    </figure> 
 
</div>

總是在同一車道？ 如何使它們在2行中有2列，最大寬度爲1024px？

Answer 1

我建議你更改爲row方向，然後進行項目包裝flex-flow: row wrap;

此外，您給他們的寬度（flex-basis）至少是35％，所以不適合超過2一行。

我更新了這兩條規則，如下圖所示，它會給你更寬的屏幕上的2列和更小的1。

Updated codepen

棧片斷

.features_items { 
 
    margin: 0 auto; 
 
    display: flex; 
 
    flex-flow: row wrap;    /* changed property */ 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.features_item { 
 
    flex-basis: 35%;     /* added property */ 
 
    padding: 200px 0 100px 0; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.features_items h3 { 
 
    padding-top: 80px; 
 
    color: #f4d320; 
 
} 
 

 
.features_item_text { 
 
    padding-top: 15px; 
 
    line-height: 200%; 
 
} 
 

 
.features_items_person { 
 
    background: url(../images/person.png) top 20% center no-repeat; 
 
} 
 

 
.features_items_cloud { 
 
    background: url(../images/cloud.png) top 20% center no-repeat; 
 
} 
 

 
.features_items_database { 
 
    background: url(../images/database.png) top 20% center no-repeat; 
 
} 
 

 
.features_items_monitoring { 
 
    background: url(../images/screen.png) top 20% center no-repeat; 
 
} 
 

 
.features_items_person:before, 
 
.features_items_cloud:before, 
 
.features_items_database:before, 
 
.features_items_monitoring:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border-bottom: 2px solid #8d8d99; 
 
    height: 1px; 
 
    width: 15%; 
 
    top: 48%; 
 
    left: 43%; 
 
}

<div class="features_items"> 
 
    <figure class="features_item features_items_person"> 
 
    <h3>Live Support</h3> 
 
    <figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption> 
 
    </figure> 
 
    <figure class="features_item features_items_cloud"> 
 
    <h3>Cloud Technology</h3> 
 
    <figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption> 
 
    </figure> 
 
    <figure class="features_item features_items_database"> 
 
    <h3>Hi Tech Database</h3> 
 
    <figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption> 
 
    </figure> 
 
    <figure class="features_item features_items_monitoring"> 
 
    <h3>Live Monitoring</h3> 
 
    <figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption> 
 
    </figure> 
 
</div>