时间戳

首页 > 解决方案 > 如何创建一个 flexbox 布局？

html - 如何创建一个 flexbox 布局？

问题描述

我想在一个 div 和一个内容靠近该 div 的 div 中创建一个 flexbox 布局标题、详细信息和其他内容，并且应该放置在主框（命名容器）的中心。

我试图做什么？我创建了一个名为容器的 div，并在其中放置了标题和其他详细信息。这样做时，close div 也在名为 div 的容器内。它应该在容器 div 之外并在它的中间。

我想创建一个如下图所示的布局， 在此处输入图像描述

有人可以帮我解决这个问题吗？链接到代码 https://codepen.io/anon/pen/BbaKwy

.box_wrapper {
     width: calc(100% - 450px);
     border: 1px solid green;
     margin: 0 auto;
 }
 
.container {
    display: flex;
    justify-content: space-between;
    border: 1px solid blue;
    padding: 10px;
 }
<div class="box_wrapper">
  <div class="container">
    <div class="content">
      <div>title</div>
      <div>detail</div>
    <div>
      <div>ticket number</div>
      <div>
          <h2>Debug</h2>
          someresponse
          <div/>
      </div>
   </div>
</div>
<div>close</div></div></div>

谢谢。

标签： htmlcss

解决方案

您可以通过移动关闭的 div 并添加更多样式来实现所需的结果box_wrapper

.box_wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: none;
  margin: 0 auto;
}

.container {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 450px);
  border: 1px solid blue;
  padding: 10px;
}
<div class="box_wrapper">
  <div class="container">
    <div class="content">
      <div>title</div>
      <div>detail</div>
      <div>
        <div>ticket number</div>
        <div>
          <h2>Debug</h2>
          someresponse
          <div/>
        </div>
    </div>
    </div> 
  </div>
</div>
<div>close</div>

添加flex-direction:rowto.box_wrapper是将其向右对齐，设置align-items:center是将其垂直放置在中间。

编辑：

如果你想在box_wrapper类中保持关闭 div 的同时实现这一点，你可以这样做：

.box_wrapper {
      display: flex;
      flex-direction: row;
      border: none;
      margin: 0 auto;
      width: calc(100% - 450px);
    }
    
    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-grow: 1;
      padding: 10px;
    }
    .content {
      border: 1px solid blue;
      flex-grow: 1;
    }
<div class="box_wrapper">
      <div class="container">
        <div class="content">
          <div>title</div>
          <div>detail</div>
          <div>
            <div>ticket number</div>
            <div>
              <h2>Debug</h2>
              someresponse
              <div/>
            </div>
        </div>
        </div> 
      </div>
      <div>close</div>
    </div>

推荐阅读