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可以垂直和水平使用吗？

回答

相关问题