相关疑难解决方法(0)

我有一个由按钮旁边的文本组成的组件.如果没有足够的空间,文本必须缩小并切断.像这样:

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}

.container .text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container {
  display: flex;
}

<div class="container">
  <div class="text">This is a text that is supposed to get truncated properly when needed.</div>
  <div class="box">Hello</div>
</div>

重要提示:要查看它是否有效,请最大化代码段并缩小浏览器窗口以查看文本截断.

它可以正常工作,你可以看到.

在另一个弹性容器内

当我尝试将此组件放在另一个Flex容器中时出现问题.

我的页面包含一个固定的侧面区域,右侧的剩余部分可以调整剩余的空间.我的组件必须适合第二部分,所以我把它放在那里:

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}

.container .text { …

我正在使用flexbox为一个站点搭建基本UI.与通常的电子邮件布局非常相似.

出于某种原因,第二个孩子(类.main-body,海藻绿柱,layouted Flexbox的容器的颜色)( .content-main,李子色)比其母公司,这一点我一个更大的高度不希望它.

我制作了一个codepen代码段来显示这种行为.

html,
body {
  width: 100%;
  height: 100%;
  background: lightblue;
  box-sizing: border-box;
}
* {
  box-sizing: border-box;
}
.container {
  height: inherit;
  background: PeachPuff;
  padding: 1em;
  display: flex;
  max-height: 500px;
}
.sidebar {
  flex: 0 1 15%;
  background: khaki;
}
.content {
  flex: 1 1 auto;
  background: plum;
  padding: 0.8em;
  display: flex;
  flex-direction: column;
}
.content-header {
  background: lightgreen;
  padding: 0.3em;
  flex: 0 0 7%; …

下面的代码显示了我在Chrome 60和Firefox 55中调整窗口大小时的预期行为(但在iOS Safari 10.3中没有;这很可能是另一个问题,为什么它在Safari中行为不当).

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background-color: lightgrey;
}

.container {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, calc((60vh - 12px)/3));
  /*grid-template-rows: 1fr 1fr 1fr;*/
  /*grid-template-rows: auto auto auto;*/
  height: 60vh;
  border: 3px solid yellow;
  padding: 3px;
  /*grid-gap: 20px;*/ /* <-- would also mess things up */
}

.tile {
}

img {
  box-sizing: border-box;
  display: block;
  object-fit: contain;
  width: 100%;
  height: 100%;
  margin: …

我有一个带有的Flexbox容器max-height.它有两个孩子,水平弯曲,其中一个有overflow: auto.在Chrome中,有溢出的孩子一旦达到容器的最大高度就停止生长并滚动.在Firefox中,它溢出容器.

我正在开发针对最新的Chrome(目前为59),但必须支持Firefox 40+,因此我正在使用Firefox 40进行测试.作为参考,caniuse.com报告FF40 完全支持flexbox.

这显然在较新的FF版本中正常工作,但在我正在使用的FF40中没有,所以对于那些无法访问较旧的FF的人,这里是我看到的行为的屏幕截图:

Firefox 40

Chrome 59

我可以通过消除左边的子节点并设置flex-direction: column容器来解决这个问题,但遗憾的是我的实际应用程序需要左侧的内容并需要水平弯曲.

为什么跨浏览器存在差异？什么是跨浏览器解决方案,让溢出的孩子像Chrome一样停止增长？

div { padding: 10px; }

#container {
  border: 1px solid green;
  display: flex;
  max-height: 200px;
}

#left {
  border: 1px solid purple;
  flex: 1;
}

#right {
  border: 1px solid orange;
  flex: 3;
  overflow: auto;
}

<div id="container">
  <div id="left">
    Left content
  </div>
  <div id="right">
    I stop growing at 200px tall in Chrome, but not in Firefox
    <ul>
      <li>Stuff</li> …

flex: noneflex属性之间是否存在差异？

我在几个简单的布局中测试它,我没有看到差异.

