相关疑难解决方法(0)

我正在尝试vertical-align: middle在另一个div中的div,但由于某种原因它不能正常工作.我究竟做错了什么？

#wrapper {
border: 1px solid red;
width: 500px;
height: 500px;
}
#block {
border: 1px solid blue;
width: 500px;
height: 250px;
vertical-align: middle;
}

<div id = 'wrapper'> 
<div id = 'block'> I'm Block </div>
<div>

PS:这只是一个例子,所以不,我实际上并不知道div的实际宽度和高度,因为它们是动态的,根据它们的内容,所以请没有margin-top:125px,或padding-top: 125px答案,或类似的答案.

我的flex容器:

.back_pattern {
    display: flex;
    display: -ms-flexbox;
    -ms-flex-pack: center;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
}

在其他浏览器上一切正常.
ie11:http://take.ms/68dHo ;
chrome:http://take.ms/JhcEH有
什么问题？

我做了一个flex布局,其中四个列/盒并排放置在父div中.我在980px处添加了一个媒体查询,增加了列的宽度,并添加了一个flex-wrap,将两个右侧列推到一个新行上,创建了一个2 x 2样式的布局.这适用于除Safari之外的所有浏览器,其结果非常不可预测.

小提琴:https://jsfiddle.net/gjy1t16p/6/

如果您在Chrome中查看此内容并将窗口拖动到980px以下,它将按照我上面描述的方式工作.然而,在Safari中,虽然我没有设法完全重新创建问题,但是盒子垂直堆叠.

正如我所提到的,结果是不可预测的 - 当在我的网站上实现时,布局实际上比我制作的小提琴更接近工作.在网站上,2 x 2布局有效,但前提是第四个框内没有文本/小部件.一旦它包含到达框的整个宽度的内容,它向下移动到第三个框的下面,就像我尝试在其后添加的任何其他框一样.

如果有人以前经历过这个bug并知道如何解决它,我会非常感激.我整天都在努力解决这个问题,而且我完全没有想法.

HTML:

<footer class="footer">

<div class="footer-container">

<div class="footer-column" id="column-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

<div class="footer-column" id="column-2">Lorem ipsum dolor sit …

嘿家伙我最近在这里建立了这个网站,我使用flexbox和autoprefixer在这个网站上调整了很多东西.

现在,尽管我使用autoprefixer,我的客户端发送了以下其中一个部分的屏幕截图:

如您所见,图像未在圆心对齐.在所有最近的浏览器和IE 10+中都不是这种情况,在最近的浏览器中一切正常.

从访问多个SO线程后我可以收集到的是甚至safari 5+支持flex前缀.所以我不知道为什么我的flex代码不起作用.

HTML:

<figure class="focus-point" data-animation="fadeInUp" data-animation-delay="0.2">
    <a href="">
        <img src="images/focus-feature-points/2.jpg" alt="focus point">
    </a>
    <figcaption>
        <h3>Engaging Educational Games</h3>
    </figcaption>
</figure>

<a>标签的CSS 如下:

.focus-point > a {
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    border: 3px solid;
    display: inline-block;
    height: 260px;
    width: 260px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    -webkit-transition: all .3s;
    transition: all .3s;
}

我的客户端使用的safari版本是safari 5.1.10.

那么有人可以解释为什么尽管我使用前缀代码我的flexbox代码仍然不起作用？ …

我想做这样的事情:

|--------------------------------------------------------|-------------|
|                                                        |             |
|                    DIV 1                               |             |
|                                                        |    DIV 3    |
|--------------------------------------------------------|             |
|                    DIV 2                               |             |
|--------------------------------------------------------|-------------|

我不能用这个表.我不知道是否有办法让他们像这样堆叠？

我尝试使用下面的代码,但DIV 3并不是最重要的.它实际上正好是div2.height从顶部较低.

#DIV_1 {
  height: 125px;
  width: 80%;
  display: block;
  float: left;
}
#DIV_2 {
  width: 80%;
  height: 15px;
  display: block;
}
#DIV_3 {
  display: block;
  float: left;
  height: 140px;
  width: 20%;
}

<div class="row" style="width: 1024px; height: 140px;">
  <div>
    <div id="DIV_1"></div>
    <div id="DIV_2"></div>
  </div>
  <div id="DIV_3">
  </div>
