相关疑难解决方法(0)
Flex项目不考虑边距和框大小:边框
我试图在标准CSS中实现一个简单的事情.
假设我有一个有3列和3列的网格系统box-sizing: border-box.
这意味着我将适合3个盒子,并且边距会缩小尺寸以适应最多3个盒子.
但是当我尝试用FLEXBOX做到这一点时,这真是一种痛苦!
因此,如果我有div,flex: 1 1 33.33%; margin: 10px;我希望每行有3个盒子......但是如果我使用的话flex-wrap: wrap,那将不会缩小到适合3个盒子.
这是一个例子..这个想法是第二行连续有3个盒子,第四个盒子在最后一行.
谢谢
https://jsfiddle.net/mariohmol/pbkzj984/14/
.horizontal-layout {
display: flex;
flex-direction: row;
width: 400px;
}
header>span {
/* flex: 1 1 100%; */
/* flex: 1 0 100%; */
flex: 1 1 33.33%;
margin: 10px;
}
header>.button {
background-color: grey;
}
header>.app-name {
background-color: orange;
}
header#with-border-padding {
flex-wrap: wrap;
}
header#with-border-padding>span {
flex: 1 1 33.33%;
box-sizing: border-box;
/* this is not useful at …推荐指数
解决办法
查看次数
将页脚保持在页面底部(如果需要,可以滚动)
我试图在页面底部显示一个页脚.如果页面比1个屏幕更长,我喜欢页脚只能在滚动到底部后显示.所以我不能使用'position:fixed',因为它会一直显示出来.
我正在尝试复制以下示例:http://peterned.home.xs4all.nl/examples/csslayout1.html
但是,当我使用以下内容时,由于某种原因,页脚显示在我的长页面的中间.
position: absolute; bottom:0
我有短页和长页,我希望它在两者的底部.
如何在长页面上保持页脚的底部？
小提琴
我创建了这些小提琴以显示问题并测试代码.请用您的解决方案发布一个工作示例.
我的页脚css:
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
.content {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
/* --- Footer --- */
.footerbar { position: absolute;
width: 100%;
bottom: 0;
color: white;
background-color: #202020;
font-size: …推荐指数
解决办法
查看次数
Flexbox布局在缩小尺寸时会丢失比例
我正在使用CSS flexbox和细胞的百分比大小再现金色螺旋.
使用常规边框和border-radius组合绘制圆形.
在将窗口调整到较小宽度之前,一切都是成比例的.
我试图完全删除边框,结果布局在某些时候仍然失去了比例.
大容器:
小容器:
演示: https ://jsfiddle.net/s09rkwub/1/
HTML
<div class="wrapper">
<div class="rows fib">
<div class="cols fill">
<div class="rows fill">
<div class="fr tl">3</div>
<div class="fill cols">
<div class="fc bl">4</div>
<div class="fill rows">
<div class="fill cols">
<div class="fill tl fr">7</div>
<div class="fc tr">6</div>
</div>
<div class="fr br">5</div>
</div>
</div>
</div>
<div class="fc tr">2</div>
</div>
<div class="fr br">1</div>
</div>
</div>
CSS
.rows {
flex-direction: column;
}
.cols {
flex-direction: row;
}
.rows,
.cols {
display: flex;
.fill …推荐指数
解决办法
查看次数
如何在嵌套容器中使flexbox项正确收缩？
如果我设置一个嵌套的flexbox容器,如下所示:
<div class="container1">
<div class="grow1">
<div class="container2">
<div class="grow2"></div>
</div>
</div>
</div>
...然后设置grow2 的宽度,使其比container1 宽,然后grow2溢出container1.
我相信这应该不会发生,因为挠性元件都应该当它们比柔性容器较大的萎缩.
如果我设置grow2 的flex-basis,那么这可以按预期工作.
有关演示,请参阅以下示例:
https://jsfiddle.net/chris00/ot1gjjtk/20/
请使用Chrome或Firefox
此外,我读到flexbox规范说宽度和柔性基础应该具有相同的效果(当使用水平布局时),但它们显然没有.
现在我可以使用flex-basis而不是width,但是... Edge对flex-basis和width都做同样的事情,并且它以"错误"的方式执行.IE11也错了(虽然看起来有多个flexbox错误). 请查看Edge的演示.
那应该怎么做呢？
所有浏览器都有错误吗？
flex-basis实际上应该与宽度不同(在简单的水平布局中)？
或者Edge是否正确,宽度和flex-basis都应该溢出父容器？
最后,是否有解决方法可以解决Edge(甚至是IE11)的溢出问题？
.container1 {
margin-top: 10px;
display: flex;
width: 200px;
height: 50px;
background-color: red;
}
.grow1 {
flex-grow: 1;
height: 40px;
background-color: green;
}
.container2 {
display: flex;
height: 30px;
background-color: yellow;
}
.grow2a {
flex-grow: 1;
flex-basis: 400px;
height: 20px;
background-color: turquoise;
}
.grow2b …推荐指数
解决办法
查看次数
包含溢出内容的Flexbox项目仅适用于Chrome
请看看这支笔:
https://codepen.io/linck5/pen/gRKJbY?editors=1100
body{ margin: 0;}
.container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
.top-bar {
background-color: darksalmon;
height: 50px;
}
.inner-container {
flex: 1;
background-color: chocolate;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.top {
background-color: blueviolet;
flex: 1;
overflow: auto;
font-size: 40px;
line-height: 5rem;
}
.bottom {
background-color: darkkhaki;
height: 200px;
}<div class="container">
<div class="top-bar">Top bar</div>
<div class="inner-container">
<div class="top">
O<br>v<br>e<br>r<br>f<br>l<br>o<br>w<br>i<br>n<br>g<br>C<br>o<br>n<br>t<br>e<br>n<br>t
</div>
<div class="bottom">Bottom part</div>
</div>
</div>我想只有.topdiv可滚动,而不是整个页面.我不希望.topdiv推下.bottom …
推荐指数
解决办法
查看次数
固定宽度的孩子在flexbox中缩小
我是display:flex第一次使用.
你可以在这里找到一个codepen:https://codepen.io/chrispillen/pen/GEYpRg
.node:not(.branch) {
width: auto;
height: 100px;
background: red;
margin-bottom: 1px;
}
.node.branch,
.node.branch .body {
width: auto;
overflow: hidden;
}
.node.branch .leaf {
width: 100%;
height: 100px;
background: blue;
}
.node.branch .body {
width: 100%;
display: flex;
align-items: stretch;
}
.node.branch .body .tribe {
width: 100px;
background: blue;
margin-right: 1px;
}
.node.branch .body .subnodes {
padding-top: 1px;
width: 100%;
overflow: hidden;
}<div class="node"></div>
<div class="node branch">
<div class="leaf"></div>
<div class="body">
<div class="tribe">TRIBE</div>
<div …推荐指数
解决办法
查看次数
Chrome不会根据孩子的内容展开flex父级
我需要在彼此旁边显示几个方框.每个框都有可变数量的子项.父母应根据子项目占用的空间进行扩展.物品的宽度固定很重要.我正在使用flexbox进行布局.它应该如下所示:
我写了一篇Plunkr来说明.
问题:当孩子占用更多空间时,Chrome不会扩展父级.子项目显示在父母的边界之外并出现在邻近的父级中,导致这种混乱:
具有讽刺意味的是,如果你在IE 11或Edge中打开Plunkr,它运行正常.
我究竟做错了什么？
这是一段代码片段:
body {
display: flex;
overflow: scroll;
}
.parent {
border: 1px solid grey;
padding: 0 20px;
display: flex;
flex-direction: column;
}
.items {
display: flex;
}
.items span {
flex-basis: 25px;
flex-shrink: 0;
}<div class="parent">
<h4>Parent 1</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 2</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 3</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span> …推荐指数
解决办法
查看次数
宽度和柔性基础之间的差异
我在行为之间遇到了差异,width而且flex-basis我无法解释它与flex-basis和width之间有什么区别？.
.outer {
display: flex;
background: yellow;
padding: 10px;
}
.middle {
display: flex;
flex-shrink: 0;
background: red;
padding: 10px;
}
.inner {
flex-basis: 258px;
flex-shrink: 0;
display: flex;
flex-grow: 0;
background: green;
}
.inner2 {
width: 258px;
flex-shrink: 0;
display: flex;
flex-grow: 0;
background: green;
}<div class="outer">
<div class="middle">
<div class="inner">
hello
</div>
</div>
</div>
<div class="outer">
<div class="middle">
<div class="inner2">
hello
</div>
</div>
</div>这是一个说明我遇到的问题的例子.我期望两行看起来都一样,但是,当使用flex-basis(第1行)时,flex容器(.middle元素)似乎忽略了它的子.inner …
推荐指数
解决办法
查看次数
Flexbox - 具有"无包装"文本的流体柱
我正在尝试设置一个包含三列的flexbox布局.左列和右列具有固定的宽度.中间列具有流体宽度以填充可用空间,但它包含一个长文本,不应该包装,而是使用省略号.
遗憾的是,非包装文本不能提供列占用可用空间的能力,并将整个布局推送到父元素的边界之外.
img {
max-width: 100%;
}
#container {
display: flex;
max-width: 900px;
}
.column.left {
width: 350px;
flex: 0 0 350px;
}
.column.right {
width: 350px;
flex: 0 0 350px;
}
.column.center {
// fluid width required
}
h1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<div id="container">
<div class="column left">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
</div>
<div class="column center">
<h1>
This is long text. If overflow use ellipsis
</h1>
</div>
<div class="column right">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="">
</div>
</div>链接到小提琴: …
推荐指数
解决办法
查看次数
如果先前的兄弟浮动,则Flex容器溢出
如果将前一个兄弟设置为float宽度为100%并且将以下兄弟设置为display: flex,则后者将溢出父容器而不是换行到新行.
对于任何其他display值,但flex(或grid)它包装,因为它应该,所以它设置为什么时不会flex
.float-left {
float: left;
width: 100%;
}
.display-flex {
display: flex;
background: yellow;
}
/* Demo css */
.container {
max-width: 80%;
margin: auto;
background: white;
}<div class="container">
<div class="float-left">I'm floating left, with a width of 100%.</div>
<div class="display-flex">'Floating left' takes up 100% of the space, but still i don't go onto a new line?</div>
</div>推荐指数
解决办法
查看次数