尝试修改此 flexbox 中列的宽度

Question

我正在尝试呈现左侧为日期、右侧为一些文本的行。我似乎无法弄清楚如何更改列的宽度？目前我的一天和文本列的宽度相同。我希望日期为 50px，文字为 300px。

这个代码可以吗？

.sb-flex-row {
  flex-direction: row;
  display: flex;
}

.sb-flex-column {
  flex-direction: column;
  display: flex;
}

.sb-flex-body {
  display: flex;
}

.sb-flex-body div:not([class*="flex"]) {
  border: 1px solid white;
  flex: 1 1 50px;
  width: 200px;
}

<div class="sb-flex-body">
  <div class="sb-flex-row">
    <div style="background: #0980cc;">day</div>
  </div>
  <div class="sb-flex-column">
    <div style="background: #09cc69;">month</div>
    <div style="background: #cc092f;">year</div>
  </div>
  <div class="sb-flex-row">
    <div style="background: #0980cc;">text</div>
  </div>
</div>

Answer 1

我整理了一下，让您更容易理解。你有一个灵活的外包装。默认方向是行，没关系。然后你有两个块。一个块 dateBlock，第二个是文本块。日期块包含两个块 (a,b)。和 b 您可以将方向分配给该列。之后，您可以将宽度分配给文本块和日期块。就是这样:-)

.wrapper {  
  display: flex;
  gap:10px;
}

.dateBlock {
  display: flex;
  background: yellow;
  gap: 20px;
  padding: 10px;
  box-sizing: border-box;
}

.textBlock {
  background: green;
  padding: 10px;
  box-sizing: border-box;  
  width: 300px;
}

.monthYear {  
  display: flex;
  flex-direction: column;
  width:50px;
}

.day {
  font-size: 30px;
  width: 50px;  
}

<div class="wrapper">
  <div class="dateBlock">
    <div class="day">day</div>
    
    <div class="monthYear">
      <div>month</div>
      <div>year</div>
    </div>
  </div>
    
    <div class="textBlock">text</div>
  
</div>

Answer 2

我稍微重新安排了您的标记，以便轻松定位样式 sheet 中的这些 div。您可以在 /* changes */ 下看到我对您的 CSS 所做的更改。另外注意一下我调整的HTML

.sb-flex-row {
  flex-direction: row;
  display: flex;
}

.sb-flex-column {
  flex-direction: column;
  display: flex;
}

.sb-flex-body {
  display: flex;
}

/* changes */
.sb-flex-body div:not([class*="flex"]) {
  border: 1px solid white;
  width: 50px;
}

.sb-flex-row > div {
  min-width: 300px;
}

<div class="sb-flex-body">
  <div class="sb-flex-column">
    <div style="background: #0980cc;">day</div>
    <div style="background: #09cc69;">month</div>
    <div style="background: #cc092f;">year</div>
  </div>

  <div class="sb-flex-row">
    <div style="background: #0980cc;">text</div>
  </div>
</div>

尝试修改此 flexbox 中列的宽度

Trying to modify the width of the columns in this flexbox

html

css

flexbox