Flex布局页面添加文本表格、解析flex属性及设置换行咨询

一、修正CSS让内容居中 #

你写的CSS存在两处错误：

• top:100 缺少单位，需补充为 top: 100px（或其他合法单位，如rem）
• weight 是拼写错误，正确属性名为 width

结合父元素.slide的flex布局特性，要让.content在页面水平+垂直居中，可给.slide添加以下样式：

.slide {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-direction: column; /* 让子元素垂直排列 */
}

再调整.content的样式：

.content {
  width: 300px; /* 修正拼写错误 */
  text-align: center; /* 内部文本水平居中 */
}

二、flex: 1 0 100% 的含义 #

flex属性是flex-grow、flex-shrink、flex-basis的简写，三个值分别对应：

• 1：flex-grow:1，表示当前flex项在父容器有剩余空间时，会自动放大占满可用空间
• 0：flex-shrink:0，表示父容器空间不足时，当前flex项不会被缩小
• 100%：flex-basis:100%，表示当前flex项的初始宽度为父容器的100%

三、Table的CSS替代方案 #

如果是展示非数据类的布局，可使用CSS Grid或Flexbox替代：

CSS Grid实现表格式布局 #

HTML结构：

<div class="grid-table">
  <div class="grid-cell">qdf</div>
  <div class="grid-cell">qdf</div>
</div>

CSS样式：

.grid-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列等宽 */
  border: 1px solid #000;
}
.grid-cell {
  border: 1px solid #000;
  padding: 8px;
}

Flexbox实现行式布局 #

HTML结构：

<div class="flex-row">
  <div class="flex-cell">qdf</div>
  <div class="flex-cell">qdf</div>
</div>

CSS样式：

.flex-row {
  display: flex;
  border: 1px solid #000;
}
.flex-cell {
  flex: 1; /* 单元格等宽分配空间 */
  border: 1px solid #000;
  padding: 8px;
}

注：如果是纯数据展示场景，<table>是语义化的正确选择，无需刻意替换，仅用CSS美化即可。

四、标题与表格间的间距设置 #

不推荐使用<br>（冗余且不易维护），建议用CSS的margin属性控制：

h1 {
  margin-bottom: 20px; /* 给标题下方添加间距 */
}
/* 或给表格上方添加间距 */
table {
  margin-top: 20px;
}

内容的提问来源于stack exchange，提问作者user609511