程序设计 flexbox

2

我试图将前两个子元素保留在同一行中，而第三个元素以全宽度保留在自己的下面，所有这些都使用flex。我对在前两个元素上使用flex-grow和flex-shrink属性特别感兴趣（这是我不使用百分比的原因之一），但是第三个元素确实必须为全角且在前两个元素以下。当发生错误且无法更改代码时，以label编程方式将元素添加到text元素之后。如何强制label元素在使用flex定位的其他两个元素下方跨越100％的宽度？ .parent { display: flex; align-items: center; width: 100%; background-color: #ececec; } .parent * { width: 100%; } .parent #text { min-width: 75px; flex-shrink: 2.25; } <div class="parent"> <input type="range" id="range"> <input type="text" id="text"> <label class="error">Error message</label> </div> 运行代码段隐藏结果展开摘要

75 html css flexbox

7

防止弹性物品溢出容器

如何制作我的flex项（article在本示例中），而它flex-grow: 1; 不会溢出它的flex父项/容器（main）？在此示例article中，只是文本，尽管它可能包含其他元素（tables等）。 main, aside, article { margin: 10px; border: solid 1px #000; border-bottom: 0; height: 50px; } main { display: flex; } aside { flex: 0 0 200px; } article { flex: 1 0 auto; } <main> <aside>x x x x x x x x x x x …

75 css flexbox

5

我该如何定位：固定；框大小的元素的行为？

我有一个名为.side-el的div，我希望该位置为：fixed; 行为，但是一旦我将位置固定，宽度就会从右边的位置开始交替变化。正确的宽度将是flexbox设置的宽度。我怎样才能实现这个目标？ .container { -webkit-align-content: flex-start; align-content: flex-start; -webkit-align-items: flex-start; align-items: flex-start; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; justify-content: flex-start; * { box-sizing: border-box; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-shrink: 0; flex-shrink: 0; } } .main-el { box-sizing: border-box; padding:0 2em; width: 70%; …

74 css flexbox

4

防止Flexbox缩小

我正在使用flexbox来布局页面，因为不断增长的行为很有用。但是我想完全防止收缩行为。无论如何要解决这个问题？示例代码： <div class="flex-vertical-container"> <div class="flex-box"> This one should grow but not shrink </div> <div></div> <div></div> </div> 的CSS .flex-vertical-container { display: flex; flex-direction: column; } .flex-box { flex: 1; }

74 css flexbox

5

证明内容属性不起作用

我遇到一个奇怪的问题。因此，我一直在研究使用flexbox的html5原型模板。虽然我一直遇到一个小问题。我正在尝试通过将“ justify-content”属性应用于父div，在模板的侧边栏和内容区域中保留较小的空间。尽管未在侧边栏和内容区域之间添加该空间。我不确定自己做错了什么。因此，如果有什么可以帮助我，那就太好了。提前致谢！这是我的html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="../scripts/javascript/responsive_drop_down.js"></script> <link href="../css/protoflexcss.css" rel="stylesheet" type="text/css" media="screen"/> <title>Welcome to My Domain</title> </head> <body> <header> <h1>This is a placeholder <br /> for header</h1> </header> <nav class="main"> <div class="mobilmenu"></div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Video</a></li> <li><a href="#">Pictures</a></li> <li><a …

73 css flexbox spacing article

1

React Native中的flex vs flexGrow vs flexShrink vs flexBasis？

我终于升级反应原产于0.42，其中包括引入的flexGrow，flexShrink和 flexBasis以及如何改变（或固定）flex被呈现。我不断收到类似的错误：使用显式设置的width / height渲染视图，但flexBasis设置为0。（这可以通过将flex：更改为flexGrow来解决：）有人可以解释flex: 1vs与之间的区别flexGrow: 1。如果我将一个或另一个应用于视图，它似乎在做不同的事情，但是不应该这样做吗？

72 react-native flexbox flex-grow

5

弹性物品是否可以与上方物品紧密对齐？

实际上，这是Pinterest布局。但是，在线找到的解决方案包装在圆柱中，这意味着容器在不经意间会水平增长。那不是Pinterest布局，它不适用于动态加载的内容。我想要做的是有一堆固定宽度和不对称高度的图像，水平放置，但是在满足固定宽度容器的限制时，将它们包裹在新行中： flexbox可以做到这一点吗，还是我不得不求助于Masonry这样的JS解决方案？

71 javascript css flexbox pinterest

7

Flexbox列将自身与底部对齐

我正在尝试使用Flexbox。http://css-tricks.com/almanac/properties/a/align-content/这显示了不错的对齐选项；但是我实际上想要一个自上而下的情况。我希望使用flexbox将div粘贴到父div的底部。使用flex-direction: column和align-content: Space-between我可以做到这一点，但是中间的div将在中心对齐，我也希望中间的div也要贴在顶部。 [最佳] [中间] -- -- -- [底部] align-self: flex-end 将使其向右浮动，而不是向底部浮动。完整的flexbox文档：http ://css-tricks.com/snippets/css/a-guide-to-flexbox/

71 css flexbox

6

IE11上的Flexbox：无缘无故拉伸图像？

我在IE11上的flexbox遇到问题，虽然我知道有很多已知问题，但我找不到解决方法... <div class="latest-posts"> <article class="post-grid"> <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" /> <div class="article-content"> <h2>THIS IS POST TITLE</h2> <p>BLAH</p> </div> </article> </div> 还有CSS ... img { max-width: 100%; } .latest-posts { margin: 30px auto; } article.post-grid { width: 375px; float: left; margin: 0 25px 100px 0; padding-bottom: 20px; background-color: #fff; border: 1px solid …

70 html css flexbox internet-explorer-11

12

Flexbox在Safari中包装第一行的最后一列

在Safari和其他一些基于iOS的浏览器中查看时，第一行的最后一列将换行到下一行。苹果浏览器： Chrome /其他：码： .flexthis { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flexthis .col-md-4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } <div class="row flexthis"> <div class="col-md-4 col-sm-6 text-center"> <div class="product"> <img src="img.jpg" alt="" class="img-responsive"> <h3>Name</h3> <p>Description</p> </div> …

69 twitter-bootstrap css twitter-bootstrap-3 flexbox

2

flex-wrap如何与align-self，align-items和align-content一起使用？

align-self 在以下代码中，align-self使用flex-wrap: nowrap。 flex-container { display: flex; flex-wrap: nowrap; align-content: flex-start; width: 250px; height: 250px; background-color: silver; } flex-item { flex: 0 0 50px; height: 50px; margin: 5px; background-color: lightgreen; } flex-item:last-child { align-self: flex-end; background-color: crimson; } <flex-container> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-container> 运行代码段Hide results展开摘要但是当容器切换到时flex-wrap: wrap，该align-self属性将失败。 …

68 css flexbox

2

在高度未知的情况下使用flexbox垂直居中时出现的问题

我的布局有一个容器flex-container和一个孩子。 HTML： <div class="flex-container"> <div>text</div> </div> 容器和孩子的身高未知。目标是：如果孩子的身高低于容器，则其水平和垂直居中。如果孩子的身高比容器大，则它会调整到顶部和底部，我们可以滚动。方案：使用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 …

68 css flexbox height overflow

4

使用CSS不平等地居中DIV

我正在使用flexbox将DIV居中放置在另一个DIV中。想一想需要时会在屏幕中央弹出的对话窗口。它可以正常工作，但是如果对话框上方和下方的空间不完全相等，则剩余空间的40％会位于对话框上方和60％的下方，这样看起来会好得多。之所以变得棘手，是因为对话框的高度随内部文本的数量而变化。因此，例如，如果浏览器高度为1000像素，对话框窗口高度为400像素，我希望剩余的垂直空间（600像素）为对话框上方240像素和对话框下方360像素。我可以用Javascript来做，但是我很好奇CSS是否有一些巧妙的方法。我尝试在#dialogBox DIV中添加底部边距，但是当对话框高度接近浏览器高度时，此方法不起作用。 #dialogBoxPanel { position:absolute; display:flex; align-items:center; justify-content:center; left:0px; top:0px; width:100%; height:100%; } #dialogBox { width:350px; } <div id="dialogBoxPanel"> <div id="dialogBox">Text</div> </div> 运行代码段隐藏结果展开摘要

23 html css flexbox centering

10

使用环绕创建相等大小的div

我正在尝试创建一个菜单系统，上面和下面的图像和文本。数据是动态的。我希望菜单系统出现，以使每个图像彼此之间的距离相等，以便它们在水平和垂直图像网格中对齐。问题是文本。如果文本比图像长，则div会放大。但是，由于图像不再彼此等距分布，因此会产生尴尬的外观间隙。要解决此问题，我认为最好的方法是让其他每个div都采用较大div的大小。但是，我不确定该怎么做。我已经尝试过使用flexbox使用该flex-wrap属性。虽然包装得很好，但我还没有找到一种方法来使每个图像彼此等距对齐。我该如何实现这一目标？我的代码如下： #outer { display: flex; } #main { display: flex; justify-content: space-between; flex-wrap: wrap; border: solid black 25px; border-radius: 25px; width: 450px; height: 500px; padding: 20px; } .section { background-color: #ddd; padding: 15px; } .label, .icon { text-align: center; } <div id="outer"> <div id="main"> <div …

17 html css flexbox

3

弹性过渡：拉伸（或收缩）以适合内容

我已经编写了一个脚本（在这里用户的帮助下），该脚本允许我扩展选定的div并通过相等地拉伸以适合剩余的空间（使第一个div的宽度固定）来使其他div相应地表现。这是我要实现的目标的图片：为此，我使用flex和transitions。它运作良好，但是jQuery脚本指定了“ 400％”的拉伸值（非常适合测试）。现在，我希望所选的div扩展/缩小以完全适合内容，而不是“ 400％”固定值。我不知道该怎么做。可能吗？我尝试克隆div，使其适合内容，获取其值，然后使用该值转换BUT，这意味着我的初始宽度为百分比，但目标值为像素。那不行而且，如果我将像素值转换为百分比，则无论出于何种原因，结果都不完全适合内容。在所有情况下，这似乎都是实现我想要的目标的一种复杂方法。是否没有可以转换的flex属性以适合选定div的内容？这是代码（为了便于阅读，对其进行了编辑/简化）： var expanded = ''; $(document).on("click", ".div:not(:first-child)", function(e) { var thisInd =$(this).index(); if(expanded != thisInd) { //fit clicked fluid div to its content and reset the other fluid divs $(this).css("width", "400%"); $('.div').not(':first').not(this).css("width", "100%"); expanded = thisInd; …

9 javascript jquery css flexbox css-transitions

Questions tagged «flexbox»