如何保持柔韧性框项目的宽度与其内容无关 [英] How to keep flex box items widths independent of its content
问题描述
我有一个弹性框布局，其中包含许多div块，其中包含各种文本.有什么方法可以使这些块的宽度保持相同，而不管它们包含的文本量如何?如果文本不能放入其框内，则可以滚动或剪切就可以了.
I have a flex box layout consisting of a lots of div blocks with various amount of text inside. 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.
我知道我可以将min-width和max-width设置为相同，但是如果页面大小允许，我想(在某种程度上)有更大的盒子，所以这不是一个选择.
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.
您可以调整我的示例的大小，然后看到包含很多文本的框所在的列往往比其余的列宽.调整其大小，例如缩小到两列的布局.您如何保持盒子的宽度相等，又如何使它们成长和收缩?并带有弹性方向列.
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 e.g 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.
任何帮助都很感激……
<!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>
推荐答案
您可以将文本放在textarea标记内.这将使flex项目具有相同的宽度，无论它们是否包含任何文本.这不是理想的解决方案，因为您无法在textarea标签外(例如在div标签内)自由地格式化文本.我希望我能解释一下为什么flex布局的行为如此不同(有或没有textareas)，但我没有.至少在Edge，Chrome和Firefox中，行为是一致的.
You could put the text inside a textarea tag. This will give the flex items the same width regardless if they contain any text or not. It's not an ideal solution as you can't format the text as freely as you can outside a textarea tag, i.e as in a div tag e.g. I wish I had an explanation why the flex layouts behaves so differently (with or without textareas), but I haven't. At least the behaviour is consistent in Edge, Chrome and Firefox.
使用这种flexbox布局的好处是，它可以很好地适应不同的宽高比，例如平板电脑上的纵向/横向，同时可以固定以响应不同数量的文本内容.数据库驱动形式的理想选择，例如，某些字段/文本区域可能为空，而有些则不为空.
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 e.g, while at the same time it's fixed in response the different amount of text content. Ideal for a database driven form e.g, 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>
这篇关于如何保持柔韧性框项目的宽度与其内容无关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
