Product Preview Card

Community feedback

• 

  Benjamin B.•240

  @benjaminbilgehanPosted over 1 year ago

  Hi! It sounds like you're working on a layout using Flexbox.

  Your approach is a good one. Creating a container div with a fixed width and setting the height to 100vh will ensure that the container fills the entire viewport. Then setting the display property of the container to "flex" will allow you to use Flexbox to position the child elements.

  To center the child elements, you can set the "justify-content" and "align-items" properties of the container to "center". This will horizontally and vertically center the child elements within the container.

  Here's an example code snippet to get you started:

  ***HTML:

  <div class="container">
    <div class="item">Child element 1</div>
    <div class="item">Child element 2</div>
    <div class="item">Child element 3</div>
  </div>
  

  ***CSS

  .container {
    width: 600px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .item {
    width: 200px;
    height: 200px;
  }
  

  In this example, the container has a fixed width of 600px and a height of 100vh. The "display" property is set to "flex" and the "justify-content" and "align-items" properties are set to "center". The child elements (with class "item") have a fixed width and height.

  I hope this helps you get started! Let me know if you have any more questions.

  also beni follow etmeyi unutma, benim icin bir zevkti. -Bilgehan

  Marked as helpful

  1

  ---

  

  Mert Evirgen•140

  @waldvoidPosted over 1 year ago

  @benjaminbilgehan Thank you for your feedback

  0