程序设计 flexbox

3

我正在尝试建立一个具有三列的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 …

315 html css flexbox

1

为什么弹性项目不能缩小到超过内容大小？

我有4个flexbox列，并且一切正常，但是当我向列中添加一些文本并将其设置为大字体时，由于flex属性，它使列变宽了。我尝试使用word-break: break-word它并对其有所帮助，但是当我将列的大小调整为非常小的宽度时，文本中的字母会分成多行（每行一个字母），但是该列的宽度不会小于一个字母的大小。观看此视频（开始时，第一列是最小的，但是当我调整窗口大小时，它是最宽的列。我只想始终遵循flex设置； flex大小为1：3：4：4）我知道，将字体大小和列填充设置为较小会有所帮助...但是还有其他解决方案吗？我不能使用overflow-x: hidden。 JSFiddle .container { display: flex; width: 100% } .col { min-height: 200px; padding: 30px; word-break: break-word } .col1 { flex: 1; background: orange; font-size: 80px } .col2 { flex: 3; background: yellow } .col3 { flex: 4; background: skyblue } .col4 …

312 html css flexbox

6

如何证明单个flexbox项的正当性（覆盖正当性内容）

您可以覆盖align-items有align-self一个弯曲的项目。我正在寻找一种方法来替代justify-content弹性项目。如果您有一个带有的flexbox容器justify-content:flex-end，但是您希望第一个项目为justify-content: flex-start，那该怎么办呢？最好的答案是这个帖子：https : //stackoverflow.com/a/33856609/269396

283 css flexbox

9

Flexbox：每行4个项目

我正在使用一个伸缩框来显示8个项目，这些项目将随我的页面动态调整大小。如何强制将项目分成两行？（每行4个）？这是一个相关的片段：（或者，如果您更喜欢jsfiddle- http://jsfiddle.net/vivmaha/oq6prk1p/2/） .parent-wrapper { height: 100%; width: 100%; border: 1px solid black; } .parent { display: flex; font-size: 0; flex-wrap: wrap; margin: -10px 0 0 -10px; } .child { display: inline-block; background: blue; margin: 10px 0 0 10px; flex-grow: 1; height: 100px; } <body> <div class="parent-wrapper"> <div class="parent"> …

260 html css flexbox

7

无法滚动到容器溢出的弹性项目的顶部

因此，在尝试使用flexbox创建有用的模式时，我发现了似乎是浏览器的问题，并且想知道是否存在已知的修复程序或解决方法-或有关如何解决它的想法。我要解决的问题有两个方面。首先，使模态窗口垂直居中，这可以按预期工作。第二个是使模式窗口滚动-从外部滚动，这样整个模式窗口都会滚动而不是其中的内容滚动（这样您就可以使用下拉菜单和其他可以扩展到模式范围之外的UI元素-例如自定义日期选择器等）但是，将垂直居中与滚动条结合使用时，模态的顶部可能会因为开始溢出而变得不可访问。在上面的示例中，您可以调整大小以强制溢出，这样做可以使您滚动到模式的底部，但不能滚动到顶部（第一段被切除）。这是示例代码的链接（高度简化） https://jsfiddle.net/dh9k18k0/2/ .modal-container { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); overflow-x: auto; } .modal-container .modal-window { display: -ms-flexbox; display: flex; flex-direction: column; align-items: center; justify-content: center; // Optional support to confirm scroll behavior makes sense in IE10 //-ms-flex-direction: …

258 html css flexbox browser-bugs

9

如何在多行flexbox布局中指定换行符？

Наэтотвопросестьответына 堆栈溢出нарусском：Flexbox的项目- переноснановуюстроку 有没有办法在多行flexbox中进行换行？例如，在此CodePen中的每个第三项之后中断。 .container { background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; } .item { width: 100px; height: 100px; background: gold; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px; } .item:nth-child(3n) { background: silver; } <div class="container"> <div class="item">1</div> <div …

236 html css flexbox

6

Chrome / Safari无法填充Flex父级的100％高度

