时间戳

首页 > 解决方案 > 在显示中使用起始宽度初始化 div：flex

css - 在显示中使用起始宽度初始化 div：flex

问题描述

我正在努力实现特定的布局。我有一排横跨屏幕的宽度，其中有许多内联 div（选项卡）。

我希望所有选项卡都以相同的大小（比如 200 像素）开始，但是当我们有太多选项卡时，然后调整以适应屏幕。使用display: flex，我们可以实现拟合（参见下面的代码），但我不确定如何将每个选项卡的宽度初始化为相同。

TLDR：如何使所有选项卡以相同的大小开始，然后根据需要按比例缩小以适应屏幕？

function newItem() {
  var newTab = document.createElement('div')
  newTab.classList.add('tab')
  newTab.innerHTML = 'Hello'
  document.querySelector('.container').appendChild(newTab)
}
body, html {
    width: 100%
}
    
.container {
    display: flex;
    width: calc(100% - 10px);
}

.tab {
    display: inline;
    height: 20px;
    padding: 1px;
    max-width: 200px;
    background-color: #bbb;
    border: 1px solid black;
    overflow: hidden;
}
<div class="container">
    <button onclick="newItem()">New</button>
    <div class="tab">One</div>
    <div class="tab">Two</div>
    <div class="tab">Twenty Three</div>
    
</div>

标签： css

解决方案

您可以通过给孩子们一个相同的值来强制孩子们“均匀地填充父母” 。flex

在这种情况下，您可以简单地应用于flex: 1定义.tab。

function newItem() {
  var newTab = document.createElement('div')
  newTab.classList.add('tab')
  newTab.innerHTML = 'Hello'
  document.querySelector('.container').appendChild(newTab)
}
body, html {
    width: 100%
}
    
.container {
    display: flex;
    width: calc(100% - 10px);
}

.tab {
    display: inline;
    height: 20px;
    padding: 1px;
    max-width: 200px;
    background-color: #bbb;
    border: 1px solid black;
    overflow: hidden;
    flex: 1;
}
<div class="container">
    <button onclick="newItem()">New</button>
    <div class="tab">One</div>
    <div class="tab">Two</div>
    <div class="tab">Twenty Three</div>
</div>

推荐阅读