我正在尝试设置一个包含三列的flexbox布局,其中左列和右列具有固定宽度,中心列弯曲以填充可用空间.
尽管为列设置了尺寸,但随着窗口缩小,它们似乎仍在缩小.
有谁知道怎么做到这一点？
我需要做的另一件事是根据用户交互隐藏右列,在这种情况下,左列仍将保持其固定宽度,但中间列将填充剩余的空间.
#container {
display: flex;
justify-content: space-around;
align-items: stretch;
max-width: 1200px;
}
.column.left {
width: 230px;
}
.column.right {
width: 230px;
border-left: 1px solid #eee;
}
.column.center {
border-left: 1px solid #eee;
}<div id="container">
<div class="column left">
<p>Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013. It featured essays, fiction, and art by a wide range of contributors that explored anxiety from scientific, literary, and …我在flexbox中有两个div并排.右手应该总是相同的宽度,我希望左手一个只抓住剩余的空间.但除非我专门设定其宽度,否则它不会.
所以目前,它设置为96%,看起来没问题,直到你真的挤压屏幕 - 然后右手div有点缺乏它所需的空间.
我想我可以保留它,但它感觉不对 - 就像必须有一种说法:
合适的人总是一样的; 你在左边 - 你得到了剩下的一切
.ar-course-nav {
cursor: pointer;
padding: 8px 12px 8px 12px;
border-radius: 8px;
}
.ar-course-nav:hover {
background-color: rgba(0, 0, 0, 0.1);
}<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
<div style="width:96%;">
<div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
<strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
Course Name Which is Really Quite Long And Does …设置max-width或width弹性项目之间是否有区别而不是flex-basis？
这是flex-grow/shrink物业的"突破点" 吗？
当我设置flex-wrap: wrap浏览器如何决定将项目下移到新行时？是根据他们的宽度还是'弹性基础'？
示例:http://jsfiddle.net/wP5UP/
最后两个框具有相同的内容flex-basis: 200px,但当窗口介于300px和400px之间时,其中只有一个框向下移动.为什么？
说我做3个弹性柱,第一个50%,另外两个自动调整.
.half {
flex: 0 0 auto ;
width: 50% ;
}
要么
.half {
flex: 0 0 50%;
}
这些似乎在功能上是相同的.是吗？
我试图达到标记为"HALF"的框的效果,仅占据宽度的50%(也就是说它们均匀地共享第一行).
基本要求是它们保留在单个容器中.这有可能实现使用flexbox吗？
我试着玩弄flex-grow,flex-shrink以及flex-basis但是我怕我不理解如何使它工作,或者如果它给出的单容器的要求甚至有可能.
考虑这个小提琴:http://jsfiddle.net/GyXxT/270/
div {
border: 1px solid;
}
.container {
width: 400px;
display: flex;
flex-direction: column;
}
.child {
height: 200px;
}
.child.half {
flex: 1 1 10em;
color: green;
}
.child:not(.half) {
flex-shrink: 2;
flex-basis: 50%;
color: purple;
}<div class="container">
<div class="child half">
HALF
</div>
<div class="child half">
HALF
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
</div>下面的简单代码片段会产生一个网页占据可用的屏幕空间,顶部有一个标题,底部是一个页脚,主要内容占用尽可能多的空间(带有虚线边框,使其更容易)查看):
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-flow: column;
}
h1, small {
flex: 0 1 auto;
}
div {
flex: 1 1 auto;
border: 1px dotted;
}<!doctype html>
<html>
<body>
<h1>Some Header</h1>
<div>Some Text</div>
<small>Some Footer</small>
</body>
</html>如果我修改CSS和HTML而不是使用a table代替a div,它不会扩展表以占用可用空间:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-flow: column;
}
h1, small {
flex: 0 1 …根据Chrome中的相同行为,div我们flex在IE11中有一系列组件.在下面的小提琴中,您将找到构成"列"结构的复选框元素,以及预期填充整个父级宽度的复选框元素.
在全宽复选框元素开始的第二行,该元素应该换行到下一行,因为.grid__item-flex它中的元素超过.grid__row了几个级别中可用的宽度.但是,在IE11上,该宽度不再受到尊重,因此.grid__item-flex继续溢出父元素的宽度.
失败的潜在解决方案包括强制执行宽度.grid__item-flex; 我们给它100%宽度,但上面的嵌套复选框元素将失去其列结构.此外,max-width: 100%当我们应用它时,属性似乎被忽略了.grid__item-flex.
是否有CSS解决方案,我们可以强制
.grid__item-flex尊重其容器宽度而不破坏它上面的嵌套列,并确保最后一个复选框元素(在它下面)保持在同一行？
可以在这里找到复制我的问题的JSFiddle.该示例在Chrome上按预期工作.更新于2018年11月,JSFiddle不再支持IE,因此除非我们在其他地方沙箱,否则此示例无效.
总而言之,Flexbox必须同时工作的两种情况:
1)ñ的数目div在换到下一行的行如果行宽度超过母体的宽度
flex-wrap: wrap,但只有当元素具有正确的宽度时才能实现2)div如果它自己的内容超过父亲的宽度,则包裹到下一行
我试过的事情:
将速记扩展flex: 1为其完整属性,flex-grow flex-shrink flex-basis因为"IE10和IE11的默认值为0 0自动而不是0 1自动,根据草案规范,截至2013年9月"
使用JS Polyfill for IE Flexbox,但项目不再被维护(并且不能作为修复工作)
使用Postpack的PostCSS插件尝试使用全局修复flex: 1 1 0%
应用width: 100%溢出其父级的div会导致上面的嵌套列变成一个长列,因此虽然它部分地修复了溢出问题,但它首先打破了使用flexbox的目的(因为我们希望尽可能多divs地弯曲成一排).
我最近开始使用flexbox,经常出现需要在元素之间的主轴上分配空间的情况.
我常常width和之间犹豫不决flex-grow.例如,如果我想要一个项目来衡量2个度量,而另一个度量,最多加上100%,我有两个选择.我可以设置width: 66.6%和width: 33.3%,或者flex-grow: 2和flex-grow: 1.
有时如果我想要一个元素来扩展其余的空间,我可以做width: 100%或者flex-grow: 1.
我该如何选择？使用宽度与弹性增长有什么区别/考虑因素？
我有3个div,如果我给flex: 0.5前两个div,如果我给的话,最后一个div应该移动到下一行flex-wrap: wrap.如果我错了,请纠正.
以下是我的html/css:
.parent {
display: flex;
height: 100px;
background-color: red;
flex-wrap: wrap;
}
.child-1 {
background-color: green;
flex: 0.5;
}
.child-2 {
background-color: yellow;
flex: 0.5;
}
.child-3 {
background-color: pink;
}<div class="parent">
<div class="child-1">LOREN IPSUM LOREN IPSUM</div>
<div class="child-2">LOREN IPSUMLOREN IPSUMLOREN IPSUM</div>
<div class="child-3">LOREN IPSUMLOREN IPSUM</div>
</div>请检查JSFiddle.
提前致谢.
我一直在阅读关于css 属性的MDN 文章flex-basis。在那里我没有看到flex-basis: auto. 它解释了关于flex-basis: content. content现在好像已经更换了auto。但如果是这样，那为什么auto还是初始值呢？