CSS 中的超簡單響應式行和列
網格佈局是 Web 開發設計的基礎，您很可能已經使用 Bootstrap 或 Foundation 等工具來使您的佈局成為現實。但是，像你們大多數人一樣，我不喜歡執行 Bootstrap 或 Foundation 所需的依賴項，也不喜歡頁面加載時間的叮噹聲。
事實上，當我將Bootstrap 用於我正在編寫的應用程式時，我幾乎只將它用於網格佈局，有時我會將它用於通知或基本的相當合理的CSS 預設值，但90% 的時間，我想要的都是是網格佈局。
我也不喜歡只有將列拆分為 12 列或更少的選項。感覺有時你必須做一些瘋狂的工作才能讓列成列，或類似奇怪的事情。
我們如何更快、更輕鬆地進行網格佈局？ Flexbox 就是您的答案。我認為
flexbox
此時，flexbox 幾乎無所不在。所有主要瀏覽器都支援它。它允許更簡單的佈局，並且受到 React-Native 的支持，這意味著當我為 React-Native 佈局頁面時，我首先會使用 Flexbox，但我發現自己在 Web 開發中也首先使用了 Flexbox。
事實上，我佈置的最後一個應用程式完全是使用 Flexbox 完成的。我發現它很容易使用。
如果您對 Flex Box 不太了解。我喜歡這個頁面，它很好地介紹了Flexbox
layout
首先，我將整個頁麵包裹在一個 div 中。
<div class='some-page-wrapper'>
</div>然後我定義一個可以幫助佈局的.row和.column類別。
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}現在，如果我們想要兩列佈局：
<div class='some-page-wrapper'>
<div class='row'>
<div class='column'>
<div class='blue-column'>
Some Text in Column One
</div>
</div>
<div class='column'>
<div class='green-column'>
Some Text in Column Two
</div>
</div>
</div>
</div>CSS 看起來像：
.some-page-wrapper {
margin: 15px;
background-color: red;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.blue-column {
background-color: blue;
height: 100px;
}
.green-column {
background-color: green;
height: 100px;
}
https://codepen.io/drews256/pen/zLerNx
如果我們想新增第三列怎麼辦？ HTML 可以輕鬆更新為：
<div class='some-page-wrapper'>
<div class='row'>
<div class='column'>
<div class='blue-column'>
Some Text in Column One
</div>
</div>
<div class='column'>
<div class='green-column'>
Some Text in Column Two
</div>
</div>
<div class='column'>
<div class='orange-column'>
Some Text in Column Two
</div>
</div>
</div>
</div>https://codepen.io/drews256/pen/djaYKo
我們新增了第三列。這無縫地融入了我們的行。
https://codepen.io/drews256/pen/djaYKo
現在如果我們想要更複雜的佈局呢？
我們可以加入更多行，這非常簡單。
<div class='some-page-wrapper'>
<div class='row'>
<div class='column'>
<div class='orange-column'>
Some Text in Column One
</div>
</div>
<div class='column'>
<div class='blue-column'>
Some Text in Column Two
</div>
</div>
<div class='column'>
<div class='green-column'>
Some Text in Column Three
</div>
</div>
</div>
<div class='row 2'>
<div class='column'>
<div class='green-column'>
Some Text in Row 2, Column One
</div>
</div>
<div class='column'>
<div class='orange-column'>
Some Text in Row 2, Column Two
</div>
</div>
<div class='column'>
<div class='blue-column'>
Some Text in Row2, Column Three
</div>
</div>
</div>
</div>https://codepen.io/drews256/pen/WKPwxN
或者我們可以調整列的大小。
要擁有雙列，我們可以新增一個.double-column類別。不過，這可以適用於任何尺寸的列，您可以做60/40，您可以做10/10/10/10/10/10/10/10/10/10，老實說，這裡任何組合都是可能的。您可以做 1 X 100。或 10 x 1，然後 20 x 3，然後 30 x 1。選項是無窮無盡的！
在一種佈局上，我在“列”周圍加入了很大的邊距，並且由於行將向下滾動，因此我有一行包含所需數量的“列”。這些列是固定寬度的卡片，因此它們只是換行到下一行，而彈性盒巧妙地響應式地將卡片沿著螢幕包裹起來。
.double-column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 2;
}https://codepen.io/drews256/pen/djaMWj
但這不是很敏感嗎？我們可以使用媒體查詢來加入一些響應性。
只需將flex: 1和flex: 2移動到媒體查詢（大小取決於應用程式，我只是提供一個選項）
@media screen and (min-width: 800px) {
.column {
flex: 1
}
.double-column {
flex: 2
}
}> 800 像素時：
< 800 像素時：
最終的codepen，提示點擊右下角的1x或0.5x按鈕來查看「響應式」佈局的差異。
https://codepen.io/drews256/pen/bjzpvd
本質上，我們只是用 20 行 CSS 將 bootstrap 的行/列從水中炸出來。我們有一種快速建立行/列佈局的方法，而且由於我們使用 Flexbox，我們幾乎不必擔心佈局會破壞或出現任何問題。它可以輕鬆適應各種用途，並允許大量的可自訂性。您對彈性盒有何看法？你試過了嗎？
另一個隱藏的好處是，如果我以這種方式佈局 React 元件，那麼很容易佈局 React-Native 元件，使其看起來相似。
我通常在我的專案中使用 SCSS，所以如果您發現一些不完美的 CSS，請告訴我！
原文出處：https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式