例如,我可以flex: none从蓝色项目中删除(参见下面的代码),据我所知,布局保持不变.我理解对吗？

而且,第二个问题,更复杂的布局呢？我应该写作flex: none还是我可以简单地省略它？

.flex-container {
  display: flex;
  width: 400px;
  height: 150px;
  background-color: lightgrey;
}
.flex-item {
  margin: 10px;
}
.item1 {
  flex: none; /* Could be omitted? */
  background-color: cornflowerblue;
}
.item2 {
  flex: 1;
  background-color: orange;
}
.item3 {
  flex: 1;
  background-color: green;
}

<div class="flex-container">
  <div class="flex-item item1">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>
</div>

https://jsfiddle.net/r4s8z835/

在关于plunker的这个页面(https://plnkr.co/edit/gMbgxvUqHNDsQVe4P7ny?p=preview)中有一个奇怪的问题.

在Windows和Android上的Chrome上(Canary也是如此)一切正常.我可以滚动两个区域(左侧和右侧),页面的顶部和底部div位于设备屏幕的顶部和底部.我随时都能看到它们(见下图).

在iPad或iPhone,iOS,Safari或Chrome上,这不是我得到的.还有Windows上的Firefox 47.0.1.

页面很长,右边只有一个滚动,就像页面上没有弹性框一样,这个代码只是被忽略了:

.bigone {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
    flex: 1 1 0;
    display: flex;
}
.container-fluid {
  display: flex;
}
.col-6 {
  overflow-y: auto;
}

Quirk例子:

只需单击此按钮,即可在iPad或iPhone上看到:

为什么会这样？ Safari和Firefox的bug还是Chrome的？为什么在Chrome上Windows和Android上的一切都很好？如果在未来的新Safari中这将运行良好,如何处理旧iOS和Firefox的旧设备？

我会感激任何答案.谢谢.

我确信以前曾经问过,但我找不到确切问题的答案.

我想要一个非常简单的布局:

-------------------
      header
-------------------
         |
 content | graphic
         |
-------------------

哪里:

• 标题高度由字体大小设置;
• 内容具有固定的最小宽度;
• 考虑到这两个约束并保持纵横比,图形尽可能大(即它将与屏幕一样高,减去标题,除非这会使内容面板太窄);
• 考虑到这三个限制,内容尽可能宽.

[编辑添加:]

• 垂直:当宽度+宽高比约束导致它比最大高度短时,图像垂直居中
• 水平:图像总是很难对着屏幕的右侧(除了任何手动添加的填充),内容总是一直向上到图像的左侧(除了任何手动添加的填充之外).

我已经尝试过使用flexbox并且满足前三个约束,但是我无法让内容窗格水平增长以填充图像未使用的空间.我得到的最好的结果是使用下面的HTML和CSS,但正如您在下面的屏幕截图中看到的,这导致内容div和图像占用相同的大小而不是内容div将图像推向右侧.(这是两者都设置flex = 1的预期行为,所以我没想到它会起作用;但至少这给我的图像大小表现得我喜欢).

我正在使用的是https://jsfiddle.net/uv566jc3/:

.grid {
  border: solid 1px #e7e7e7;
  height: 95vh;
  display: flex;
  flex-direction: column;
}
.header {
  flex: 0;
}
.grid__row {
  flex: 1;
  display: flex;
  flex-direction: row;
}
.grid__item {
  flex: 1;
  padding: 12px;
  border: solid 1px #e7e7e7;
}
img {
  flex: 1;
  object-fit: contain;
  overflow: hidden;
  border: solid 1px #e7e7e7;
}

<div class="grid"> …

我需要创建一个响应式Web,以便父级的宽度是动态的.有两个弹性项目,一个是长(动态),另一个是短(静态).

我希望结果看起来像第二行,长文本被打破(或重叠时隐藏),短文本总是正确显示.

我尝试使用,flex-shrink: 0但似乎总是有溢出.

在这种情况下如何摆脱溢出？

我确实需要flex布局,不应该涉及js.

.parent {
  display: flex;
  flex-direction: row;
  width: 15rem;
  background: yellowgreen;
  padding: 10px;
  overflow: hidden;
}
.flex-item {
  width: 10em;
  padding: 10px;
  background: yellow;
  flex: 1 1 50%;
}
.block1 {
  background: red;
}
.block2 {
  background: orange;
}
.nos {
  flex-shrink: 0 !important;
}

<div class="parent">
  <div class="flex-item">
    <div class="block1">
      longlonglonglonglonglonglonglonglonglonglonglonglonglong
    </div>
  </div>
  <div class="flex-item nos">
    <div class="block2">
      Display
    </div>
  </div>
</div>
<br/>
<div class="parent">
  <div class="flex-item">
    <div class="block1">
      longlonglonglonglong...
    </div>
  </div> …

如果我设置一个嵌套的flexbox容器,如下所示:

<div class="container1">
  <div class="grow1">
    <div class="container2">
      <div class="grow2"></div>
    </div>
  </div>
</div>

...然后设置grow2 的宽度,使其比container1 宽,然后grow2溢出container1.

我相信这应该不会发生,因为挠性元件都应该当它们比柔性容器较大的萎缩.

如果我设置grow2 的flex-basis,那么这可以按预期工作.

有关演示,请参阅以下示例:

https://jsfiddle.net/chris00/ot1gjjtk/20/

请使用Chrome或Firefox

此外,我读到flexbox规范说宽度和柔性基础应该具有相同的效果(当使用水平布局时),但它们显然没有.

现在我可以使用flex-basis而不是width,但是... Edge对flex-basis和width都做同样的事情,并且它以"错误"的方式执行.IE11也错了(虽然看起来有多个flexbox错误). 请查看Edge的演示.

那应该怎么做呢？

所有浏览器都有错误吗？

flex-basis实际上应该与宽度不同(在简单的水平布局中)？

或者Edge是否正确,宽度和flex-basis都应该溢出父容器？

最后,是否有解决方法可以解决Edge(甚至是IE11)的溢出问题？

.container1 {
  margin-top: 10px;
  display: flex;
  width: 200px;
  height: 50px;
  background-color: red;
}

.grow1 {
  flex-grow: 1;
  height: 40px;
  background-color: green;
}

.container2 {
  display: flex;
  height: 30px;
  background-color: yellow;
}

.grow2a {
  flex-grow: 1;
  flex-basis: 400px;
  height: 20px;
  background-color: turquoise;
}

.grow2b …

我正在尝试使用 Flexbox 在 React-Native 中构建布局，但在文本很长时遇到了问题。我希望布局看起来像这样：

但是，当蓝色文本变长时，它会将日期从屏幕右侧推开，如下所示：

我故意让文本停留在 1 行。我想要的是蓝色文本在不缩小文本的情况下尽可能多地展开。我是 RN 的新手，我在 CSS 方面的工作非常有限，所以我在做这样的事情方面没有太多经验。这是我的样式表代码：

const styles = StyleSheet.create({
  textContainer: {
    flex: 1
  },
  separator: {
    height: 1,
    backgroundColor: '#dddddd'
  },
  title: {
    fontSize: 25,
    fontWeight: 'bold',
    color: '#48BBEC'
  },
  subtitle: {
    fontSize: 20,
    color: '#656565'
  },
  dateContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-end'
  },
  rowContainer: {
    flexDirection: 'row',
    padding: 10
  }
});

最后，我的布局代码：

<TouchableHighlight
    underlayColor='#dddddd'>
      <View style={styles.rowContainer}>
          <View  cstyle={styles.textContainer}>
            <Text numberOfLines={1} style={styles.title}>{rowData.name}</Text>
            <Text style={styles.subtitle}>{rowData.teacher}</Text>
          </View>
          <View style={styles.dateContainer}>
            <Text style={styles.subtitle}>{result}</Text>
          </View> …