瞭解Flexbox，就如何與引導

Question

我有以下的HTML和CSS佈局：

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    /* Margin bottom by footer height */ 
 
    margin-bottom: 100px; 
 
} 
 
.col-md-6 { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.container_flex { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    /* vh refers to viewport height. Very useful! */ 
 
    height: 100vh; 
 
    width: 100%; 
 
}

<div class="container-fluid"> 
 
    <div class="container_flex"> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-xs-12" style="border:solid"> 
 
     <h1>Column 1</h1> 
 
     </div> 
 
     <div class="col-md-6 col-xs-12" style="border:solid"> 
 
     <h1>Column 2</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

它提供了以下結果：

Bootply

我使用的目的Flexbox將垂直居中容器流體內「行」的內容。但是，這會導致列在桌面模式下采用壓縮外觀。在移動視圖中，列按預期堆疊。如果有人能解釋爲什麼這種壓縮/粗糙的外觀出現了，我將不勝感激。

相反，如果我刪除的行類，這個簡陋的壓縮外觀不再是帶來如下所示：

Bootply

然而，列不再移動視圖時疊加。有什麼方法可以糾正這個問題嗎？

如果任何人有任何提示/指示如何有效地使用FlexBox與Bootstrap垂直和水平居中在一個更有效的方式比我在這裏嘗試，我將非常感激。

Answer 1

當您刪除的行元素的.col元素成爲你的Flex項。爲了讓flex-items包裝在flex容器中，您需要使用flex-wrap屬性。但是，我不認爲刪除行元素並使用flex-wrap是你真正想要的。

關於你的問題。在你的第一個例子中，它看上去很粗糙的原因是因爲你正在將row元素設置爲'flex-item'。因爲您尚未設置控制其大小的flex屬性，所以行項目的寬度將隨其大小而變化。一旦你正確設置flex屬性，那麼你會看到預期的效果：

.container_flex {   
 
    display: flex;  
 
    align-items: center; 
 
    justify-content:center; 
 
    
 
    /* vh refers to viewport height. Very useful! */ 
 
    height: 100vh; 
 
    width: 100%;  \t 
 
} 
 

 
.row { 
 
    flex: 1; 
 
}

<div class="container-fluid"> 
 
    <div class="container_flex"> 
 
    <!-- Note that if using Flexbox, then do not need to wrap col- in row class but then does not stack columns on mobile... use @media? --> \t 
 
    <div class="row"> 
 
     <div class="col-md-6 col-xs-12" style="border:solid"> 
 
     <h1>Column 1</h1> 
 
     </div> 
 
     <div class="col-md-6 col-xs-12" style="border:solid"> 
 
     <h1>Column 2</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

下面是一個簡單的解釋了原因：flex:1是設置三個獨立的柔性物品屬性的快捷方式屬性：

• flex-grow: 1;如果柔性項目的大小是Flex容器，然後設置此範圍內比可用空間小爲大於0的值使項目拉伸以填充可用空間。如果同一個容器中存在多個彈性項目，則它們將按其flex-grow屬性的值的比例增長以共享可用空間。
• flex-shrink: 1;如果flex-item的大小大於flex容器中的可用空間，那麼將其設置爲大於0的值會使項縮小以適合可用空間。如果同一個容器中存在多個彈性項目，則它們將收縮以按照它們的flex-shrink屬性值的比例來分配可用空間。
• flex-basis: 0%;定義元素在「彎曲」之前的起始大小。

對於使用彈性盒的一般信息看看this article在css技巧克里斯coyier;他在解釋柔性盒如何工作方面做得很好。

如果您正在尋找關於一起使用引導和彈性盒的信息，我推薦您閱讀this article！

我希望這會有所幫助。

Answer 2

你需要給flex:1到.row它簡寫flex-grow，flex-shrink和flex-basis結合。默認爲0 1 auto，使用flex:1意味着這將是1 1 0

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    /* Margin bottom by footer height */ 
 
    margin-bottom: 100px; 
 
} 
 
.row { 
 
    flex: 1 
 
} 
 
.col-md-6 { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.container_flex { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    /* vh refers to viewport height. Very useful! */ 
 
    height: 100vh; 
 
    width: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="container_flex"> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-xs-12" style="border:solid"> 
 
     <h1>Column 1</h1> 
 
     </div> 
 
     <div class="col-md-6 col-xs-12" style="border:solid"> 
 
     <h1>Column 2</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

您也可以使用Flex內置的bootsrap庫（它也將響應）：

http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#responsive-flexbox

.col-md-6.col-xs-12{border:solid}/* CSS neede cause border are not set by default in bootsrap :) */

<link href="http://v4-alpha.getbootstrap.com/assets/css/docs-flexbox.min.css" rel="stylesheet"/> 
 
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <p>To see cols side by side, run snippet in full page mode and reduce it down to average 720px width to see col stacking </p> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-xs-12" > 
 
    col 1 
 
    </div> 
 
    <div class="col-md-6 col-xs-12" > 
 
    col 2 
 
    </div> 
 
    </div> 
 
</div>