代码之家 › 专栏 › 技术社区 › JWWalker

CSS的resize属性可以用来调整flex列宽吗?

flexbox css html

JWWalker · 技术社区 · 7 月前

我想要一个有两列的布局来填充页面,并允许一列使一列变宽,另一列相应地变窄。我看了看问题 CSS resize property both doesn't work properly with flex ,这就是为什么我添加了 box-sizing: border-box 比特。

这是我的代码。我在左列的右下角看到一个调整大小的小部件,将鼠标光标放在上面会改变光标,但拖动小部件不会做任何事情。

* {
    box-sizing: border-box;
}

.flexContainer {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100vh;
    border-style: none;
}

div.divBlock {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    border-style: none;
}

#left {
    flex-basis: 30%;
    resize: horizontal;
    overflow: auto;
    border-right-style: solid;
    border-right-width: 10px;
    flex-grow: 0;
    flex-shrink: 0;
}

#right {
    flex-grow: 1;
    flex-shrink: 1;
}

body {
    margin: 0
}

<div class="flexContainer">

<div id="left" class="divBlock">
</div>

<div id="right" class="divBlock">
</div>

</div>

1 回复 | 直到 7 月前

zer00ne 7 月前

更新

我重读了OP,相信 .flexcontainer 必须保持相同的大小。如果是这样,请将以下内容应用于 .left :

padding: 10vw; // Any width you want as a minimum.
overflow: hidden;
resize: horizontal;

您可能还想添加 overflow: hidden 在 <body> 或者父元素,这样滚动条就不会弹出并妨碍。

* {
  box-sizing: border-box;
}

body {
  overflow: hidden
}

.flexContainer {
  display: flex;
  flex-wrap: nowrap;
  height: 100vh;
  border-style: none;
}

div.divBlock {
  display: inline-block;
  vertical-align: top;
  border-style: none;
}

#left {
  border-right-style: solid;
  border-right-width: 10px;
  overflow: hidden;
  resize: horizontal;
  padding: 10vw
}

#right {
}

body {
  margin: 0
}

<div class="flexContainer">

  <div id="left" class="divBlock">
  </div>

  <div id="right" class="divBlock">
  </div>

</div>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

6 月前

Mass · 如何在Tailwind CSS v4中创建配置

6 月前

magenta placenta · 将css变量合并为一个变量

6 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

6 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

7 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

7 月前

Luckkks · 过渡色工作不正常

7 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

7 月前