相关疑难解决方法(0)

加号(+)用于下一个兄弟.以前的兄弟姐妹是否有同等效力？

我想有A B和C中间对齐.

我怎样才能D完全走向正确？

之前:

后:

这样做的最佳做法是什么？

ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
li:last-child {
  background: #ddd;
  /* magic to throw to the right*/
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

https://jsfiddle.net/z44p7bsx/

是否可以使flex元素忽略子元素,因此它的大小不会影响其他元素？

例如,我有一个包装器display: flex.它有标题,内容和页脚.

<div class="wrapper">
    <header></header>
    <article></article>
    <footer></footer>
</div>

我希望包装器忽略标头标签(标头将固定在窗口的顶部).该文章将设置为flex: 1占用其余空间,将页脚强制到页面底部.这是一些示例CSS:

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 50px; /* Accounts for header */
}

header {
    height: 50px;
    position: fixed;
    top: 0;
    width: 100%;
}

article {
    flex: 1;
}

footer {
    height: 50px;
}

我知道我可以将标题移到包装器之外但是我有很多现有的代码会让它变得更加困难.我甚至可能要问什么？

我有一个Flex容器(蓝色方块),具有以下属性:

display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;

因此,它的孩子(浅蓝色方块)如下所示排列自己.但是,我想在正常流程中添加另一个子项(绿色方块)并将其相对于其父项定位.要定位它,你看到下面,我非常喜欢写东西bottom: 20px;和margin: auto;.

我试着玩弄z-index无济于事.我该怎么做呢？我应该求助于创建另一个父元素吗？

我在父div中有三个div,它们使用以下方式间隔开:

display: flex;
justify-content: space-between;

但是,父div有一个:afteron,它使得三个div不会出现在父div的边缘.有没有办法让flexbox忽略:before和:after？

codepen.io

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  background: gray;
}

.container div {
    background: red;
    height: 245px;
    width: 300px;
  }
.container:before {
    content: '';
    display: table;
  }
.container:after {
    clear: both;
    content: '';
    display: table;
  }

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

我有一个#text内部弯曲,#container并希望绝对定位在它下面的东西:

如何计算兄弟姐妹的弹性定位？

#container{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  position: relative;
  width: 95vw;
  height: 95vh;
  border: 1px solid black
}
#text{
  font-size: 13px;
  width: 50vw;
  text-align: justify;
}
#absolute{
  position: absolute;
  bottom: 5px;
  left: calc(47.5vw - 25px);
  width: 50px;
  text-align: center;
  color: red;
}

<div id="container">
  <div id="text">
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate …

这是 问题的屏幕截图.
到底:1 - Chrome,2 - Opera,3 - Firefox,4 - Edge.

下面我写了可执行代码.
为方便起见,这里有codepen.

基本理念:画廊标签和徽标位于中心位置,其余部分位于侧面.
Transform将用于动画.

除了测量之外,如果您有助于了解如何在Firefox中保持flex,我将不胜感激.
更确切地说,我认为align-items: center在Firefox中没有正确显示.请帮忙.

.gallerypage {
  margin: 0;
  padding: 0;
  background: #fff;
}

