Tag: flexbox
CSS flexbox在IE10中不起作用
在IE10中，此代码无法正常工作： .flexbox form { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; } .flexbox form input[type=submit] { width: 31px; } .flexbox form input[type=text] { width: auto; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex: auto 1; -moz-flex: auto 1; -ms-flex: […]
Firefox的溢出 – 不适用于嵌套的Flexbox
我用css3 flexboxdevise了100％宽度的100％高度布局，它可以在IE11上工作（如果仿真IE11是正确的话，可能在IE10上）。 但是Firefox（35.0.1），overflow-y不起作用。 正如你可以看到这个codepen： http ://codepen.io/anon/pen/NPYVga firefox是不正确渲染溢出。 它显示一个滚动条 html, body { height: 100%; margin: 0; padding: 0; border: 0; } .level-0-container { height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .level-0-row1 { border: 1px solid black; box-sizing: border-box; } .level-0-row2 { -webkit-box-flex: […]
纯粹的CSS解决scheme，用于将项目拆分为dynamic数量的列
有没有一种方法来alignment列中的项目，列的数量取决于最宽的项目？ 项目高度和容器宽度都是固定的，但项目宽度是dynamic的。 我正在寻找一个CSS的唯一方法来实现以下行为： （假设父容器的宽度是300px。） 如果最宽的项目宽于150像素，请使用单个列 如果最宽的项目在100px和150px之间，则使用两列 如果最宽的项目小于100像素，则使用三列 … 如果最宽的项目小于容器宽度/ N，则使用N个列 产生这种行为的一种可能的方法是使用display:inline-block并将width属性设置为使用JavaScript的容器中最宽元素的宽度。 看到这个JSFiddle的例子： 不过，我认为还应该有一个CSS的唯一方式来做到这一点。 可能吗？ 如果没有，也许有一个优雅的CSS的方式分发/捕捉dynamic大小的项目到一个固定宽度的容器中的列？
Flexbox和Internet Explorer 11（显示：flex在<html>？中）
我打算从“浮动”的布局，并使用CSS Flexbox的未来项目。 我很高兴看到目前版本中的所有主stream浏览器似乎都支持（以某种方式）flexbox。 我前往“由Flexbox解决” http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/看看一些例子。 然而，“粘滞页脚”的例子似乎并没有在IE11中工作。 我玩了一下，并得到它的工作，通过添加display:flex到<html>和width:100%到<body> 所以我的第一个问题是：有人可以向我解释这个逻辑吗？ 我只是摆弄，它的工作，但我不太明白为什么这样工作… 然后是“媒体对象”的例子，适用于所有的浏览器，除了 – 你猜对了 – IE。 我也摆弄着这个，但是没有成功。 因此，我的第二个问题是：是否有一个“干净”的可能性来获得“媒体对象”的例子在IE中工作？
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> ); } }); var styles = […]
Flexbox项目之间的间距
这就是我要的： 我得到的最近 在Flexbox项目上应用边距，然后从第一个和最后一个子项中删除一半。 问题是:first-child并不总是第一个可见的，因为我可能会改变布局的顺序（ 例子 ）。 在应用边距时，有没有办法将视觉顺序考虑在内？
Flexbox在IE中不垂直居中
我有一个简单的网页，里面有一些以页面为中心的Lipsum内容。 该页面在Chrome和Firefox中正常工作。 如果我减小窗口的大小，内容将填充窗口，直到它不能，然后添加一个滚动条并填充内容离屏幕，底部。 但是，页面不在IE11中。 我可以通过弯曲身体来使页面居中在IE中，但是如果我这样做，则内容开始向屏幕顶部移动，并切断内容的顶部。 以下是两种情况。 见相关的小提琴。 如果问题不是很明显，减小结果窗口的大小，以便强制生成一个滚动条。 注意：此应用程序只针对最新版本的Firefox，Chrome和IE（IE11），它们都支持Flexbox的候选推荐标准 ，所以function兼容性不应该成为问题（理论上）。 编辑 ：当使用Fullscreen API全屏显示外部div时，所有浏览器都使用原始CSS正确居中。 但是，在离开全屏模式后，IE将恢复为水平居中和垂直顶部alignment。 编辑 ：IE11使用非供应商特定实施的Flexbox。 灵活的盒子（“Flexbox”）布局更新 在Chrome / FF中正确resize，不在IE11中正确resize 小提琴： http : //jsfiddle.net/Dragonseer/3D6vw/ html, body { height: 100%; width: 100%; } body { margin: 0; } .outer { min-width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; } .inner { width: 80%; } […]
CSS Flexbox问题：为什么我的flexchildren的宽度受其内容影响？
我box-flex: 1的两个孩子每个都被赋予一个box-flex: 1的风格box-flex: 1 。 我的理解是，它们的宽度应该相互相等 （均占据其父级柔性盒总宽度的50％ ）。 但是，当内容添加到孩子们，他们的宽度改变（取决于内容和填充）！ 为什么会这样呢？ CSS： .hasFlex { display: box; display: -webkit-box; display: -moz-box; -webkit-box-align: start; -moz-box-align: start; box-align: start;} .box0 { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0;} .box1 { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;} .box2 { -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2;} .box3 { -webkit-box-flex: 3; -moz-box-flex: 3; […]
CSS3 Flexbox：显示：框与flexbox与flex
我昨天成为学校使用css3 flexbox声明的网站。 我从来没有使用过。 所以我谷歌了一下。 并发现了很多不同风格的flexbox语句。 有些人写的display: box; ，一些使用display: flexbox; 和其他display: flex; 。 那么有什么不同呢？ 我应该用哪个？
如何保持弹性项目由于其文本溢出？
我有一个列表下面的布局。 每个列表项目由两列表示。 第二列应该占用所有可用空间，但是如果第一列占用太多空间，它应该以最小尺寸固定在右边。 第一列应该显示一个省略号。 最后一种情况发生了问题。 当第一列由太多的文本组成，而不是显示一个省略号，它伸出自己的flexbox导致一个水平滚动条出现，而第二列没有固定在右边。 我想要它像这样（模拟）呈现： 我怎样才能做到这一点？ 这是样品小提琴 。 .container { display: -webkit-flex; } div { white-space: nowrap; text-overflow: ellipsis; } .container > div:last-child { -webkit-flex: 1; background: red; } <!– a small first column; the second column is taking up space as expected –> <div class="container"> <div>foo barfoo bar</div> <div>foo bar</div> </div> <!– […]
