css 如何分配具有不同单元高度的元件？

kd3sttzy 于 2022-12-30 发布在其他

关注(0)|答案(2)|浏览(122)

我正在尝试创建一个UI，组件按图片中所示的顺序排列。
我正在React应用程序中构建一个材质UI对话框，设计方案如下。
我试着弯曲盒子。我试着使用www.example.com中的概念https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax#the_flex-grow_property
但是我不能达到这个结果。2部件能不能像图中那样排列，否则我将不得不要求我的客户重新考虑设计决定，我不确定是否可行，但在我想确认设计可能性之前。
如果有可能实现，谁能给予我一个线索？

css

来源：https://stackoverflow.com/questions/74955928/how-to-distribute-component-with-different-cell-heights

2条答案

按热度按时间

bvjxkvbb1#

Flexbox绝对可以做到，下面是一个例子：

.block {
  border: 2px solid black;
  padding: 8px;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
}

.first-column {
  width: 100px;
}

.second-column {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.second-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.second-row>* {
  flex-grow: 1;
}

.third-row {
  text-align: center;
}

<div class="block container">
  <div class="block first-column">
    row 1
  </div>
  <div class="second-column">
    <div class="block">
      row 1
    </div>
    <div class="second-row">
      <div class="block">
        row 2
        <br /> row 2
        <br /> row 2
      </div>
      <div class="block">
        row 2
        <br /> row 2
      </div>
      <div class="block">
        row 2
      </div>
    </div>
    <div class="block third-row">
      row 3
      <br />
      <br />
      <br /> row 3
    </div>
  </div>
</div>

赞(0）回复(0）举报 2022-12-30

kiayqfof2#

这是您展示的模板的解决方案，但使用的是网格模板而不是Flex。
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  font-family: sans-serif;
  font-size: 20px;
}

.container{
  --gap: .20rem;
  display: grid;
  grid-template-columns: minmax(200px, auto) repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: var(--gap);
  padding: var(--gap);
  height: 100vh;
}

.container > *{
  border: solid 1px darkgray;
  display: block;
  background: lightgray;
}

.side{
  grid-row: span 3;
}

.header, .footer{
  grid-column: span 3;
}

.box{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Demo content */

.side::before,
.header::before,
.footer::before
{
  color: #444;
  font-size: 1rem;
  padding: 0 .5em;
  border-bottom: solid 1px #777;
  display: block;
}

.side::before{
  content: 'sidebar';
}

.header::before{
  content: 'header';
}

.footer::before{
  content: 'footer';
}

.container > .box:nth-child(3)::before{
  height: 70%;
  /*content: attr(data-height);*/ /*I wished it worked but it didn't*/ 
}

.container > .box:nth-child(4)::before{
  height: 40%;
}

.container > .box:nth-child(5)::before{
  height: 90%;
}

.box::before{
  color: #ccc;
  background: red;
  border: solid 1px darkred;
  width: 100%;
  display: block;
  content: '';
  text-align: center;
  padding: .2em 1em;
  font-size: .8rem;
  content: 'height: ' attr(data-height);
}

<div class="container">
  <div class="side"></div>
  <div class="header"></div>
  <div class="box" data-height="70%"></div>
  <div class="box" data-height="40%"></div>
  <div class="box" data-height="90%"></div>
  <div class="footer"></div>
</div>

赞(0）回复(0）举报 2022-12-30

我来回答

css 如何分配具有不同单元高度的元件？

2条答案

相关问题

热门标签

最新问答