如何修复 flex-direction: column 如何让前两个元素是行方向最后一列的 flex

Question

I'm trying to build a div that does the following: On the left, there is a date. Next to it is an edit button. Under these two elements, I have some text. I'm not able to get the text under the two elements.

I was using flex to achieve this and I broke each element into a separate div. The last elements I used flex-direction: column; to make sure it goes under the first two.

However with no success.

 /* _________________________ This is the containers for my_thought page */ #blocks { display: flex; margin: 10px; } #blocks div{ flex: 0 0 100px; padding: 10px 0; text-align: center; } .one{order: 0;}; .two{order: 1;}; .three{ order: 2; flex-direction: column; }; /*________________________ */

 <div class="Thoughts" id="blocks"> <div class="one"> <h2>Date: <?php $date = strtotime($row['date_created']); echo date('m/d/y', $date); ?> </h2> </div> <div class="justify-content-center .button .two"> <button type="submit" name="submit" class="btn btn-primary">Edit post</button> </div> <div class="three"> <br> <p> <?php echo $row['text']; ?> </p> </div>

I am attaching a photo showing how my code looks currently. What am I doing wrong?

You can find a photo of the output the following link: https://drive.google.com/file/d/1Q90qE6mWHZtrcXnAXJdUuSUqHtHt31ig/view?usp=sharing

Answer 1

Thank you for the help. I was able to solve the problem. I am showing the code I used solve the problem.

 #blocks { display: flex; margin: 10px; } #blocks div{ flex: 1 0 100px; padding: 1px 0; text-align: center; } .one{ order: 0; margin: 10px; }; .two{order: 1; margin: 10px; };

 <div class="Thoughts"> <div id="blocks"> <div class="one"> <h2>Date: <?php $date = strtotime($row['date_created']); echo date('m/d/y', $date); ?> </h2> </div> <div class="justify-content-center .button .two"> <button type="submit" name="submit" class="btn btn-primary">Edit post</button> </div> </div> <p> <?php echo $row['text']; ?> </p> </div>