时间戳

首页 > 解决方案 > 如何使 flex 容器的垂直子级具有独立的宽度

css - 如何使 flex 容器的垂直子级具有独立的宽度

问题描述

我相信这对于 flexbox 是不可能的，因为我还没有找到方法来做到这一点，但也许我错过了一些东西。

一个父容器有两个子容器 - 一个在另一个之下。links-container一旦我们上传带有长文本链接的 HTML 文件，第二个孩子 ( ) 的宽度就会增加。当这种情况发生时，第一个孩子 ( form-wrapper) 的宽度也会增加 - 因为第二个孩子实际上使整个父母更宽，并且它的两个孩子都调整了他们的宽度。但是，我需要始终保持第一个孩子 ( form-wrapper) 的宽度与以前一样。

我通过display: inline-block在孩子上使用我想要保持的宽度来获得效果。但是是否可以使用 flexbox 属性来做到这一点？

这是代码。要查看问题 -.form-wrapper {display: inline-block;}从 css 中删除部分。

在 codepen https://codepen.io/bakrall/pen/rNaZKgq我有相同的代码，但已经没有display: inline-block;for comaprison。您将看到上传一些带有链接的 html 文件后，上传按钮的宽度是如何增长的。

(function(){
	function bindUiEvents() {
		$('#file-upload').change( function() { 
			renderLinks(this.files[0]);
		});
	}

	function renderLinks(file) {
		const reader = new FileReader(),
			$linksContainer = $('.links-container');

		reader.onload = function(event) {
			const text = event.target.result,
				pattern = /(<a.+)(<\/a>)/gm,
				links = text.match(pattern);

			$linksContainer.empty();

			links.forEach(link => {
				$linksContainer.append(
					`<li class='link-item'>${link}</li>`
				)
			});
		}

		reader.readAsText(file);
	}

	bindUiEvents();
})();
html {
	font-size: 16px;
}

body {
	display: flex;
	justify-content: center;
	height: calc(100vh - 5rem);
	margin: 5rem 0 0;
	background-color: #007da1;
}

h1 {
	padding: 0 0.4rem;
}

.form-wrapper {
	display: inline-block;
}

.link-harvester-form fieldset {
	margin: 0;
	border: 0;
	padding: 0;
	color: #fff;
}

#file-upload {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
}
 
#file-upload + label {
  background-color: #12312b;
  border-radius: 4rem;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  padding: 1rem 2rem;
  box-shadow: 0 0 3px #12312b;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}
  
#file-upload:focus + label,
#file-upload + label:hover {
    background-color: #06425b;
}
  
#file-upload:focus + label {
  outline: 1px dotted #000;
}

.links-container {
	margin-top: 1.25rem;
	list-style: none;
	padding: 0 0 0 5px;
	font-size: 1.3rem;
}

.links-container a {
	color: #12312b;
	font-weight: bold;
}

.link-item {
	margin: 5px 0;
}
<body>
    <div class="link-harvester-wrapper">
        <div class="form-wrapper">
            <h1>Link Harvester</h1>
            <form class="link-harvester-form">
               <fieldset>
                <input id="file-upload" type="file">
                <label for="file-upload">Upload file</label>
            </fieldset>
            </form>
        </div>
        <ul class="links-container"></ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
    <script src="js/linkHarvester.js"></script>
</body>

标签： cssflexbox

解决方案

您可以使用flex属性来控制它。它需要三个参数，flex-grow，flex-shrink和flex-basis。Flex 基础是元素的起始宽度。弹性增长是如果容器比元素宽度的总和更宽，元素是否增长。弹性收缩是如果容器比元素宽度的总和更窄，元素将收缩多少。

所以他们都有200px的基础。第一个元素的 flex grow 值为 0，这意味着它将保持 200px 的宽度。最后一个元素的 flex grow 为 1，这意味着它将占据父容器的整个宽度。由于它也有 300px 的宽度，它会将容器扩展为 300px，然后确保它占据了该宽度。

*{box-sizing: border-box}

.par{
    display: inline-flex;
    flex-wrap: wrap;
    border: solid 3px dodgerblue;
    height: 80vh;
}

.chi{
    border: solid 3px orangered;
    height: 50%;
}

.chi:first-child{
    background: orangered;
    flex: 0 0 200px;
}

.chi:last-child{
    width: 300px;
    flex: 1 0 200px;
}
<div class="par">
    <div class="chi"></div>
    <div class="chi"></div>
</div>

推荐阅读