如何使用Flexbox设置两个彼此相邻的元素

Question

我正在尝试使用flexbox创建CSS，所以我关注了一些文章，并尝试像以下示例一样设置元素：

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

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

但是由于我将容器设置为flex-direction: column;

，所以我找不到Flexbox的好方法。

            <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>