レスポンシブなデザインで悩む

Question

私は1つのことで苦労しています。私はHTMLにpsdをコーディングしていますが、私のサイトを応答性にしたいときは、ある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>

同じ車線に常にありますか？ 最大幅1024ピクセルで2列の2行にするにはどうすればいいですか？

私はあなたが row方向に変更してからアイテムがさらにあなたがそれらに少なくとも35％の幅（ flex-basis）を与えるので、1行に2つ以上が収まらない flex-flow: row wrap;

をラップ作るお勧めします

Answer 1

。

以下のように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>

スニペット

デフォルトで