.gallerypage .header {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100px;
  background: gray; …

我目前正在尝试使用flexbox构建响应式网站布局.

根据屏幕尺寸,我希望元素具有position: fixed;此功能.但是当我justify-content: space-between;在包含一个元素的列上使用时,该元素会从列本身移出,position: fixed;空间分布使用此元素作为0高度元素.

为了演示,我设置了两个例子.两者都不使用媒体查询,因为它们不是问题.

在第一个例子中,我创建了我想要的最终结果.我不得不搬到#fixed外面.column,以使空间分布的正常工作.

在第二个例子中,我创建了所需的HTML标记.当您将两个示例并排比较时,您会注意到间距在第二个中看起来很奇怪.浏览器在这里没有出错,因为在分配空间时必须遵守一个元素.我(简而言之)希望浏览器假装#fixed不在容器内,因此在分配空间时不考虑它.

这是结果的样子:https://jsfiddle.net/5nu9nsyL/3/

这就是html应该看起来的样子:https://jsfiddle.net/5nu9nsyL/4/
(只有Chrome和Safari才能正确呈现.所以如果两者看起来都一样,你可以使用不同的浏览器来查看它,比如Firefox或者IE)

我希望我能说清楚自己想要什么.

(注意我必须display: flex在容器上使用.column)

(我还需要一个免费的,仅限CSS的解决方案)

我有一个简单的 Flex 元素和一些子元素，如下所示：

.container{
  display: flex;
  flex-wrap: wrap;
}
.container div.flex-box{
  width: 200px;
  margin: 20px;
  padding: 20px;
  font-size: 40px;
  border: 1px solid;
}

<div class='container'>
  <div class='flex-box'>one</div>
  <div class='flex-box'>two</div>
  <div class='flex-box'>three</div>
  <div class='flex-box'>four</div>
  <div class='flex-box'>five</div>
  <div class='flex-box'>six</div>
</div>

我使用的是柔性包装，所以当屏幕变小时，它们会堆叠起来。

现在，我想使用 ajax 调用重新加载第四个和第五个元素来重新加载这两个元素，为此我需要将两个子元素放入容器中，但是当我这样做时，它会变成一个新的 Flex 子元素

.container{
  display: flex;
  flex-wrap: wrap;
}
.container div.flex-box{
  width: 200px;
  margin: 20px;
  padding: 20px;
  font-size: 40px;
  border: 1px solid;
}

<div class='container'>
  <div class='flex-box'>one</div>
  <div class='flex-box'>two</div>
  <div class='flex-box'>three</div>
  <div class='subcontainer'>
    <div class='flex-box'>four</div>
    <div class='flex-box'>five</div>
  </div>
  <div …

我在flexbox上有一个复杂的问题.基本上,我的演示适用于Chrome,但不适用于Firefox.以下是我的HTML代码:

<div class="flex-main-container">

    <img src="http://www.modifiedstreetcars.com/sites/default/files/styles/carousel_circle/public/Nissan-GTR-White-Custom1.jpg?itok=RTxhTPOv" alt="">
    <img src="http://www.buntycars.com/contents/member/buntycars/photos/Hot-Modified-Car-Wallpape-721c6.jpg" alt="">

    <figure>
        <img src="http://modscar.net/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpg" alt="">
        <figcaption>explanatory caption</figcaption>
    </figure>
    <figure>
        <img src="http://modscar.net/wp-content/uploads/2016/04/30-MODIFIED-CARS-ARE-SHINING-AT-THE-ZOMBIE-APOCALYPSE.jpg" alt="">
        <figcaption>explanatory caption</figcaption>
    </figure>

</div>

现在,文档中有关于flex容器中定位元素的以下内容:

由于它不在流动状态,Flex容器的绝对定位子元素不参与flex布局.

更多信息在这里

现在我已经定位了两个元素,即图像绝对如此:

.flex-main-container > img:nth-of-type(1) {
        position: absolute;
        left: 0;
        top: 0;
}

.flex-main-container > img:nth-of-type(2) {
        position: absolute;
        left: 100px;
        top: 150px;
} 

现在在容器上我有以下代码:

.flex-main-container {
        background: #eee;
        display: flex;
        height: 500px;
        align-items:flex-start;
        justify-content:space-between;
        flex-direction: column;
} 

现在我希望剩下的元素justify-content:space-between在主容器上垂直展开.我确实在Chrome中获得了所需的行为.见下面的截图:

但是FIREFOX中的BU是你看到的东西

请注意,在Firefox中,黑色汽车图像与Chrome中的右上角没有对齐.在某种程度上在Firefox中,绝对定位的元素似乎仍然干扰其余元素的定位,我认为不应该这样.

有人可以解释为什么会这样吗？为什么Firefox允许绝对定位的元素干扰其他静态元素的定位？

PS这是一个"为什么"的问题.我不只是在寻找一个"黑客"来解决这个问题,但我实际上对这为什么会发生这种情况感兴趣.

谢谢.

如何使用flex在avatar下集中这个跨度？

如果我删除跨度,则头像图像很好地集中,但是当我插入跨度时,即使display:block它显示在右侧也是如此.

这是我的HTML:

<ion-navbar *navbar>
    <ion-avatar item-center>
        <img src="img/bill-gates-avatar.jpg">
        <span>Bill Gates</span>
    </ion-avatar>
</ion-navbar>
<ion-content padding>
    Content here...
</ion-content>

那是我的SCSS:

.tabs {

    ion-navbar-section {
        min-height: 16.6rem;
    }

    .toolbar {
        min-height: 170px;
    }

    ion-avatar {
        display: flex;
        justify-content: center;
        align-content: center;
    }

    ion-avatar img {
        max-width: 8rem;
        max-height: 8rem;
        border-radius: 5rem;
        border: 2px solid color($colors, light);
    }
}

我相信这完全违背了该display: flex属性应该工作的方式，但我想知道它是否可能，或者是否有黑客攻击。

是否有可能让 flex 容器的子项不作为 flex 项目？例子：

http://jsbin.com/jusehedumi/edit?html,css,output

有什么办法可以让孩子三成为一个正常的显示块？没有它由于justicity-content: center父 flex 容器而自动对齐？

纯粹的 css 解决方案会很棒。考虑一下，添加一些额外的 HTML 可能会使这个问题更容易修复/解决。

.flex{
  display: flex;
  justify-content: center;
  width: 400px;
  height: 400px;
  background: #ccc;
}

.child{
  width: 100px;
  height: 100px;
  background: red;
  margin: 20px;
}

.child.three{
  background: blue;
  display: block;
}

  Is there any way to make child three not behave as a flex child?
  <div class="flex">
    <div class="child one"></div>
    <div class="child two"></div>
    <div class="child three"></div>
  </div>

编辑：我知道可以通过使用position: absolute或类似方法将孩子从 …