我想要一个具有特定高度的垂直菜单。每个孩子必须填满父母的身高，并且中间对齐文本。孩子的数量是随机的，因此我必须使用动态值。 Div .container包含随机数量的子代（.item），这些子代始终必须填充父代的高度。为此，我使用了flexbox。为了使文本中间对齐，我使用了display: table-cell技巧。但是使用桌子显示器需要使用100％的高度。我的问题是.item-inner { height: 100% }无法在webkit（Chrome）中使用。有解决此问题的方法吗？还是有另一种方法使.item文本全部垂直于中间对齐，从而全部填充父级的高度？此处的示例jsFiddle，应在Firefox和Chrome中查看 .container { height: 20em; display: flex; flex-direction: column; border: 5px solid black } .item { flex: 1; border-bottom: 1px solid white; } .item-inner { height: 100%; width: 100%; display: table; } a { background: orange; …

235 css google-chrome webkit flexbox

3

flex-basis和width有什么区别？

关于此有很多问题和文章，但据我所知，尚无定论。我能找到的最佳总结是 flex-basis允许您在计算其他任何内容之前指定元素的初始/开始大小。它可以是百分比或绝对值。 ...这本身并没有过多说明具有flex-basis设置的元素的行为。以我目前对flexbox的了解，我不明白为什么那也不能描述宽度。我想知道flex-basis与实际宽度有何不同：如果我用flex-basis代替width（反之亦然），那么视觉上会发生什么变化？如果将两者都设置为不同的值会怎样？如果它们具有相同的值会怎样？在某些特殊情况下，使用width或flex-basis与使用其他宽度或flex-basis会有很大区别吗？如何宽度和柔性基础上与其他Flexbox的风格，如配合使用时，不同的柔性包装，柔性成长和弹性收缩？还有其他重大区别吗？编辑/说明：在“究竟什么是flex-basis属性集”中以另一种格式提出了此问题？但是我觉得更直接地比较或总结flex-basis和width（或height）的区别是不错的。

224 css flexbox width

7

滚动内容溢出的Flexbox

这是我用来实现上述布局的代码： .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px; } .main { flex: 1; display: flex; flex-direction: column; } .content { flex: 1; display: flex; } .column { padding: 20px; border-right: 1px solid #999; …

214 css layout multiple-columns flexbox

15

ReactNative：如何将文本居中？

如何在水平和垂直的ReactNative中居中放置文本？我在rnplay.org中有一个示例应用程序，其中justifyContent =“ center”和alignItems =“ center”不起作用：https : //rnplay.org/apps/AoxNKQ 文本应居中。为何在文本（黄色）和父容器之间的顶部留有空白？码： 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.topBox}> <Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text> </View> <View style={styles.otherContainer}> </View> </View> ); …

212 reactjs flexbox react-native

3

CSS将一个项目与flexbox对齐

https://jsfiddle.net/vhem8scs/ 是否可以让两个项目与flexbox左对齐，而一个项目与flexbox右对齐？链接显示得更清楚。最后一个例子是我想要实现的。在flexbox中，我有一块代码。使用float时，我有四个代码块。这就是为什么我更喜欢flexbox的原因之一。的HTML <div class="wrap"> <div>One</div> <div>Two</div> <div>Three</div> </div>  <div class="result"> <div>One</div> <div>Two</div> <div>Three</div> </div> 的CSS .wrap { display: flex; background: #ccc; width: 100%; justify-content: space-between; } .result { background: #ccc; margin-top: 20px; } .result:after { content: ''; display: table; clear: both; } .result div …

212 css alignment flexbox

10

在React Native Flexbox中为100％宽度

我已经阅读了一些flexbox教程，但是仍然无法完成这个简单的任务。如何使红色框的宽度达到100％？码： <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Natives </Text> <Text style={styles.line1}> line1 </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> 样式： container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', borderWidth: 1, flexDirection: 'column', }, welcome: { fontSize: 20, …

203 flexbox react-native

2

使div填充flexbox中的剩余*水平*空间

我在Flexbox中并排有2个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 …

203 html css flexbox

7

为什么<fieldset>不能是flex容器？

我尝试fieldset使用display: flex和设置元素的样式display: inline-flex。然而，它没有工作：flex表现得像block，并inline-flex表现得像个inline-block。这种情况在Firefox和Chrome上均会发生，但奇怪的是，它在IE上有效。是虫子吗？fieldset在HTML5和CSS Flexible Box Layout规范中，我都找不到应该有的特殊行为。 fieldset, div { display: flex; border: 1px solid; } <fieldset> <p>foo</p> <p>bar</p> </fieldset> <div> <p>foo</p> <p>bar</p> </div> 运行代码段Hide results展开摘要

200 html css flexbox

4

使用display：flex用CSS填充剩余的垂直空间

在3行布局中：第一行应根据其内容调整大小最下面一行的像素高度应固定中间行应扩大以填充容器问题在于，随着主要内容的扩展，它压缩了页眉和页脚行： HTML： <section> <header> header: sized to content <br>(but is it really?) </header> <div> main content: fills remaining space<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>  </div> <footer> footer: fixed height in px </footer> </section> CSS： section { …

194 css layout flexbox

Questions tagged «flexbox»