CSS Flexbox 布局中实现等宽元素的几种方法

CSS Flexbox 布局是一种强大的布局方式，可以轻松地实现响应式布局和复杂的页面布局。其中一个常见的需求是实现等宽的元素布局，本文将介绍在 CSS Flexbox 布局中实现等宽元素的几种方法。

方法一：使用 flex-basis 属性

在 CSS Flexbox 布局中，可以使用 flex-basis 属性来设置元素的初始大小。当设置了相同的 flex-basis 值时，元素的宽度将相等。

.container {
  display: flex;
}

.item {
  flex-basis: 100px;
}

上面的代码将容器设置为 Flexbox 布局，并将子元素的 flex-basis 属性设置为 100px。这将使每个子元素的初始宽度为 100px，从而实现等宽布局。

方法二：使用 flex 属性

在 CSS Flexbox 布局中，还可以使用 flex 属性来设置元素的大小和比例。当设置了相同的 flex 值时，元素的宽度将相等。

.container {
  display: flex;
}

.item {
  flex: 1;
}

上面的代码将容器设置为 Flexbox 布局，并将子元素的 flex 属性设置为 1。这将使每个子元素的大小相等，并且占据剩余的空间。

方法三：使用 calc() 函数

在 CSS Flexbox 布局中，可以使用 calc() 函数来计算元素的宽度。当设置了相同的 calc() 值时，元素的宽度将相等。

.container {
  display: flex;
}

.item {
  width: calc(100% / 3);
}

上面的代码将容器设置为 Flexbox 布局，并将子元素的宽度设置为 calc(100% / 3)。这将使每个子元素的宽度相等，并且占据容器的三分之一空间。

方法四：使用 JavaScript

在某些情况下，CSS Flexbox 布局无法满足需求，可以使用 JavaScript 来计算和设置元素的宽度。

<div class="container" id="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

var container = document.getElementById('container');
var items = container.getElementsByClassName('item');
var width = container.offsetWidth / items.length;

for (var i = 0; i < items.length; i++) {
  items[i].style.width = width + 'px';
}

上面的代码使用 JavaScript 计算容器的宽度和子元素的宽度，并将它们设置为相等的值。这将使每个子元素的宽度相等，并且占据容器的相同空间。

总结

以上是在 CSS Flexbox 布局中实现等宽元素的几种方法。通过使用这些方法，可以轻松地实现等宽元素布局，并且可以根据具体的需求选择最适合的方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e734495b1f8cacd7990ab