Tag: flexbox

CSS：在保持比例的同时用图像填充div: 我知道这个问题不是新的，但是我想也许用新的CSS3技术可能会有解决scheme。我发现这个线程 – 如何拉伸图像填充<div>，同时保持图像的纵横比？ – 这不完全是我想要的东西。我有一个特定大小的div，里面有一个图片。无论图像是风景还是肖像，我都希望始终用图像填满div。如果图像被切断（div本身已经隐藏了溢出），这并不重要。所以如果图像是肖像，我想width为100% ， height:auto所以它保持成比例。如果图像是风景，我想height为100% ， width to be自动。听起来很复杂吗？ <div class="container"> <img src="some-image.jpg" alt="Could be portrait or landscape"/> </div> 因为我不知道该怎么做，所以我简单地创build了一个我的意思的快速图像。我甚至不能正确地描述它。所以，我想我不是第一个问这个问题的。但是我真的找不到解决办法。也许有一些新的CSS3方法 – 我正在考虑弹性框。任何想法？也许这比我预期的更容易？先谢谢你。

如何强制一个弹性框每行显示4个项目？: 我正在使用弹性框来显示8个项目，这些项目将dynamic调整我的页面大小。我如何强制它分成两行的项目？（每行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"> <div […]

如何alignment多行柔性盒中最后一行/最后一行: 我有一个flexbox布局的主要问题。我用一个装满图像的盒子构build一个容器，我决定使用flexbox布局来certificate内容的正确性，使它看起来像一个网格她的代码是： <div class="container"> <div class="item"></div> <div class="item"></div> … <div class="item"></div> </div> 和CSS： .container { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-around; -webkit-justify-content: space-around; -moz-justify-content: space-around; flex-flow: row wrap; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; } .container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; } 除了最后一行/行，一切看起来都不错 – 当它不包含与其他行相同数量的元素时，居中元素会打破我的网格效果。 […]

当高度未知时，用flexbox垂直居中时发出问题: 我的布局有一个容器flex-container和一个孩子。 HTML： <div class="flex-container"> <div>text</div> </div> 容器和孩子有一个未知的高度。目标是：如果孩子的身高低于容器的高度，则会出现水平和垂直居中。如果孩子的身高高于容器的高度，则调整到顶部和底部，我们可以做滚动。 scheme：以flexbox为中心的最快方法是： .flex-container { display: flex; align-items: center; /* vertical */ justify-content: center; /* horizontal */ width: 100%; height: 300px; /* for example purposes */ overflow-y: scroll; background: #2a4; } .flex-container > div { background: #E77E23; width: 400px; } <div class="flex-container"> <div>Lorem ipsum dolor […]

如何指定一个元素之后包装在CSS flexbox？: 我不认为这是Flexbox标准的一部分，但是在某个元素之后build议或强制包装可能有一个窍门吗？我想对不同的页面大小做出反应，并以不同的方式包装一个列表，而不是在下一行显示（例如）孤立的菜单项，而是在菜单的中间。这里是开始的html： <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> 和CSS： ul { display: flex; flex-wrap: wrap; } 我喜欢以下内容： /* inside media query targeting width */ li:nth-child(2n) { flex-break: after; } 看到jsfiddle更完整的设置： http : //jsfiddle.net/theazureshadow/ww8DR/

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, textAlign: 'center', margin: 10, borderWidth: […]

align-content和align-items有什么区别？: 任何人都可以显示align-items和align-content之间的区别吗？我很困惑。谢谢一堆！

滚动具有满溢内容的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; } <div class="header">Main header</div> […]

如何certificate单个Flexbox项目（覆盖justify-content）: 您可以使用align-self来替代Flex项目的align-self项目。我正在寻找一种方法来为flex项目覆盖justify-content 。如果您有一个带有justify-content:flex-end的flexbox容器，但是您希望第一个项目是justify-content: flex-start ，那怎么办？这是最好的回答这个职位： https : //stackoverflow.com/a/33856609/269396

如何在Flexbox中垂直alignment文本？: 我想使用弹性框来垂直alignment<li>某些内容，但是没有成功。我在网上查了一下，许多教程实际上使用了一个包装div，它从父级的flex设置中获取align-items:center ，但是我想知道是否可以删除这个额外的元素？我select在这个实例中使用弹性框，因为列表项高度将是一个dynamic％。 * { padding: 0; margin: 0; } html, body { height: 100%; } ul { height: 100%; } li { display: flex; justify-content: center; align-self: center; background: silver; width: 100%; height: 20%; } <ul> <li>This is the text</li> </ul>