Flex可以垂直和水平使用嗎？

好吧，所以我遇到了一些與Flex的CSS問題。Flex可以垂直和水平使用嗎？

基本上我創建了一個web應用程序，並將每個標籤分開，我使用過圖標（有點js顯示和隱藏div）和flex來對齊圖標。

所以我有這樣的情況：

http://numerco.com/wp-content/uploads/NUA/flex.jpg

道歉缺乏的源代碼，但我的問題在於內容股利。

我想使用列flex來填充屏幕的剩餘部分，看起來好像你只能有1個flex容器並向一個方向彎曲，這是正確的嗎？

還有沒有其他的方式來劃分剩餘空間可用於內容？

來源

2016-09-27 Anthony George

猜你可以使用這個嵌套flexboxes ...看到這個[示例]（http://stackoverflow.com/questions/39482088/css-page-to-cut-off-at-window-with-html-body-display-hidden/39482627#39482627） – kukkuz

使用嵌套flexboxes，這樣做的工作：

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid black; 
 
    padding: 3px; 
 
} 
 
.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    border: 1px solid blue; 
 
} 
 
.row div { 
 
    background-color: #AAA; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div>1 
 
    </div> 
 
    <div>2 
 
    </div> 
 
    <div>3 
 
    </div> 
 
    <div>4 
 
    </div> 
 
    <div>5 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <p>Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque adrogantis ingenii, considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat, ut aliquotiens celsae potestates iras principum molliverunt,</p> 
 
    <p>sed adversando iurgandoque cum parum congrueret, eum ad rabiem potius evibrabat, Augustum actus eius exaggerando creberrime docens, idque, incertum qua mente, ne lateret adfectans. quibus mox Caesar acrius efferatus, velut contumaciae quoddam vexillum</p> 
 
    </div> 
 
</div>

來源

2016-09-27 11:43:43

感謝這工作就像一種享受，我認爲我的問題是試圖通過我的div上的類應用flex。使用.row nav ul {display：flex; flex-direction：row; justify-content：space-between; 邊框：1px純藍色; }是一個遊戲改變謝謝！ –

你需要嵌套他們這樣

.main-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.icon-container { 
 
    display: flex; 
 
}

<div class="main-container"> 
 
    <div class="icon-container"> 
 
    <i class="icon-1">A</i> 
 
    <i class="icon-2">A</i> 
 
    </div> 
 
    <div class="content-container">B</div> 
 
</div>

來源

2016-09-27 13:48:56 jacobdo

謝謝您幫助人，如果任何人有同樣的問題，因爲我這是正是我想達到的代碼（與內容擴大，以填補剩餘空間）

<style> 

.container { 
    display: flex; 
    flex-direction: column; 
    border: 1px solid black; 
    padding: 3px; 
    height: 100%; 
} 
.row nav ul{ 
    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
    border: 1px solid blue; 
} 
.row div { 
    background-color: #AAA; 
} 
.itemconfiguration { 
    width: 100%; 
    height: 100%; 
    max-height: 100%; 
    overflow-x: scroll; 
} 
</style> 


</head> 
<body> 

    <div class="container"> 

    <div class="row"> 

     <nav> 

     <ul> 

      <li>1</li> 
      <li>2</li> 
      <li>3</li> 
      <li>4</li> 
      <li>5</li> 
      <li>6</li> 
      <li>7</li> 
      <li>8</li> 
      <li>9</li> 

     </ul> 

     </nav> 

    </div> 

    <div class="itemconfiguration"> 

    <p>Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque  adrogantis ingenii, considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat, ut aliquotiens celsae potestates iras principum molliverunt,</p> 
    <p>Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque  adrogantis ingenii, considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat, ut aliquotiens celsae potestates iras principum molliverunt,</p> 
<p>Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque  adrogantis ingenii, considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat, ut aliquotiens celsae potestates iras principum molliverunt,</p> 
<p>Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque  adrogantis ingenii, considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat, ut aliquotiens celsae potestates iras principum molliverunt,</p> 

    </div> 

</div>

來源

2016-09-27 15:24:56

Flex可以垂直和水平使用嗎？

回答

相關問題