一个div 使用flex 布局2个div,第一个div占75%，另一个占25%

<div class="container">
  <div class="child child-75">第一个div</div>
  <div class="child child-25">第二个div</div>
</div>

.container {
  display: flex; /* 启用Flexbox */
  width: 100%; /* 假设容器占满整个父元素的宽度 */
}

.child {
  /* 这里可以设置一些共通的样式，如padding, margin等 */
  padding: 10px;
  box-sizing: border-box; /* 确保padding不影响元素的总宽度 */
}

.child-75 {
  flex: 3; /* 相当于flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 但因为我们要基于百分比分配，所以这里用flex的“比例”来分配 */
  /* 或者使用flex: 0 0 75%; 明确设置flex-basis为75% */
}

.child-25 {
  flex: 1; /* 相当于flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 这里使用1来分配剩余的空间 */
  /* 或者使用flex: 0 0 25%; 明确设置flex-basis为25% */
}

/* 如果你希望严格基于百分比分配空间，可以使用下面的样式，但这将忽略flex-grow和flex-shrink的默认值 */
/*
.child-75 {
  flex: 0 0 75%;
}

.child-25 {
  flex: 0 0 25%;
}
*/

在这个示例中，.child-75和.child-25的flex属性被分别设置为3和1，这意味着第一个子元素将占据更多空间（基于flex-grow的比例）。然而，更直接且明确的方式是设置flex: 0 0 75%;和flex: 0 0 25%;，这样可以直接基于百分比来分配空间，而不需要依赖于flex-grow的比例分配。这种方法的好处是空间分配更加直观和明确。