CODEWITHSUNDEEP
htmlcssflexbox
Radex
Radex

Reputation: 8577

Flex box, align content to the right

I would need to align to the right of its container div op__list__operator and op__add__icon. I have tried text-align but does not work.

Any idea how to solve it? Many thanks all!

.op {
  width: 250px;
  height: 355px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
  background-color: rgba(255, 0, 0, 0.5);
}

.op__add {
  background-color: yellow;
}

.op__add__icon {
  width: 70px;
  height: 70px;
  background-color: #446ac2;
  border-radius: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.75);
}

.op__add__icon:hover {
  filter: brightness(110%);
}

.op__add__icon .material-icons.md-38 {
  font-size: 38px;
}

.op__list {}

.op__list__operator {
  display: flex;
  justify-content: space-between;
  background-color: orange;
  width: 173px;
}

.op__list__operator__label {
  width: 123px;
  height: 32px;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.op__list__operator__label__value {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 13px;
}

.op__list__operator__icon {}
<div class="op">
  <div class="op__list">
    <div class="op__list__operator">
      <div class="op__list__operator__label">
        <div class="op__list__operator__label__value">
          hello
        </div>

      </div>
      <div class="op__list__operator__icon">
        <i>avatar</i>
      </div>
    </div>
  </div>
  <div class="op__add">
    <div class="op__add__icon">
      <i>x</i>
    </div>
  </div>
</div>

Upvotes: 0

Views: 115

Answers (2)

Marwelln
Marwelln

Reputation: 29413

To align a flexbox container/item, use margin-left/right:auto.

Adding margin-left:auto; to .op__list__operator will keep that container to the right.

.op {
  width: 250px;
  height: 355px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
  background-color: rgba(255, 0, 0, 0.5);
}

.op__add {
  background-color: yellow;
}

.op__add__icon {
  width: 70px;
  height: 70px;
  background-color: #446ac2;
  border-radius: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.75);
}

.op__add__icon:hover {
  filter: brightness(110%);
}

.op__add__icon .material-icons.md-38 {
  font-size: 38px;
}

.op__list {}

.op__list__operator {
  display: flex;
  justify-content: space-between;
  background-color: orange;
  width: 173px;
  margin-left:auto;
}

.op__list__operator__label {
  width: 123px;
  height: 32px;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.op__list__operator__label__value {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 13px;
}

.op__list__operator__icon {}
<div class="op">
  <div class="op__list">
    <div class="op__list__operator">
      <div class="op__list__operator__label">
        <div class="op__list__operator__label__value">
          hello
        </div>

      </div>
      <div class="op__list__operator__icon">
        <i>avatar</i>
      </div>
    </div>
  </div>
  <div class="op__add">
    <div class="op__add__icon">
      <i>x</i>
    </div>
  </div>
</div>

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Use inline-flex to .op__list__operator instead, and set text-align:right to .op__list

.op__list {
  text-align:right
}

.op__list__operator {
  display: inline-flex;
  justify-content: space-between;
  background-color: orange;
  width: 173px;
}


.op {
  width: 250px;
  height: 355px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
  background-color: rgba(255, 0, 0, 0.5);
}

.op__add {
  background-color: yellow;
}

.op__add__icon {
  width: 70px;
  height: 70px;
  background-color: #446ac2;
  border-radius: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.75);
}

.op__add__icon:hover {
  filter: brightness(110%);
}

.op__add__icon .material-icons.md-38 {
  font-size: 38px;
}

.op__list {
  text-align:right
}

.op__list__operator {
  display: inline-flex;
  justify-content: space-between;
  background-color: orange;
  width: 173px;
}

.op__list__operator__label {
  width: 123px;
  height: 32px;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.op__list__operator__label__value {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 13px;
}

.op__list__operator__icon {}
<div class="op">
  <div class="op__list">
    <div class="op__list__operator">
      <div class="op__list__operator__label">
        <div class="op__list__operator__label__value">
          hello
        </div>

      </div>
      <div class="op__list__operator__icon">
        <i>avatar</i>
      </div>
    </div>
  </div>
  <div class="op__add">
    <div class="op__add__icon">
      <i>x</i>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions