Question

我试图创建两个居中的div，它们被这样的边框分开。

我不知道如何使用flex执行此操作我希望有一个大容器，其中div的大小与div分开

＆＃13;

.homescreen-content {
display: flex; 
flex-direction: column; 
height: 100% ; 
width: 100%;
  }
.goto {
    margin-top:20%;
    left:0;
    height: 100% ;
    width: 100% !important;
    background-color: green;
    text-align: center;
}

.no {
    left:0;
    height: 100%;
   width: 100% !important;
    background-color: red;
    text-align: center;
}
.border {
    //margin-top: 15%;
    //margin-bottom: 15%;
    width:100%;
    height:10px;
    background:grey;
}

＆＃13;

<div class="homescreen-content" scroll="false">
  <div (click)="open()" class="goto">
      <h2>TITLE 1 CENTRED</h2>
      <p>SOME CENTRED TEXT</p>
  </div>
  <div class="border"></div>
  <div (click)="open()" class="no">
      <h2>TITLE 2 CENTRED</h2>
      <p>SOME CENTRED TEXT</p>
  </div>
</div>

＆＃13;

Answer 1

将flex: 1;添加到divs - 这样他们将拥有相同的尺寸并占用container中的所有可用空间：

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.container {
  display:flex;
  flex-direction: column;
  border: 1px solid block;
  height: 500px;
}
.box {
  flex: 1;
  padding: 10px;
}
.inner-box {
  border: 1px solid green;
  height: 100%;
}
.divider {
  border-color: red;
  width: 100%;
  border-top-width: 5px;
}

<div class="container">
  <div class="box">
    <div class="inner-box"></div>
  </div>
  <hr class="divider">
  <div class="box">
    <div class="inner-box"></div>
  </div>
</div>

Answer 2

我试图为预览的外观提供一个干净的解决方案，从这里你可以调整你的代码。

div#line可以是任何块级元素，也可以是任何元素并设置它的显示块。

为了解释这个问题，

height:100vh只是为了填满整个屏幕。

＆＃13;

.parent {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.kid {
  flex: 1;
  border: 1px solid;
  margin: 10px;
}

.line {
  background-color: brown;
  height: 45px;
  width: 100%;
  margin: 10px 0;
}

＆＃13;

<div class="parent">
  <div class="kid"></div>
  <div class="line"></div>
  <div class="kid"></div>
</div>

＆＃13;

Answer 3

这是一个简单的flexbox解决方案。如果两个div中的内容的样式相同，则可以对它们使用相同的CSS类。我在代码片段中添加了可能有助于解释的注释。我建议查看Flexbox Froggy（google it）作为一个简单有趣的练习，真正有助于学习Flexbox的基础知识。

希望这有帮助。

.homescreen-content {
  border: 1px solid black;
 }
 
.goto {
  display: flex;
  flex-flow: column wrap;  /* align as a column and allow wrapping of content */
  justify-content: center; /* centers content vertically */
  align-items: center;  /* centers content horizontally */
  height: 300px; /* fixed height div */
  border: 1px solid black;
  margin: 20px;
}

.border {
  width: 100%;
  height: 10px;
  margin: 50px 0;
  background: maroon;
}

<div class="homescreen-content">
  <div class="goto">
    <h2>TITLE 1 CENTRED</h2>
    <p>SOME CENTRED TEXT</p>
  </div>
  <div class="border"></div>
  <div class="goto">
      <h2>TITLE 2 CENTRED</h2>
      <p>SOME CENTRED TEXT</p>
  </div>
</div>

用flex分割两个div的屏幕

3 个答案: