Flexbox的佈局與柱流體和其他固定寬度

Question

在頁我有的文本照片對行的佈局。我需要照片有一個固定的寬度和文字有流體寬度。文本必須是垂直居中。我已經使用flexbox來實現這些目標。

正如下面可以看出，在列表項與ID BOX2，爲了放置照片的左邊，我不得不之前插入該在DOM文本塊。

的問題：在小的，移動的分辨率，當顯示轉入方框代替撓曲，照片的第一和第二行的是一個在另一個後，當代替，應該有一個塊他們之間的文本。

我該如何解決這個問題？

h3 { 
 
    max-width: 1000px; 
 
    margin: 0 auto; 
 
    padding: 65px 0; 
 
    font-size: 36px; 
 
    line-height: 1.2; 
 
    font-weight: 300; 
 
    font-family: "Open Sans", sans-serif; 
 
} 
 
ul.boxes { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
ul.boxes li { 
 
    color: #3e3e3e; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
} 
 
ul.boxes #box1 { 
 
    background: #dcdcdc; 
 
} 
 
ul.boxes #box3 { 
 
    background: #6b6b6b; 
 
    color: #fff; 
 
} 
 
ul.boxes li .photo { 
 
    width: 402px; 
 
    max-width: 100%; 
 
} 
 
ul.boxes li .content { 
 
    padding: 0 65px; 
 
    width: 100%; 
 
} 
 
ul.boxes li h4 { 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 16px; 
 
    margin-top: 0; 
 
    text-transform: uppercase; 
 
} 
 
ul.boxes li .content ul { 
 
    padding: 0; 
 
} 
 
ul.boxes li .content ul li { 
 
    padding-left: 20px; 
 
    background: transparent url('img/redbullet.png') no-repeat 5px 8px; 
 
} 
 
@media screen and (max-width: 480px) { 
 
    ul.boxes, 
 
    ul.boxes li { 
 
    display: block; 
 
    margin-bottom: 10px; 
 
    } 
 
}

<h3 class="text-center thin">Obiectivul nostru este să fim în fiecare zi mai buni, iar munca noastră se bazează pe 3 piloni principali: 
 
\t Calitate, Creativitate, Rezultate.</h3> 
 
<ul class="boxes"> 
 
    <li id="box1"> 
 
    <div class="content"> 
 
     <h4>Lorem ipsum dolor</h4> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, reiciendis molestias inventore blanditiis ratione amet, dolore id doloribus minus iure esse, accusantium qui ex, nesciunt? Officiis, animi saepe libero quae!</p> 
 
    </div> 
 
    <div class="photo flex-left"> 
 
     <div class="photo flex-right"> 
 
     <img src="http://placehold.it/402x335"> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li id="box2"> 
 
    <div class="photo flex-right"> 
 
     <img src="http://placehold.it/402x335"> 
 
    </div> 
 
    <div class="content"> 
 
     <h4>Lorem ipsum dolor</h4> 
 
     Descoperim continuu soluții noi pentru a ne îndeplini sarcinile și pentru a trece peste provocările zilnice, ca să fim în fiecare zi mai buni. 
 
    </div> 
 
    </li> 
 
    <li id="box3"> 
 
    <div class="content"> 
 
     <h4>Lorem ipsum dolor</h4> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, reiciendis molestias inventore blanditiis ratione amet, dolore id doloribus minus iure esse, accusantium qui ex, nesciunt? Officiis, animi saepe libero quae!</p> 
 
    </div> 
 
    <div class="photo flex-left"> 
 
     <div class="photo flex-right"> 
 
     <img src="http://placehold.it/402x335"> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 1

而不是下面display: block（含）480像素，可以包裝您flexbox，並設置爲使柔性孩子是這樣的：

ul.boxes, 
    ul.boxes li { 
    flex-wrap: wrap; 
    margin-bottom: 10px; 
    } 
    ul.boxes li .photo { 
    order: 2; 
    } 
    ul.boxes li .content { 
    order: 1; 
    } 

我想現在你可以從這裏轉到它 - 看下面的演示：

h3 { 
 
    max-width: 1000px; 
 
    margin: 0 auto; 
 
    padding: 65px 0; 
 
    font-size: 36px; 
 
    line-height: 1.2; 
 
    font-weight: 300; 
 
    font-family: "Open Sans", sans-serif; 
 
} 
 
ul.boxes { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
ul.boxes li { 
 
    color: #3e3e3e; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
} 
 
ul.boxes #box1 { 
 
    background: #dcdcdc; 
 
} 
 
ul.boxes #box3 { 
 
    background: #6b6b6b; 
 
    color: #fff; 
 
} 
 
ul.boxes li .photo { 
 
    width: 402px; 
 
    max-width: 100%; 
 
} 
 
ul.boxes li .content { 
 
    padding: 0 65px; 
 
    width: 100%; 
 
} 
 
ul.boxes li h4 { 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 16px; 
 
    margin-top: 0; 
 
    text-transform: uppercase; 
 
} 
 
ul.boxes li .content ul { 
 
    padding: 0; 
 
} 
 
ul.boxes li .content ul li { 
 
    padding-left: 20px; 
 
    background: transparent url('img/redbullet.png') no-repeat 5px 8px; 
 
} 
 
@media screen and (max-width: 480px) { 
 
    ul.boxes, 
 
    ul.boxes li { 
 
    flex-wrap: wrap; 
 
    margin-bottom: 10px; 
 
    } 
 
    ul.boxes li .photo { 
 
    order: 2; 
 
    } 
 
    ul.boxes li .content { 
 
    order: 1; 
 
    } 
 
}

<h3 class="text-center thin">Obiectivul nostru este să fim în fiecare zi mai buni, iar munca noastră se bazează pe 3 piloni principali: 
 
\t Calitate, Creativitate, Rezultate.</h3> 
 
<ul class="boxes"> 
 
    <li id="box1"> 
 
    <div class="content"> 
 
     <h4>Lorem ipsum dolor</h4> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, reiciendis molestias inventore blanditiis ratione amet, dolore id doloribus minus iure esse, accusantium qui ex, nesciunt? Officiis, animi saepe libero quae!</p> 
 
    </div> 
 
    <div class="photo flex-left"> 
 
     <div class="photo flex-right"> 
 
     <img src="http://placehold.it/402x335"> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li id="box2"> 
 
    <div class="photo flex-right"> 
 
     <img src="http://placehold.it/402x335"> 
 
    </div> 
 
    <div class="content"> 
 
     <h4>Lorem ipsum dolor</h4> 
 
     Descoperim continuu soluții noi pentru a ne îndeplini sarcinile și pentru a trece peste provocările zilnice, ca să fim în fiecare zi mai buni. 
 
    </div> 
 
    </li> 
 
    <li id="box3"> 
 
    <div class="content"> 
 
     <h4>Lorem ipsum dolor</h4> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, reiciendis molestias inventore blanditiis ratione amet, dolore id doloribus minus iure esse, accusantium qui ex, nesciunt? Officiis, animi saepe libero quae!</p> 
 
    </div> 
 
    <div class="photo flex-left"> 
 
     <div class="photo flex-right"> 
 
     <img src="http://placehold.it/402x335"> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ul>