小编LGS*_*Son的帖子

我如何修复下面的代码..我使用了transform:translateY(-50%)的技术使div垂直居中.但是当我将它与动画一起使用时,它首先需要top:50%它翻译给一个混蛋 ..我不希望这个混蛋发生,元素应该自动进入中心.

body,
html {
  height: 100%;
  background: #c9edff;
  text-align: center;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-family: arial;
  font-size: 20px;
  line-height: 1.8em;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

<div class="element">
  Vertical Align is Awesome!
  <br /> But with …

我在flexbox中有一个网格,如下所示:

它们都是使用flexbox定位的,然后是面板本身(彩色位)margin: 5px.

codepen:https://codepen.io/callumacrae/pen/bRoZdp

因为右上角有两个元素,那里有更多的余量,所以它稍微向下推 - 我不希望这种情况发生!

我想两个可能的修复方法是让边距不要这样做,或者使组件小五个像素而不是像现在这样大五个像素 - 但我不知道如何做其中任何一个.

如何添加更多元素而不更改父级的大小？

如果您使用Flexbox布局来连续布局某些项目,则Flexbox容器会占用其所在容器的整个宽度.如何将Flexbox容器设置为仅占用其子元素的宽度？

看一下下面的例子:

https://jsfiddle.net/5fr2ay9q/

在此示例中,flexbox容器的大小超出子元素的宽度.解决这类问题的典型方法display: inline显然是不起作用,因为它不再是一个flexbox容器.

是否有可能做到这一点？

.container {
  display: flex;
  flex-direction: row;
  outline: 1px solid red;
}

p {
  outline: 1px solid blue;
}

Can you make the flex container not 100% width but rather the width of the content itself?

<div class='container'>
  <img src='https://placehold.it/300x300'/>
  <p>
    This is some content hello world testing 123.
  </p>
</div>

我对 flexbox 的理解是，如果您将元素显示为 flex，则该项目将成为 flex 容器，并且它的直接子项将成为 flex 项目，而这些 flex 项目表现为内联块项目，所以我遵循这个逻辑，它工作正常，直到我在我的 css 中添加了最后一个，请阅读我在 css 代码中留下的评论，哪一行让我感到困惑。

简而言之，我期待类似的结果，但我对空间感到困惑，请参阅图片以了解，

代码

<ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="menu-item-has-children"><a href="#">Services</a>
                <ul class="sub-menu">
                    <li><a href="#">Plumbing</a></li>
                    <li class="menu-item-has-children"><a href="#">Heating</a>
                        <ul class="sub-menu">
                            <li><a href="#">Residential</a></li>
                            <li><a href="#">Commercial</a></li>
                            <li><a href="#">Industrial</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Electrical</a></li>
                </ul>
            </li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact Us</a></li>

        </ul>

代码

/*basic style no need to pay attention*/
*{font-family:helvetica;
    margin:0px;padding:0;
    list-style-type:none;
}
ul{margin:5px;}
ul ul a:link{color:red;}
ul ul ul a:link{color:black}
/*displaying them as flex, work fine*/
.menu{display:flex;}
.menu …

我试图根据内容设置每个项目的宽度，但到目前为止我已经将宽度一直设置为可用空间。flex: 0 0 auto 似乎并不能解决问题。我究竟做错了什么？

目标是根据内容大小设置宽度。

[Hello]
[Hello world]

现在

[Hello                   ]
[Hello world             ]

https://jsfiddle.net/v6cgLjbd/8/

<span class='box'>
  <span class='item'>Hello</span>
  <span class='item'>Hello World</span>
  <span class='item'>Hello lOOOOONG text</span>
</span>

.box {
  height: 200px;
  width: auto;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}

.item {
  background-color: gray;
  flex: 0 0 auto;
  width: auto;
}

如何使用弹性框将网页分成四个相等的部分？像这个网站的东西 - www.rileyjshaw.com

列应该能够在较小的视图端口上相互堆叠.

编辑/更新:

到目前为止,我已经尝试过这个 - 我应该改变线高吗？如何实现不同的块？

/* Grid */

.column {
  flex-basis: 100%;
  width: 50%;
  height: 50%;
  line-height: 200px;
}

@media screen and (min-width: 800px) {
  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .column {
    flex: 1;
  }
  ._25 {
    flex: 2.5;
  }
  ._5 {
    flex: 5;
  }
}


/* Style */

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  /*margin-bottom: 70px;*/
}

