如何用Flexbox制作非对称物体

提问者：小点点

如何用Flexbox制作非对称物体

所以我用HTML和CSS构建了一个小文本小部件。它看起来很好，正如我想要的那样，但是由于我没有用FlexBox做它，它在某些网站上被描述错误。 “Place here”图标和“To The job”通过硬编码设置位置来放置在那里。根据文档的宽度，硬编码使小部件显得小或长。所以我希望它们是弹性的。但我不知道我该怎么做一个灵活的安排，看起来是这样的。每个文本和图标都是不同的元素。我试过使用flex，但是在职位名称和职位描述之间有太多的空白。谢谢你的帮助，很抱歉问了这个愚蠢的问题。

共1个答案

匿名用户

这里举一个简单的例子:

首先考虑一下您需要如何构造HTML。我在这里看到的是一个大盒子，里面有三个孩子。 Job Title Here和Description of the Job Here是第一个子元素的子子元素。

如果您将display:flex放在大框上，则childs将水平地排列在eatch其他的旁边。

现在在这一点上看起来很难看，他们粘在一起。要使它们远离其他集合justify-content:space-between。它增加了孩子们之间尽可能多的空间，他们可以进入盒子。

现在我们得到的问题是，它们不是垂直对齐的。在这里，您需要设置Align-Items:center，这将使childs在flexbox中居中

null

* {
   margin: 0; 
   padding: 0;
   box-sizing: border-box;
   font-family: "Arial", sans-serif;
}

.box {
  border: 1px solid #dadada;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:20px;
  box-shadow: 0 0 5px lightgrey;
  margin: 10px;
}


h2 {
   color: darkorange;
}

#tojob {
   cursor: pointer;
   position: relative;
}
#tojob::before {
   content: "";
   position: absolute;
   left: 0;
   width: 0;
   height: 2px;
   bottom: 0;
   background: darkorange;
   transition: width 200ms;
}

#tojob:hover::before {
     width: 100%;
}

<div class="box">
   <div>
      <h2>Job title here</h2>
      <p>description here</p>
   </div>
   <p style="margin-left: auto">Place here</p>
   <p id="tojob" style="margin-left: 25%">to the job</p>
</div>