flex布局每行四个等分

可以使用flex布局中的`flex-basis`属性来实现每行四个等分的效果。假设你想让一个容器中的子元素平均分成四份，可以给子元素设置`flex-basis: 25%`（也可以使用`flex: 1 0 25%`），这样每个子元素就会占据容器的四分之一宽度。同时，使用`flex-wrap`属性将子元素强制换行，这样每行就会显示四个等分的子元素。示例代码如下：

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

.container > * {
  flex-basis: 25%;
  box-sizing: border-box; /* 可选，用于控制子元素的盒模型 */
}

相关问题

flex默认四个参数

flex 默认有四个参数，分别是 flex-grow、flex-shrink、flex-basis 和 flex。这些参数用于控制 flexbox 布局中的弹性元素的行为。

1. flex-grow：表示弹性元素的放大比例，默认值为 0。如果所有的弹性元素的 flex-grow 值都为 1，它们将等分剩余空间。如果一个弹性元素的 flex-grow 值为 2，它将获得比其他元素更多的剩余空间。

2. flex-shrink：表示弹性元素的缩小比例，默认值为 1。如果空间不足，弹性元素将按照 flex-shrink 的比例缩小。如果一个元素的 flex-shrink 值为 0，它不会缩小。

3. flex-basis：表示在分配多余空间之前，弹性元素占据的空间，默认值为 auto。可以设置为具体的长度值，比如像素或百分比。

4. flex：是 flex-grow、flex-shrink 和 flex-basis 的简写形式。默认值为 0 1 auto。例如，flex: 1 表示 flex-grow: 1; flex-shrink: 1; flex-basis: 0;。

这些参数可以根据需要进行调整，以实现不同的布局效果。

display: flex;等比例分四分

要将一个容器等比例地分成四份，可以使用 `flex` 布局。

HTML 结构：

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS 样式：

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

.item {
  flex-basis: 25%;
  height: 100px;
  background-color: #ccc;
  box-sizing: border-box;
}

解释：

- `display: flex;` 声明容器使用 flex 布局。
- `flex-wrap: wrap;` 使得当容器宽度不足以放下所有子元素时，自动折行。
- `flex-basis: 25%;` 设置每个子元素的基础宽度为 25%，即等比例分成四份。
- `height: 100px;` 设置子元素的高度。
- `background-color: #ccc;` 设置子元素的背景颜色。
- `box-sizing: border-box;` 使得子元素的宽度和高度包含了 padding 和 border。