.column {
  /* padding: 15px;
  border: 1px solid #666;
  margin: …

我正在尝试使3d元素保持flex容器的全宽。但没有得到重用。有人建议我正确的方式ie11吗？

.parent{
  border:1px solid red;
  display:flex;
  justify-content:space-between;
  padding:0 40px;
}

.child{
  flex:0 0 30%;
  border:1px dashed green;
}

.child.last{
/* not working */
  width:100%;
}

<div class="parent">
  <div class="child">one</div>
  <div class="child">two</div>
  <div class="child last">three</div>
</div>

我有一个内容和页脚面板.页脚具有固定大小,但内容可以是固定的,也可以填充剩余高度,具体取决于(大)子元素.如果任何孩子填充剩余高度,则内容面板也应填充剩余高度.这些填充孩子的深度可以是任何(直接孩子或10个嵌套水平)

例:

var button = document.getElementById('child-switcher');
var child = document.getElementById('content-filler');
button.onclick = function() {
	if (child.style.display === 'none') {
  	child.style.display = null;
  } else {
  	child.style.display = 'none';
  }
}

#main {
  height: 300px;
  display: flex;
  flex-direction: column;
}

#footer {
  background-color: green;
}

#content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#some-nested-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

#content-filler {
  flex: 1;
  background-color: red;
}

#content-header,
#content-footer {
  background-color: yellow;
}

<div id="main">
<button id="child-switcher">
  Hide/show …

我注意到，即使您使用相同的混合模式，使用mix-blend-mode结果也不同于使用结果background-blend-mode。

例如，比较下面的2个结果：

我已经在下面的设置和JSFiddles中复制了：

的HTML

<div class="background">
  <div class="overlay"></div>
</div>

的CSS

.background{
  width:200px;
  height:200px;
  //background-color:green; //toggle depending on what you want to use
  background-blend-mode:soft-light;
  background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
  background-size:cover;
}

.overlay{
  width:100%;
  height:100%;
  background-color:green; //toggle depending on what you want to use
  mix-blend-mode:soft-light;
}

JSFiddle

使用混合混合模式：https : //jsfiddle.net/p8gkna87/

使用background-blend-mode：https : //jsfiddle.net/p8gkna87/1/

一些背景资料

我目前正在复制使用柔光混合模式的Photoshop设计，同时还使用51％的不透明度。因此它将无法使用，background-blend-mode因为不透明度不能应用于同一对象。

我正在尝试使用flex wrap和min-width:50%来动态网格布局,其中单个单元占据所有宽度.问题是它在iOS 10.1.1(iPhone 5c)Safari和Chrome中无法正常工作 - 显示器不是网格状,而是水平布局.在桌面Chrome(Ubuntu)和Android Chrome工作正常.

Jsfiddle演示:https://jsfiddle.net/9dscc1Lq/

码:

<style>

body {
    width: 300px;
}

.tabs {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    box-sizing: border-box;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
}

.tab {
    border: 1px solid #3A3A3A;
    color: #929292;
    min-width: 50%;
    box-sizing: border-box;
    flex: 1 1 0;
    -webkit-flex: 1 1 0;
    text-align: center;
}

</style>

<div class="tabs">
    <div class="gwt-HTML tab">1</div>
    <div class="gwt-HTML tab">2</div>
    <div class="gwt-HTML …