</div>

所以我有一个带有列和最大高度的flexbox,使列在3列中彼此相邻.

这在Chrome中运行良好,但在Safari中,它似乎只使用最后(最右边)列来设置容器的实际高度.

我在这里举了一个例子:

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 400px;
  padding: 10px;
  border: 1px solid green;
}

div {
  flex-basis: 100px;
  width: 100px;
  background-color: red;
  margin: 10px;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

Chrome和Safari中的结果将在下方进行屏幕截图.

铬:

苹果浏览器:

这似乎是一个明显的错误,但我找不到任何有关它的信息.

我想知道的是:

1. 这有什么变通方法吗？和
2. 有没有被报道为bug？

下面的小提琴有三个街区.

块1包含三列.中间列中有两行,每行设置为flex:1.

块2包含三列.中间列中有两行,每行设置为flex:1.第二行包含一张狗的图像.图像不会缩小到包含它的行的高度.

块3仅包含中间列,其中包含两行,每列设置为flex:1.第二行包含一张狗的图像.图像会缩小到包含它的行的高度.

问题是为什么第2块中间栏第二行的图像没有缩小到包含它的行的高度？我可以添加什么CSS规则来实现这一目标？

.block{
    height:100px;
}

.wrapper{
    border:5px solid purple;
    display:flex;
    flex-direction:row;
}

.column{
    flex:1;
    border:3px solid yellow;
}

.middle{
    display:flex;
    flex-direction:column;
}

.first{
    background:red;
}

.second{
    background:orange;
}

.third{
    background:purple;
}

.row{
    flex:1;
    border:1px solid black;
    display:flex;
    align-items:stretch;
}

img{
    flex:1;
}

<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
  <div class="row first"></div>
  <div class="row second"></div>
      	
</div>
<div class="right column"></div>
</div>

<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
  <div class="row first"></div> …

我使用 flexbox 将页脚导航中的列表项分布在页脚的宽度上。

它在我的浏览器和 Chrome 的移动仿真中正确显示。但是，它在我测试过的任何移动设备（iPhone、iPad、三星平板电脑）上都会被忽略。

有没有人看到我不知道的代码有什么明显的错误？下面是我正在使用的 CSS/LESS 片段。

ul {
   display: flex;
   justify-content: space-between;
   width: 100%;
   padding: 0;

   li {
      padding: 0;
   }
}

我需要在移动纵向视图中分发三个项目。使用过flex，它适用于除 safari 之外的所有其他浏览器。所以它在 iphone 中不起作用。

我已经使用align-content: space-between;和 一flex-flow: row wrap;起来获得对齐。用于使其在 Safari 中工作的正确属性是什么？

-> 这是小提琴

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body{
  height: 100%;
  margin: 0;
}
.wrap{
  display: -webkit-box;display: -ms-flexbox;display: flex;
  -webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;
  -ms-flex-line-pack: justify;align-content: space-between;
  width: 100%;
  border: 1px solid red;
  height: 100%;
  
  -webkit-flex-flow: row wrap;
   flex-flow: row wrap;

}
div[class*="col"]{
  height: 50px;
  width: 100%;
  border: 1px solid green;
}

<div class="wrap">
  <div class="col1">

  </div>
  <div class="col1"> …

在 Safari 中使用 flex 设置 iframe 高度不起作用。在 Safari 中，iframe 的高度上限为默认高度 150。

这个问题和这个问题很相似，但解决方案没有帮助。

这个 Codepen 说明了这个问题：Chrome 和 Firefox 中的红色矩形比 150px 高得多，几乎占据了所有黑色矩形，但 iframe 在 Safari 中只有 150px 高。

代码笔：https ://codepen.io/anon/pen/rEQbMG

<div id="rootBox">
  <div id="mainBox">
    <div id="previewBox">
      <iframe class="previewContent"></iframe>
    </div>
  </div>  
</div>

#rootBox {
  width: 100%;
  height: 700px;
  display: flex;
  background-color: #FFF;
  flex-grow: 1;
  box-sizing: border-box;
  margin: auto;
}

#mainBox {
  background: black;
  height: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  align-content: stretch;
  box-sizing: border-box;
}


#previewBox …