css display:flex 3列显示

要使用CSS的display: flex属性来创建一个3列显示的布局，你可以设置父容器为flex显示方式，并指定每列的宽度。以下是一个简单的例子：

HTML:




<div class="flex-container">
  <div class="flex-item">列1</div>
  <div class="flex-item">列2</div>
  <div class="flex-item">列3</div>
</div>

CSS:




.flex-container {
  display: flex;
}
 
.flex-item {
  flex: 1; /* 每列平分空间 */
  border: 1px solid #000; /* 边框，为了清晰地显示每列 */
  padding: 10px; /* 内边距 */
}

这段代码会创建一个有3列的布局，每列平均分配父容器的宽度。如果你想要指定列宽，可以使用flex属性加上具体的数值，比如flex: 1;表示每列占据等分的空间，而flex: 2;则表示该列的宽度是其他列的两倍。

css display:flex 3列显示

评论已关闭

推荐阅读