css - 如何使用flexbox将两个元素设置为彼此相邻

Question

我正在尝试用 flexbox 制作我的 css，所以我关注了一些文章并尝试像这个例子一样设置我的元素:

元素 1 和 2 在另一个容器中

我正在尝试将两个元素(1 和 3)设置为彼此相邻作为第二个示例(第一个是我现在拥有的，另一个是我想要实现的。)

但是我找不到使用 Flexbox 的好方法，因为我将容器设置为 flex-direction: column;

            <div class="container">
            <div class="sub-ctn">
              <h5 class="1"><span>♦ </span>{{ text }}</h5>
                <span class="2">{{ value }}</span>


              <div class="3">
                  <h5>{{ text }}
              </div>
            </div>
        </div>

CSS:

.container {
    margin-right: 2.5%;
    direction: rtl;
}

.sub-ctn {
    display: flex;
    flex-flow: row;
    margin-top: 1%;
    flex-direction: column;
}       


.1 {
    width: 100%;
    direction: rtl;
    text-align: right;
}

.2 {
    float: right;
    /* text-align: right; */
}

.3 {
    margin-left: 1%;
    display: flex;
    flex-direction: column;
}

如果需要其他信息请告诉我

Answer 1

不要同时使用float 和flex。单独使用 Flex 会更容易、更好。

.cont{
  display: flex;
  width: 80%;
border: 1px solid black;
padding: 10px;
}

.left-cont{
   height: 100%;
   flex-grow: 1;
}

.right-cont{
   flex-grow: 1;
   display: flex;
   flex-direction: column;
}

.item{
  text-align: center;
  border: 1px solid black;
  margin: 3px;
}

<div class="cont">
 <div class="left-cont">
    <div class="item">3</div>
  </div>
  <div class="right-cont">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>
 
</div>