html - 如何根据父高度/宽度的变化调整内部元素？

Question

我在 div 中有 ul ， li 水平对齐。我使用了 flex dispaly。这里的 div 是父容器，所有样式如背景、高度、宽度都将应用在这里。li 元素有一些内部内容，如 div、span，可以有文本/图标。每当我调整父 div 宽度/高度时，内部内容都应该调整。图标/文本(span 是 li 的子元素)需要居中。填充将需要调整。我在下面的 plunker 中编辑了我的需求

plunker link

能否请您检查一下并让我知道任何选项。感谢您的任何建议。

这是我的CSS代码

 .table_ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height:100%;
  flex-wrap: wrap;
  list-style: none;
  padding:0px;
}
.cells_li {
  flex: 1 1 auto;
  border: 1px solid red;
  border-right:none;
  padding: .5em;
  text-align: center;
}

.cells_li:last-child {
  border-right: 1px solid red;
}
.main_div {
  background:gray;
  width:400px;
  height:20px;
}

下面是我的html页面

<div id="group" class="main_div">
        <ul class="table_ul">
            <li class="cells_li"><div><span>desktop</span></div></li>
            <li class="cells_li"><div><span>laptop</span></div></li>
            <li class="cells_li"><div><span>work</span></div></li>
        </ul>
    </div>

Answer 1

您可以将 float:left 分配给 LI 和 height:100% 以使其获得父级高度。

/* Styles go here */
.table_ul {
  width: 100%;
  height:100%;
  list-style: none;
  padding:0px;

}
.cells_li {
  border: 1px solid red;
  border-right:none;
  padding: 0.5em;
  text-align: center;
  width:calc(33% - 1em);
  float:left;display: inline;
  height:calc(100% - 1em);
}

.cells_li:last-child {
  border-right: 1px solid red;
}
.main_div {
  background:gray;
  width:400px;
  height:150px;
}