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

This is my 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 >
    <h1 class='skillmtext'>My skills</h1>
  </div>
  <div class='coul'>
    <div class='deta'>
      <div class='insideskill'>
        <i ><span >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 ><span >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 ><span >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 ><span >3D-modeling</span></i>
        <!-- <span class='percent'>50%</span> -->
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
  </div>
</div>

I want the "My skills" to be on the right, I have tried multiple things but still can't figure out using flex-box property to margin: auto; still, nothing seems to be working here please suggest.

CodePudding user response：

Set a flex-grow propery and a text-align on .skilltitle, like this:

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

CodePudding user response：

.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 ><h1 class='skillmtext'>My skills</h1></div>
        <div class='coul'>
            <div class='deta'>
                <div class='insideskill'>
                    <i ><span >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 ><span >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 ><span >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 ><span >3D-modeling</span></i>
                    <!-- <span class='percent'>50%</span> -->
                </div>
                <div class='bar'><div class='barin'></div></div>
            </div>
        </div>
</div>

CodePudding user response：

Add flex-grow: 1; and text-align: right;´ to .skilltitle. The flex-grow: 1setting will allow it to extend to the neighboring element,text-align` will determine the alignment within the element.

.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 >
    <h1 class='skillmtext'>My skills</h1>
  </div>
  <div class='coul'>
    <div class='deta'>
      <div class='insideskill'>
        <i ><span >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 ><span >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 ><span >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 ><span >3D-modeling</span></i>
        <!-- <span class='percent'>50%</span> -->
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

To align your text-on the right you need to add text-align:right;

I had a little time so I made an approximate integration of your image to give you an idea:

.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 >
    <h1 class='skillmtext'>My skills</h1>
  </div>
  <div class='coul'>
    <div class='deta'>
      <div class='insideskill'>
        <i ><span >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 ><span >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 ><span >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 ><span >3D-modeling</span></i>
        <span class='percent'><span></span></span>
      </div>
      <div class='bar'>
        <div class='barin'></div>
      </div>
    </div>
  </div>
</div>