css 我可以在同一个flex容器中 Package 一些元素而不 Package 其他元素吗？

我有一个包含三个元素的Flex容器。我希望前两个元素始终位于第一行，最后一个元素填充整个第二行。我需要动态更改第二个元素后的Flex-Wrap规则。是否可以？
请不要建议我改变结构。我知道前两个元素有一个内部容器是可行的，但是我不能修改结构;我只能添加CSS规则。
示例已更新。尝试缩小第一列，直到排序图标到达第二行。我希望列标题和图标保留在第一行，搜索输入保留在第二行。类似于https://swimlane.github.io/ngx-datatable/

var activeResizeHandler;
var clickEventX;
var originalWidth;
$(".resize-handle").mousedown(function(e) {
  activeResizeHandler = e.target;
  clickEventX = e.originalEvent.x;
  originalWidth = e.target.parentNode.clientWidth;
  $(e.target).addClass("active");
});
$(document).mouseup(function(e) {
  activeResizeHandler = null;
  $(".resize-handle.active").removeClass("active");
});
$(document).mousemove(function(e) {
  if (!activeResizeHandler) return;
  var newWidth = originalWidth + e.originalEvent.x - clickEventX;
  console.log(newWidth);
  e.target.parentNode.style.width = newWidth + 'px';
});

th {
  position: relative;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 1ch;
  height: 100%;
}

th:hover .resize-handle,
.resize-handle.active {
  visibility: visible;
  border-right: 1px solid red;
  cursor: col-resize;
}

.first-child {
  margin-right: 1ch;
}

.second-child {}

.third-child {
  flex-basis: 100%;
  min-width: 0;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th scope="col">
        <div class="d-flex flex-wrap">
          <span class="first-child">Some unnecessarily long text to test</span>
          <i class="second-child bi bi-sort-down-alt"></i>
          <input type="text" class="third-child" />
        </div>
        <span class="resize-handle"></span></th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

你所需要的就是flex-basis属性。
只需要设置alldiv从可用的flex容器中获取任意百分比的空间。
由于您使用了flex-wrap:wrap，它会将溢出的元素分解到下一行。
因此，对于您的情况，chil3将在新行中，但由于您希望它占用100%的空间，只需将flex-basis:100%添加到child3。

#container {
  display: flex;
  border: 2px solid salmon;
  width: 200px;
  flex-wrap: wrap;
  /* Adding this wraps the second element, too */
}

#container>div {
  flex-basis: 50%;
  /*50% because you want the first two to take all space*/
}

#child1,
#child2,
#child3 {
  height: 50px;
}

#child1 {
  background: navy;
}

#child2 {
  background: green;
}

/*Specified container so we dont have to use important*/

#container #child3 {
  background: yellow;
  height: 50px;
  flex-basis: 100%;
  /*100% because you want this element to take all space*/
}

<div id="container">
  <div id="child1"></div>
  <div id="child2"></div>
  <div id="child3"></div>
</div>

第二种方法：
你可以在你想要break出现的元素后面添加额外的div。
同上，在其上使用flex-basis:100%。

一个二个一个一个

css 我可以在同一个flex容器中 Package 一些元素而不 Package 其他元素吗？

1条答案

相关问题

热门标签

最新问答