¿Cómo establecer la posición correcta del cuadro usando flex y también texto colorido centrado verticalmente en el cuadro?

.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>
2
Dharmesh Patel 14 sep. 2018 a las 14:34

4 respuestas

La mejor respuesta

Use un contenedor flexible anidado para que pueda aplicar propiedades de alineación flexible al texto.

.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>

Más detalles aquí:

3
Michael Benjamin 14 sep. 2018 a las 11:44

Puedes probar esto. Nunca dude en utilizar flex dentro de 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>
0
ashish singh 14 sep. 2018 a las 11:38

Vea a continuación el violín si desea que el cuadro verde se coloque a la derecha, también:

.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/

3
MumfordJw 14 sep. 2018 a las 11:39

Primero puede agregar "flex-direction: row" al cuadro para que cada elemento se alinee horizontalmente

Luego puedes jugar con el atributo "justify-content: center" y "align-items"

0
xrobert35 14 sep. 2018 a las 11:39