相关疑难解决方法(0)
如何让flexbox儿童100%的父母身高？
我正在尝试填充flexbox内的flex项目的垂直空间.
.container {
height: 200px;
width: 500px;
display: flex;
flex-direction: row;
}
.flex-1 {
width: 100px;
background-color: blue;
}
.flex-2 {
position: relative;
flex: 1;
background-color: red;
}
.flex-2-child {
height: 100%;
width: 100%;
background-color: green;
}<div class="container">
<div class="flex-1"></div>
<div class="flex-2">
<div class="flex-2-child"></div>
</div>
</div>这是JSFiddle
flex-2-child 没有填写所需的高度,除非在以下两种情况下:
flex-2高度为100%(这很奇怪,因为弹性项目默认为100%+ Chrome中存在错误)flex-2-child有一个绝对的位置也很不方便
这在目前的Chrome或Firefox中不起作用.
推荐指数
解决办法
查看次数
如何使嵌套的flexbox工作
我有一个嵌套的flexbox设置的小例子:http://jsfiddle.net/ThomasSpiessens/MUrPj/12/
<div class="box fullSize">
<div class="boxHeader">HEADER</div>
<div class="boxContent">
<div class="box fullSize">
<div class="boxHeader moregreen">INNER HEADER</div>
<div class="boxContent red">CONTENT CONTENT CONTENT</div>
<div class="boxFooter moreblue">INNER FOOTER</div>
</div>
</div>
<div class="boxFooter">FOOTER</div>
</div>
在此示例中,以下内容适用:
- CSS'box'类使用flexbox属性,只有boxContent被告知增长.有关特定的CSS属性和值,请检查小提琴.
- 'fullSize'只是将宽度和高度都设置为100%.
当您使用Firefox和Chrome检查这个小提琴时,您会得到不同的结果.在Firefox中它做了我想它必须做的事情,这是拉伸内部.boxContent.但是在Chrome中,内部.boxContent不会被拉伸.
有没有人知道如何在Chrome中制作内容？也许是一个缺少的特定webkit属性？
推荐指数
解决办法
查看次数
highcharts-ng增长但在flexbox中不缩小
我正在尝试在Flexbox容器中放置一个高图.图表随着容器的增长而增长,但是当容器收缩时它不会收缩.
我的项目使用angularJS和highcharts-ng,虽然我猜测问题在于flexbox本身.至少在Chrome和IE中也是如此.
这是一个说明问题的傻瓜.如果打开嵌入式视图,您会注意到当窗口变宽时,两个图表都会重新调整以适应.但是当你做得更窄时,顶部图表(在弹性箱中)保持不变.
我放入了reflow按钮来广播highcharts-ng的reflow事件,但它似乎没有效果.
我正在寻找一种解决方法或任何仍然允许我使用flexbox的解决方案.
以下是Plunkr的代码.它基于highcharts-ng的作者的另一个插件,解决了引导容器的类似问题.
的index.html
<!DOCTYPE html>
<html ng-app="highChartTest">
<head>
<link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="MyHighChart as c">
<div class="page-container">
<div class="side-panel">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li><button ng-click="onReflowButtonPressed()" class="autocompare">Reflow</button></li>
</ul>
</div>
<div class="main-panel">
<highchart id="highchart01" config="c.config" height="300"></highchart>
</div>
</div>
<highchart id="highchart02" config="c.config" height="300"></highchart>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script data-require="ui-bootstrap-tpls-0.12.0.min.js@*" data-semver="0.12.0" src="https://rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script data-require="highcharts@4.0.1" data-semver="4.0.1" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.1/highcharts.js"></script>
<script data-require="highcharts-ng@0.0.9" data-semver="0.0.9" src="https://rawgit.com/pablojim/highcharts-ng/master/dist/highcharts-ng.min.js"></script>
<script src="app.js"></script>
</body>
</html> …推荐指数
解决办法
查看次数
如何让flexbox align-items flex-end在WebKit/Blink中工作？
我正在尝试将flexbox嵌套在另一个flexbox中.外盒是垂直的:
+------+
| |
+------+
| |
| |
| |
+------+
顶部区域适合内容flex 0 1 auto,下半部分填充剩余空间flex 1 1 auto.
在下半部分我有另一个柔性盒水平.我希望2个内盒之间的空间位于对齐和弯曲端之间,因此基本上2个内部固定在左下角和右下角,如下所示:
+------+
| |
+-+ +-|
|L| |R|
+------+
设置它似乎在Firefox中有效但在Chrome(Blink)和Safari中我得到了这个:
+------+
| |
| |
| |
+-+--+-|
|L| |R|
+-+ +-+
这是HTML
<div id="outer">
<div id="top">
top
</div>
<div id="bottom">
<div id="bottomcontents">
<div id="botleft">
bottom left
</div>
<div id="botright">
bottom right
</div>
</div>
</div>
</div>
还有CSS
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
html, body { …推荐指数
解决办法
查看次数
在 Chrome 中具有 100% 高度溢出主体的 Div
我正在尝试按照此处和此处的描述制作 100% 高度 flex 的孩子。在 Firefox 和 IE 中，它按预期显示，但在 chrome 中，它搞砸了。div 正在脱离身体。这是 chrome 遵循规范对 T 恤的另一个副作用还是仍然是一个错误？
编码：
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
border: 1px solid black;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.red-border {
border: 2px solid red;
}
.blue-border {
border: 2px solid blue;
}
.green-border {
border: 2px solid green;
}
</style>
</head>
<body class="red-border" >
<div clsas="blue-border" style="display: …推荐指数
解决办法
查看次数
Flexbox 100%高度问题
我找到了以下链接......但它仍然无法帮助我......
如何使嵌套的flexbox工作
高度100%在flexbox列子上
如何使flexbox子项100%的父级高度？
我需要一个响应的整页,如下图所示:
使用页眉和页脚以及中间5列在剩余空间中均匀填充高度,然后当我进行媒体查询时,填写移动设备的屏幕,如下所示:
这是我到目前为止的代码......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto; …推荐指数
解决办法
查看次数