如何使用 flexbox 设置两个元素彼此相邻答案

【问题标题】：How to set two elements be next each other using flexbox如何使用 flexbox 设置两个元素彼此相邻
【发布时间】：2023-04-03 21:40:01
【问题描述】：

我正在尝试使用 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;
}

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

【问题讨论】：

标签： css flexbox

【解决方案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>

【讨论】：