我正在try 创建一个看起来像this的布局

我可以让屏幕从中间分成两半,右手边的东西垂直居中.

然而,当我试图在右侧嵌套一个Flexbox时,我无法让它分布在右侧的宽度上.

html {
  height: 100%;
}

body {
  height: 100%;
}

.row {
  display: flex;
  height: 100%;
}

.column {
  flex-basis: 50%;
  box-sizing: border-box;
  
  border: 1px black solid;
}

.row2 {
  display: flex;
  justify-content: space-between;
  border: 1px black solid;
}

.column2 {
  box-sizing: border-box;
  border: 1px black solid;
}

.content {
  display: flex;
  align-items: center;
}
<div class="row">
  <div class="column">
      test title
  </div>

  <div class="column content">
    <div class="row2">
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
    </div>
  </div>
</div>

我以为第二行的JUSTY-CONTENTS:SPACE-BETWAGE会在屏幕的右半部分的宽度上均匀地分布4个(或其他数量)的"ABC"S,但它们只是堆叠在左边.似乎第2行没有正确填充父级的宽度.我猜JUSTY-内容起作用了,但没有宽度来传播项目.我怎么才能解决这个问题呢?

推荐答案

你所要做的就是做.row2%的宽度.我也把它改成了space-around,因为这看起来更像是你在截图中想要的.

.row2 {
  display: flex;
  justify-content: space-around;
  border: 1px black solid;
  width: 100%;
}

html {
  height: 100%;
}

body {
  height: 100%;
}

.row {
  display: flex;
  height: 100%;
}

.column {
  flex-basis: 50%;
  box-sizing: border-box;
  
  border: 1px black solid;
}

.row2 {
  display: flex;
  justify-content: space-around;
  border: 1px black solid;
  width: 100%;
}

.column2 {
  box-sizing: border-box;
  border: 1px black solid;
}

.content {
  display: flex;
  align-items: center;
}
<div class="row">
  <div class="column">
      test title
  </div>

  <div class="column content">
    <div class="row2">
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
    </div>
  </div>
</div>

如果你想把"ABC"盒子做成正方形,你可以用aspect-ratio: 1,要让它们在容器里尽可能大,你可以用flex-grow: 1.最后,给它们加一点页边距,给它们留出一些间距.(从技术上讲,使用此方法不再需要space-around,因为长方体无论如何都会增长到填满整个容器,除非为ABC长方体设置固定的高度.)

html {
  height: 100%;
}

body {
  height: 100%;
}

.row {
  display: flex;
  height: 100%;
}

.column {
  flex-basis: 50%;
  box-sizing: border-box;
  
  border: 1px black solid;
}

.row2 {
  display: flex;
  border: 1px black solid;
  width: 100%;
}

.column2 {
  box-sizing: border-box;
  border: 1px black solid;
  flex-grow: 1;
  aspect-ratio: 1;
  margin: 10px;
}

.content {
  display: flex;
  align-items: center;
}
<div class="row">
  <div class="column">
      test title
  </div>

  <div class="column content">
    <div class="row2">
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
      <div class="column2">
        abc
      </div>
    </div>
  </div>
</div>

Html相关问答推荐

当ul为Flex时,使ul元素在指定高度内可垂直滚动

使用css第n个子元素,如何迭代Y组中的X个元素?

现代网络浏览器可以并行下载哪些类型的网络资源?还有,什么东西不能并行下载?

如何用等宽字体固定数字在有序列表中的位置

防止position:relative的child在出界时收缩

与窗高匹配的响应式正方形网格

减小HTML负载中base64字符串的大小

如何使用css创建六边形棋盘?

为什么 `::before` 在使用内容 `url(svg)` 时会增加一些高度

Angular中如何向单选按钮添加验证

白色栏超出页面100%的右侧

使用HTML和CSS构建简历网站.无法使body元素内的div元素跨越整个网站高度

如何正确地嵌套Flexbox

如何将两个平行 div 的页面内的表格居中?

屏幕缩小时背景图像裁剪高度

调整屏幕大小时标题在图像下方重叠 - HTML

如何截断一些文本并用双引号引起来?

为什么在使用src与srcdoc时 iframe 内容高度呈现不同?

是否可以使 huxtable 输出悬停?

有没有办法使用 CSS border-radius 创建 HTML 视频标签的三角形显示?