相关疑难解决方法(0)

我想要一个具有特定高度的垂直菜单.

每个孩子必须填写父母的高度并且具有中间对齐的文本.

孩子的数量是随机的,所以我必须使用动态值.

Div .container包含一个随机数的children(.item),它们总是必须填充父级的高度.为了实现这一点,我使用了flexbox.

为了使文本链接与中间对齐,我正在使用display: table-cell技术.但使用桌面显示需要使用100%的高度.

我的问题是.item-inner { height: 100% }在webkit(Chrome)中无效.

1. 这个问题有解决方法吗？
2. 或者是否有一种不同的技术可以使所有.item填充父级的高度与文本垂直对齐到中间？

这里的示例jsFiddle,应该在Firefox和Chrome中查看

.container {
  height: 20em;
  display: flex;
  flex-direction: column;
  border: 5px solid black
}
.item {
  flex: 1;
  border-bottom: 1px solid white;
}
.item-inner {
  height: 100%;
  width: 100%;
  display: table;
}
a {
  background: orange;
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div> …

我有两个高度为90%的div,但显示效果不同.

我试图在它们周围放置一个外部div,但这没有帮助.此外,它在Firefox,Chrome,Opera和Safari上也是如此.

有人能解释我为什么会遇到这个问题吗？

以下是我的代码:

<div style="height: 90%">
    <div ng-controller="TabsDataCtrl" style="width: 20%; float: left;">
        <tabset>
            <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
               disabled="tabs[0].disabled">
            </tab>


            <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
                 disabled="tabs[2].disabled">
            </tab>
        </tabset>
    </div>

    <div id="leaflet_map" ng-controller="iPortMapJobController">
        <leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>
    </div>
</div>

我一直无法确定为什么flexbox在IE 11中不起作用.

为了测试,我从CodePen中获取了一个非常简单的flexbox布局,并粘贴了以下信息.

Chrome按预期工作; IE11失败了.

在Chrome上运行的布局成功图像:

IE11上布局失败的图像

body {
  background: #333;
  font-family: helvetica;
  font-weight: bold;
  font-size: 1.7rem;
}

ul {
  list-style: none;
}

li {
  background: hotpink;
  height: 200px;
  text-align: center;
  border: 2px solid seashell;
  color: seashell;
  margin: 10px;
  flex: auto;
  min-width: 120px;
  max-width: 180px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

<ul class="flex">
  <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>
  <li>10</li>
</ul>

http://codepen.io/hankthewhale/pen/IdKkB?editors=110

我连续有3个按钮,宽度各不相同.我希望它们都能获得相同的宽度以填充行的剩余宽度,因此最宽的仍将比其他宽度更宽等.

你可以在下面看到我尝试用flex做的事情导致所有按钮的宽度相同.我知道flex-grow可以用来按比例增长每个项目,但我无法弄清楚如何让它们与原始大小相关.

您可以在第二行中看到蓝色项目大于其他两个项目.我只想让所有三个人从他们当前的大小平均扩大到填充行.

谢谢

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: 1;
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

.button--1 {
  background: red
}

.button--2 {
  background: green;
}

.button--3 {
  background: blue;
}

<div class="row-flex">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

<br/>

<div class="row">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large …

我想在包含两个表的DIV上使用CSS flexbox,并使用flex-grow使其中一个表填充可用空间.但是,它没有增长.似乎这是因为表不是块显示元素.如果我将TABLE包装在DIV中,我可以使用它.但是,我想知道是否有没有额外的DIV可以让它工作？

下面是一个例子 - 第一个容器没有DIVS,第二个容器是DIV并且具有理想的布局.

div.container {
    display: flex;
    background-color: red;
}

#nodivs table:first-child {
    background-color: green;
}

#nodivs table:last-child {
    background-color: blue;
    flex-grow: 1;
}



#divs div:first-child {
    background-color: green;
}

#divs div:last-child {
    background-color: blue;
    flex-grow: 1;
}
#divs div:last-child table {
    width: 100%
}

<div id="nodivs" class="container">
    <table>
        <thead>
            <tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
        </thead>
    </table>
    <table>
        <thead>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
        </thead>
    </table>
</div>
<br><br>
<div id="divs" class="container">
    <div><table>
        <thead>
            <tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
        </thead>
    </table></div>
    <div><table>
        <thead>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
        </thead>
    </table></div>
</div>

编辑 不同flex:1和flex-grow:1之间的区别.虽然答案最终是使用flex而不是flex-grow,但我的问题不是两者之间的区别,而是如何让嵌套的flex-boxes适当地包装.对于那些正在努力解决这个问题的人来说,没有办法在SO上找到答案而不知道问题是使用flex与flex-grow.如果我已经知道这个问题是flex和flex-grow之间的区别,我就不需要问这个问题了.

编辑2 如果这篇文章将被标记为重复,最好将其列为行flexbox内的嵌套列flexbox的副本,而不是flex:1和flex-grow:1之间的差异.

我有一系列div定义为的标签display:flex.它们排成一排,有3列.给出前两列的宽度,允许第三列拉伸以填充剩余的空间.该行也设置为换行,以便在较小的屏幕上,第三列将包裹在其他两列之下.

这是一些基本的示例代码:

style.css文件

.flex-row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.flex-column {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border: 1px solid lightgray;
}

.box {
    display: flex;
    height: 100px;
    width: 300px;
    min-width: 200px;
    flex-shrink: 1;
    border: 1px solid green;
}

的index.html

<div class="flex-row" style="flex-wrap:wrap">
  <div class="flex-column" style="flex-grow:0">
      Column 1
  </div>

  <div class="flex-column" style="flex-grow:0;width:200px">
    Column 2
  </div>

  <div class="flex-column">
    <div class="flex-row" style="min-width:500px;flex-wrap:wrap">
      <div class="box">Box 1</div> …

我想进行一半的布局。所以我做了一个有<div>那个的display: flex;并放了两个有这个的孩子flex-grow: 1;。看起来像我预期的那样，一半的布局。但是，当我在一个孩子中放东西时，它变得比另一个更大。

我不太明白为什么它会这样工作。 http://codepen.io/anon/pen/rOvpPM

您能否告诉我原因以及适用的CSS？

你好，目前我正在学习 flexbox，我看过很多教程，但我不知道 flex 属性有什么作用？一些解释它的作用的解释和链接将非常有帮助。谢谢。