0

.container {
  display: flex;
  height: 1000px;
  width: 1000px;
  background-color: bisque;
  align-items: center;
  justify-content: center;
}

.box {
  height: 300px;
  width: 400px;
  background-color: green;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="container">
  <div class="box">
    <img src="Marcel_Proust.jpg">
    <h2>Proust'un Gölgesinde</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore tenetur a ipsam distinctio dicta debitis quaerat reiciendis nihil quae. Veritatis sit dolorem praesentium dolorum accusantium blanditiis quae a odio in?</p>
  </div>
</div>

I want to create a box like this. But I couldn't sort the items one below the other.I think if I can line up the items, I can create the box I want.

Diego D
  • 6,156
  • 2
  • 17
  • 30
Emre Oral
  • 1
  • 1
  • 1
    You can change the direction of the flexbox by using `flex-direction: column;`, then the items will be below one another. If you then want to change their order you can use `order: -1;` (depending if you want to move the item up or down) – ninadepina Jan 01 '23 at 16:31
  • if you meant to style the layout of the elements ***inside*** the box, you need to set as `display: flex` that element as the container. Another solution could be adding `display: content;` on the box container so that it won't interfere in the flex container hierarchy. Then if you meant to have elements to occupy full width, `display: block` would be enough without involving `display: flex`. If you meant to use flex anyway, as suggested by another user, you can rely on `flex-direction`. – Diego D Jan 01 '23 at 16:37

1 Answers1

0

In the class .container add the property flex-direction: column;

Ignacio Arevalo
  • 1