Question

好的，所以我遇到了一些flex css的问题。

基本上我已经创建了一个Web应用程序，并将每个选项卡分开，我使用了图标（显示和隐藏div的小js）和flex以对齐图标。

所以我有这样的情况：

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

抱歉缺乏源代码，但我的问题在于内容div。

我想使用列flex来填充屏幕的剩余部分，但是看起来你只能在一个方向上只有1个flex容器和flex，这是正确的吗？

还有其他方法来划分内容可用的剩余空间吗？

Answer 1

使用嵌套的flexbox，这可以完成工作：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

你需要像这样嵌套它们

.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>

Answer 3

感谢您的帮助，如果有人遇到与我相同的问题，这就是我想要实现的代码（内容扩展以填充剩余空间）

<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>

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

3 个答案: