Я новичок в css и html и сейчас я пытаюсь изучить flexbox. Я использую flexbox для форматирования нескольких столбцов и строк с помощью imgs и ps. Прямо мой текст под моим изображением, как показывает фрагмент кода. Я не могу сделать это своим показом, но надеюсь, вы поймете, что я пытаюсь сделать.
Но я хочу выровнять все три р по правой стороне img. Я пытался использовать align-right на p, но это не сработало. И flex-end тоже не решил. Я хочу решить, используя только flexbox и не плавать правильно. Таким образом, есть способ, которым я могу сделать это только с помощью flexbox?
Эта ссылка на изображение показывает, как я хочу, чтобы это было: https://imgur.com/a/yfr0Zwr
#depoimentos{
background-color: #0fc5ae;
color: #fff;
}
h1{
padding-top: 1rem;
font-size: 2.5rem;
text-align: center;
}
#depoimentos .txt{
text-align: right;
}
#depoimentos .row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
#depoimentos .column{
display: flex;
flex-direction: column;
flex-basis: 100%;
flex:1;
align-items: center;
justify-content: space-between;
}
#depoimentos .row img{
max-width: 200px;
height: 200px;
border-radius: 50%;
padding: 2rem;
}
<section id="depoimentos">
<h1>DEPOIMENTOS</h1>
<div class="box">
<div class="row">
<div class="column">
<img src="./img/pessoa1.jpeg" alt="pessoa1">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, at?</p>
<p>Nome</p>
<p>Função</p>
<img src="./img/pessoa2.jpeg" alt="pessoa2">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, at?</p>
<p>Nome</p>
<p>Função</p>
</div>
<div class="column">
<img src="./img/pessoa3.jpeg" alt="pessoa3">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, at?</p>
<p>Nome</p>
<p>Função</p>
<img src="./img/pessoa4.jpeg" alt="pessoa4">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, at?</p>
<p>Nome</p>
<p>Função</p>
</div>
</div>
</div>
</section>