我如何将文本与 space-between flex box 右对齐

Question

这是我的 HTML:

.skillbox {
  display: flex;
  justify-content: space-between;
  width: 65%;
  margin: auto;
  align-items: center;
}

.skilltitle {
  align-content: flex-end;
  margin-top: auto;
  margin-bottom: auto;
  padding-right: 20px;
  padding-left: auto;
}

<div class='skillbox'>
  <div class="skilltitle">
    <h1 class='skillmtext'>My skills</h1>
  </div>
  <div class='coul'>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <!-- <span class='percent'>50%</span> -->
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <!-- <span class='percent'>50%</span> -->
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <!-- <span class='percent'>50%</span> -->
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <!-- <span class='percent'>50%</span> -->
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
  </div>
</div>

我希望“我的技能”在右边，我已经尝试了很多东西但仍然无法弄清楚使用 flex-box 属性到 margin: auto; 仍然，似乎没有什么在这里工作请推荐。

Answer 1

.skillbox {
    display: flex;
    justify-content:space-between;
    width: 65%;
    margin: auto;
    align-items: center;

}

.skilltitle {
    align-content: flex-end;
    margin-top: auto;
    margin-bottom: auto;
    padding-left:300px;
    float:left;
    
}

<div class='skillbox'>
        <div class="skilltitle"><h1 class='skillmtext'>My skills</h1></div>
        <div class='coul'>
            <div class='deta'>
                <div class='insideskill'>
                    <i class="fab"><span class="skillname">3D-modeling</span></i>
                    <!-- <span class='percent'>50%</span> -->
                </div>
                <div class='bar'><div class='barin'></div></div>
            </div>
            <div class='deta'>
                <div class='insideskill'>
                    <i class="fab"><span class="skillname">3D-modeling</span></i>
                    <!-- <span class='percent'>50%</span> -->
                </div>
                <div class='bar'><div class='barin'></div></div>
            </div>
            <div class='deta'>
                <div class='insideskill'>
                    <i class="fab"><span class="skillname">3D-modeling</span></i>
                    <!-- <span class='percent'>50%</span> -->
                </div>
                <div class='bar'><div class='barin'></div></div>
            </div>
            <div class='deta'>
                <div class='insideskill'>
                    <i class="fab"><span class="skillname">3D-modeling</span></i>
                    <!-- <span class='percent'>50%</span> -->
                </div>
                <div class='bar'><div class='barin'></div></div>
            </div>
        </div>
</div>

Answer 2

要使 text-on 右对齐，您需要添加 text-align:right;

我有点时间，所以我对你的图像做了一个大概的整合，给你一个想法：

.skillbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color:black;
  color:white;
  padding: 2rem 0rem;
}

.skilltitle {
  text-align: right;
  flex:1;
  padding-right: 2rem;
}
.coul{
  flex:1;
  border-left: 3px dotted white;
}
.fab{
  margin-bottom:1.5rem;
  display:block;
}
.deta{
  padding: 1rem 2rem;
}
.percent{
  height:1px;
  display:flex;
  background-color:grey;
}
.percent>span{
  width:80%;
  height:100%
  display:block;
  background-color:green;
}

<div class='skillbox'>
  <div class="skilltitle">
    <h1 class='skillmtext'>My skills</h1>
  </div>
  <div class='coul'>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <span class='percent'><span></span></span>
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <span class='percent'><span></span></span>
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <span class='percent'><span></span></span>
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <span class='percent'><span></span></span>
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
  </div>
</div>

Answer 3

将 flex-grow: 1; 和 text-align: right; 添加到 .skilltitle。 flex-grow: 1 设置将允许它扩展到相邻元素，text-align 将确定元素内的对齐方式。

.skillbox {
  display: flex;
  justify-content: space-between;
  width: 65%;
  margin: auto;
  align-items: center;
}

.skilltitle {
  align-content: flex-end;
  margin-top: auto;
  margin-bottom: auto;
  padding-right: 20px;
  padding-left: auto;
  flex-grow: 1;
  text-align: right;
}

<div class='skillbox'>
  <div class="skilltitle">
    <h1 class='skillmtext'>My skills</h1>
  </div>
  <div class='coul'>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <!-- <span class='percent'>50%</span> -->
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <!-- <span class='percent'>50%</span> -->
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <!-- <span class='percent'>50%</span> -->
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
    <div class='deta'>
      <div class='insideskill'>
        <i class="fab"><span class="skillname">3D-modeling</span></i>
        <!-- <span class='percent'>50%</span> -->
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
  </div>
</div>

Answer 4

在 .skilltitle 上设置 flex-grow 属性和 text-align，如下所示：

.skilltitle {
  flex: 1 0 auto;
  align-content: flex-end;
  margin-top: auto;
  margin-bottom: auto;
  padding-right: 20px;
  padding-left: auto;
  text-align: end;
}

我如何将文本与 space-between flex box 右对齐

How do i align text to right with space-between flex box

html

css

frontend

text-alignment

flexbox