如何保持柔韧性框项目的宽度与其内容无关
[英]How to keep flex box items widths independent of its content
问题描述
I have a flex box layout consisting of a lots of div blocks with various amount of text inside. 
我有一个弹性框布局，其中包含很多div块，其中包含各种文本。 Is there a way to keep the widths of these blocks the same regardless of the amount of text they contain? 有什么方法可以使这些块的宽度保持相同，而不管它们包含的文本量如何？ If the text doesn't fit inside its box, it's perfectly fine if it gets scrollable or just clipped. 如果文本不能放入其框内，则可以滚动或剪切就可以了。
I know I can set min-width and max-width the same but I want to have bigger boxes (to some extent) if the page size permits, so this is not an option. 我知道我可以将min-width和max-width设置为相同，但是如果页面大小允许，我希望在某种程度上具有更大的盒子，所以这不是一个选择。
You can resize my example and see that the column containing the box with lots of text tends to get wider than the rest. 您可以调整我的示例的大小，然后看到包含很多文本的框所在的列往往会比其余文本宽。 Resize it eg to a narrow two-column layout. 调整其大小，例如缩小到两列的布局。 How do you keep the boxes at equal widths and still allow them to grow and shrink? 您如何保持盒子的宽度相等，又如何使它们成长和收缩？ And with flex-direction column. 并带有伸缩方向列。
This is just a simplified demonstration of a part of a data driven application, I'm aiming for a solution that is as general as possible. 这只是数据驱动应用程序一部分的简化演示，我的目标是提供一个尽可能通用的解决方案。
Any help much appreciated… 任何帮助，不胜感激...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flextest</title>
<style>
body
{
}
.wrapper
{
background-color: #eee;
display: flex;
flex-wrap: wrap;
flex-direction: column;
border: 2px solid green;
}
.el
{
border: 2px solid black;
color: darkgray;
padding: 10px;
flex-grow: 1;
flex-shrink: 1;
margin: 1vh;
min-width: 100px;
max-width: 300px;
min-height: 200px;
max-height: 200px;
}
</style>
<script>
function init()
{
window.addEventListener("resize", function (evt) { onresize(evt); }, false);
onresize(null);
}
function onresize(evt)
{
var height = Number(document.body.parentNode.clientHeight);
document.getElementById("size").innerText = height;
document.getElementById("wrapper").style.height = (height - 20) + "px";
}
</script>
</head>
<body onload="init()">
<div class="wrapper" id="wrapper">
<div class="el" id="size">One</div>
<div class="el">Two</div>
<div class="el">Three</div>
<div class="el">Four</div>
<div class="el">Lots of text text text text text text text text text text<br />text text<br />text text text text text text text text text text text </div>
<div class="el">Six</div>
<div class="el">Seven</div>
<div class="el">Eight</div>
</div>
</body>
</html>
1 个解决方案
解决方案1
0 2018-08-28 01:12:08
You could put the text inside a textarea tag. 您可以将文本放在textarea标签内。 This will give the flex items the same width regardless if they contain any text or not. 这将使flex项目具有相同的宽度，无论它们是否包含任何文本。 It's not an ideal solution as you can't format the text as freely as you can outside a textarea tag, ie as in a div tag eg I wish I had an explanation why the flex layouts behaves so differently (with or without textareas), but I haven't. 这不是理想的解决方案，因为您无法在textarea标签外（例如在div标签内）自由地自由格式化文本，例如，我希望我能解释一下为什么flex布局的行为如此不同（有或没有textareas），但是我没有 At least the behaviour is consistent in Edge, Chrome and Firefox. 至少在Edge，Chrome和Firefox中，行为是一致的。
The benefits of using a flexbox layout like this is that it adapts very well to different aspect ratios like portrait/landscape on a tablet eg, while at the same time it's fixed in response the different amount of text content. 使用这种flexbox布局的好处是，它可以很好地适应不同的宽高比，例如平板电脑上的纵向/横向，同时，它可以固定以响应不同数量的文本内容。 Ideal for a database driven form eg, where some fields/textareas might be empty, and some not. 数据库驱动形式的理想选择，例如，其中某些字段/文本区域可能为空，而某些则不是。
This is example is of course just a sketch or proof of concept, in a typical database driven form you probably have a some text input fields/tags as well as image elements of different heights. 这个例子当然只是草图或概念证明，在典型的数据库驱动形式下，您可能会有一些文本输入字段/标签以及不同高度的图像元素。
Here's the code for anyone wanting to compare it with the original code. 这是想要将其与原始代码进行比较的任何人的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flextest</title>
<style>
body
{
}
.wrapper
{
background-color: #eee;
display: flex;
flex-wrap: wrap;
flex-direction: column;
border: 2px solid green;
}
.el
{
border: 2px solid black;
color: darkgray;
padding: 10px;
flex-grow: 1;
flex-shrink: 1;
margin: 1vh;
min-width: 100px;
max-width: 300px;
min-height: 200px;
max-height: 200px;
}
textarea
{
width: calc(100% - 6px);
/*height: calc(100% - 6px);*/
height: 194px; /*Calculated height doesn't work in chrome */
}
</style>
<script>
function init()
{
window.addEventListener("resize", function (evt) { onresize(evt); }, false);
onresize(null);
}
function onresize(evt)
{
var height = Number(document.body.parentNode.clientHeight);
document.getElementById("size").innerText = height;
document.getElementById("wrapper").style.height = (height - 20) + "px";
}
</script>
</head>
<body onload="init()">
<div class="wrapper" id="wrapper">
<div class="el"><textarea id="size">One</textarea></div>
<div class="el"><textarea>Two</textarea></div>
<div class="el"><textarea>Three</textarea></div>
<div class="el"><textarea>Four</textarea></div>
<div class="el"><textarea>Lots of text text text text text text text text text text<br />text text<br />text text text text text text text text text text text</textarea></div>
<div class="el"><textarea>Six</textarea></div>
<div class="el"><textarea>Seven</textarea></div>
<div class="el"><textarea>Eight</textarea></div>
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.