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

使用CSS和Flex定位DIV

flexbox css3 css html

Loic · 技术社区 · 7 年前

所以我试图简单地安排一些划分,使一些内容具有固定的宽度和其他可反射的。

例如,上图显示了最小宽度的配置。下图显示了放大窗口时应该发生的情况。实际上,大多数项目都是向右或向左的,但只有一个输入要放大。

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 15px;
  font-size: 12px;
}

<div class="flex-container">
   <div style="flex-grow: 1">
      <div class="flex-container">
         <div style="flex-grow: 0; flex-shrink: 0;">Some label</div>
         <div style="flex-grow: 0; flex-shrink: 0">An Input</div>
         <div style="flex-grow: 0; flex-shrink: 0; flex-basis: 120;">Some label</div>
         <div style="flex-grow: 0; flex-shrink: 0">An Input</div>
         <div style="flex-grow: 0; flex-shrink: 0; flex-basis: 120;">Some label</div>
         <div style="flex-grow: 0; flex-shrink: 0">An Input</div>
      </div>
      <div class="flex-container">
         <div style="flex-grow: 0; flex-shrink: 0">Some label</div>
         <div style="flex-grow: 1;">An Input</div>
         <div style="flex-grow: 0; flex-shrink: 0">Btn</div>
      </div>
   </div>
   <div style="flex-grow: 0; flex-shrink: 0">Big Btn</div>
</div>

1 回复 | 直到 7 年前

Loic 7 年前

您的第二张图片显示了对flex如何工作的误解。flex伸展以填充容器。因此,第二个图像是不可能的。

第二个图像中的第一行看起来像一个浮动布局。要在flex中实现相同的效果,您需要添加一个额外的空元素,该元素将填充空白,但没有可见的内容。

<div class="flex-container">
   <div style="flex-grow: 1">
      <div class="flex-container">
         <div style="flex-grow: 0; flex-shrink: 0;">Some label</div>
         <div style="flex-grow: 0; flex-shrink: 0">An Input</div>
         <!-- Adding a "spacer" solves the issue -->
         <div style="flex-grow: 1;"></div>
         <div style="flex-grow: 0; flex-shrink: 0; flex-basis: 120;">Some label</div>
         <div style="flex-grow: 0; flex-shrink: 0">An Input</div>
         <div style="flex-grow: 0; flex-shrink: 0; flex-basis: 120;">Some label</div>
         <div style="flex-grow: 0; flex-shrink: 0">An Input</div>
      </div>
      <div class="flex-container">
         <div style="flex-grow: 0; flex-shrink: 0">Some label</div>
         <div style="flex-grow: 1;">An Input</div>
         <div style="flex-grow: 0; flex-shrink: 0">Btn</div>
      </div>
   </div>
   <div style="flex-grow: 0; flex-shrink: 0">Big Btn</div>
</div>

推荐文章

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

1 年前

Sidaqpreet Singh · 为什么当设置为包裹时,柔性包裹会导致横轴出现间隙?

1 年前

rifx · 在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式

1 年前

Fox L · 每行4个项目,但如果少于4个项目则留空?

1 年前

Zack Riquelme · 如何使用CSS将HTML的<header>中的<a>和<nav>内容在同一个父框中左右拆分?

1 年前

JobHunter69 · 为什么这个组件不填充整个宽度?

1 年前

Vasantha Kalyani · Flexbox Html CSS设置位置问题[重复]

1 年前

coder · 边界半径不适用于容器元素

1 年前

user9026 · 项目登录页面(freecodecamp)定价设计

1 年前

Bo Thompson · 根据需要调整柔性物品的高度,但不得超过容器

1 年前