时间戳

首页 > 解决方案 > 如何确保列不会增加超过宽度百分比

css - 如何确保列不会增加超过宽度百分比

问题描述

我做了一个 2 列布局，但由于item-container元素的原因，右列延伸超过 50%。

https://jsfiddle.net/cd83mgex/

如何使列固定为 50%？

列 CSS：

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background: red;
}

.column-1 {
  flex: 50%;
  height: 100%;
  background: lightblue;
  border-right: 1px solid black;
}

.column-2 {
  flex: 50%;
  height: 100%;
  background: lightgreen;
}

标签： cssflexbox

解决方案

flex您使用的属性是三个属性的简写： flex-grow、flex-shrink和flex-basis。

您正在使用它将基础设置为 50%。为了确保列之间的分割保持相等，无论内容如何，​​您都需要设置flex-shrink为 0。但是，为了使用速记来做到这一点，您还必须传入一个值flex-grow。

例子：

flex: 0 0 50%;

参考：https ://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

推荐阅读