Выровняйте гибкий элемент по правому краю и расположите его по центру

Question

Как установить правильную позицию прямоугольника вправо, используя flex, а также цветной текст, вертикально центрированный в рамке?

.box {
  display: flex;
}
.box .left-box {
  width: 30%;
}
.box .right-box {
  width: 30%;
  background-color: #3e9388;
}

<div class="box">
  <div class="left-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
  <div class="right-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

Answer 1

См. Ниже скрипку, если вы хотите, чтобы зеленое поле располагалось вправо, также:

.box {
  display: flex;
  justify-content: space-between;
}
.box .left-box {
  width: 30%;
}
.box .right-box {
  align-items: center;
  display: flex;
  width: 30%;
  background-color: #3e9388;
}

http://jsfiddle.net/4z0aqvxk/4/

Answer 2

вы можете попробовать это. Никогда не стесняйтесь использовать flex внутри flex

.box {
  display: flex;
  justify-content: space-between;
}
.box .left-box {
  width: 30%;
}
.box .right-box {
  width: 30%;
  background-color: #3e9388;
  display: flex;
  align-items: center;
}

<div class="box">
  <div class="left-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
  <div class="right-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

Answer 3

Вы можете сначала добавить «flex-direction: row» в поле, чтобы каждый элемент был выровнен по горизонтали

Затем вы можете поиграть с атрибутами «justify-content: center» и «align-items»

Answer 4

Используйте вложенный гибкий контейнер, чтобы вы могли применить свойства гибкого выравнивания к тексту.

.box {
  display: flex;
  
  /* new */
  justify-content: space-between; /* for right-alignment */
}
.box .left-box {
  width: 30%;
}
.box .right-box {
  width: 30%;
  background-color: #3e9388;
  
  /* new */
  display: flex;
  align-items: center;
}

<div class="box">
  <div class="left-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</div>
  <div class="right-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

Подробнее здесь:

• Как выровнять текст внутри flexbox по вертикали?
• Flexbox: центр по горизонтали и вертикали