How To Keep Flex Box Items Widths Independent Of Its Content
Solution 1:
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.
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><metacharset="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>functioninit()
{
window.addEventListener("resize", function (evt) { onresize(evt); }, false);
onresize(null);
}
functiononresize(evt)
{
var height = Number(document.body.parentNode.clientHeight);
document.getElementById("size").innerText = height;
document.getElementById("wrapper").style.height = (height - 20) + "px";
}
</script></head><bodyonload="init()"><divclass="wrapper"id="wrapper"><divclass="el"><textareaid="size">One</textarea></div><divclass="el"><textarea>Two</textarea></div><divclass="el"><textarea>Three</textarea></div><divclass="el"><textarea>Four</textarea></div><divclass="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><divclass="el"><textarea>Six</textarea></div><divclass="el"><textarea>Seven</textarea></div><divclass="el"><textarea>Eight</textarea></div></div></body></html>
Post a Comment for "How To Keep Flex Box Items Widths Independent Of Its Content"