时间戳

首页 > 解决方案 > CSS：显示弹性

css - CSS：显示弹性

问题描述

我很陌生，display: flex并试图找出我认为相对简单的东西。简而言之，我想要一个带有一个 DIV 的全宽行，然后是连续的行，每行都有两个并排的 DIV。

这是一些示例代码，它不能正常工作：

.flex-container {
  width: 80%;
  min-height: 300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.flex-container .full-row {
  width: 100%;
  background: cyan;
}

.flex-container .row {
  width: 100%
}

.flex-container .column {
  background: #dbdfe5;
  width: 50%;
}
<div class="flex-container">
  <div class="full-row">Row 1, Full Width</div>
  <div class="row>
              <div class=" column ">Row 2, Column 1</div>
              <div class="column ">Row 2, Column 2</div>
            </div>
          </div>
        </div>

可能有人知道我做错了什么？

标签： cssflexbox

解决方案

只需添加display: flex;到.flex-container .row. https://codepen.io/yael-screenovate/pen/XWXOPLb?editors=1100工作代码笔。默认情况下，元素一个接一个地垂直排列。display: flex让他们一个接一个地水平。

推荐阅读