Flex佈局流體和固定寬度

Question

我已經無意中發現了flex，我正在嘗試創建一個佈局。

<div class="charts"> 
    <div class="chart longer"> 
    </div> 
    <div class="chart short"> 
    </div> 
</div> 

我將有一個flex div這將是流體，以及fixed width div這將保持200像素。

我已經使用了下面的CSS並且成功了。

.charts { 
    display: flex; 
    flex: 1; 
} 

.chart.longer { 
    flex: 1; 
} 
.chart.short { 
    flex: 0 0 200px; 
} 

從這裏，我想長格留液和100％，並.chart.sort清除到一個新的生產線，並採取了100％的寬度在下面的斷點。

@media only screen and (max-width: 767px) { 
    // Help needed here 
    } 

Answer 1

低於768px，您可以將flex-direction: column指定給父元素。子元素將延伸至100% width。

.charts { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
.chart.longer { 
 
    flex: 1; 
 
    background: tomato; 
 
} 
 
.chart.short { 
 
    flex: 0 0 200px; 
 
    background: lightblue; 
 
} 
 
@media only screen and (max-width: 767px) { 
 
    .charts { 
 
    flex-direction: column; 
 
    } 
 
}

<div class="charts"> 
 
    <div class="chart longer"> 
 
    A 
 
    </div> 
 
    <div class="chart short"> 
 
    B 
 
    </div> 
 
</div>