Question

是否可以使用flex以其父div的样式设置子元素的宽度？

例如，我希望flex容器中的每个元素拉伸容器的1/3或1/2或100％的宽度。它们都将具有相等的宽度。宽度是可以改变的动态值。

这个问题是，我只能将动态样式值添加到.flex-container div中。我无法为.element div添加任何动态内容。

所以我不能这样做...

<div class="flex-container">
  <div class="element" style="width: 33%"></div>
  <div class="element" style="width: 33%"></div>
  etc...
</div>

仅..

<div class="flex-container" style="some value that will set children divs to 1/3 width of container, or 1/2, etc)">
  <div class="element"></div>
  <div class="element"></div>
  etc...
</div>

我的Flex容器CSS：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.element {
  // I can't add dynamic styles to this like width
}

Answer 1

是的，您可以动态设置宽度。然后使用媒体查询根据您的窗口大小更改它们。

var el = document.createElement('input');
var isPatternSupported = (el.pattern === undefined);

alert(isPatternSupported); // Displays `false` for NN9 and `true` for modern browsers

html, body {
  height: 100%;
}
.flex-container {
  display: flex;
  height: 50%;
}
.element {
  width: 33.33%;
  align-self: stretch;
}
.element:nth-of-type(1) {
  align-self: flex-start;
  background: red;
}
.element:nth-of-type(2) {
  align-self: flex-end;
  background: green;
}
.element:nth-of-type(3) {
  align-self: stretch;
  background: blue;
}

在flex容器/父div

1 个答案: