小编age*_*tem的帖子

为什么我的flexbox flex-stretch属性不起作用?

我正在尝试使用flexbox来拉伸三个弹性儿童盒以填充容器,以便所有三个盒子都具有相同的尺寸.但是,我不希望前两个内盒伸展 - 我总是希望它们的大小相同.有点难以解释,所以这就是我希望它看起来像这样:在此输入图像描述

红色方框彼此相等且高度相同,与蓝色方框相同(红色和蓝色方框之间的高度关系不重要),绿色方框是拉伸到最大黑匣子的大方框.所以我想避免这样的事情,例如:

在此输入图像描述

这是一个JSFiddle:http://jsfiddle.net/agentemi1y/ssxu5moy/

这是基本的html:

<div class="container">
<div class="box box1">
    <div class="inside-box"></div>
    <div class="inside-box"></div>
    <div class="inside-box last-box"></div>
</div>
<div class="box box2">
    <div class="inside-box"></div>
    <div class="inside-box"></div>
    <div class="inside-box last-box"></div>
</div>
<div class="box box3">
    <div class="inside-box"></div>
    <div class="inside-box"></div>
    <div class="inside-box last-box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

.container {
border: 1px solid red;
width:90%;
height: 100px;
display:flex;
justify-content: center;
align-items: center;
align-content: stretch;
}

.box {
    border: 1px solid purple;
    flex: 0 1 33%;
    margin: 0 20px;
    align-self: stretch;
    display:flex;
    flex-direction: row;
    flex-wrap: …
Run Code Online (Sandbox Code Playgroud)

css css3 flexbox

13
推荐指数
1
解决办法
1万
查看次数

如何使用带有模拟 android 设备 (AVD) 的 Web Inspector

我下载了 Android SDK(在 Mac 上),但无法访问 Android 硬件。我可以启动 AVD 并很好地模拟各种 android 设备,但我有一些 CSS,我想在所述模拟设备上的 Android 浏览器中检查。我只是不知道如何做到这一点。

对于 iOS,您可以非常轻松地将 Safari 连接到 xcode 模拟器,但我似乎无法弄清楚 Android 和 Chrome 的等效项。我在该主题上找到的所有教程都告诉您使用通过 USB 连接的 Meatspace 设备!甚至不需要是 chrome - 在这一点上,任何类似网络检查器的服务,让我可以即时查看和更改 CSS,都可以。帮助!

android google-chrome web-inspector android-virtual-device android-emulator

6
推荐指数
1
解决办法
4076
查看次数

使SVG响应

我有一个SVG,代码如下.我想让它具有响应宽度,并且我已经读过你不应该在视口上设置宽度和高度,但当我删除它们时,SVG会消失.我该怎么改变这个以便SVG调整大小?

.thumb_arrow{
  z-index: 1000;
  background-size: 100% 100%;
  float: right;
  position:relative;
  bottom: 2rem;
  left:2rem;
  margin-right:1rem;
  @media (min-width: @screen-medium) {
    margin-right: 15rem;
  }
}
Run Code Online (Sandbox Code Playgroud)
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10em" height="10em"viewBox="0 0 50 100" enable-background="new 0 0 73.672 275.734" xml:space="preserve"> 
		<path fill="#ABABAB" d="M59.717,50.177c0-13.252-3.631-25.945-10.495-36.82l2.998-1.873L39.891,0.667l4.318,15.823l3.1-1.937 c6.64,10.515,10.152,22.797,10.152,35.624c0,12.927-3.56,25.284-10.294,35.848l-2.959-1.849L39.891,100L52.22,89.183l-3.14-1.962 C56.037,76.298,59.717,63.529,59.717,50.177z"/> 
</svg>
Run Code Online (Sandbox Code Playgroud)

css svg

4
推荐指数
2
解决办法
2万
查看次数