Question 296032 in Html Question posted in
Some basic documentation can be found here.

Html – I am currently working on project where i am facing issue in flex box property

I’m currently working on a project where I’m using CSS Flexbox for layout, but I’ve encountered an issue. The child elements within the flex container are not aligning as expected. I’ve double-checked my flexbox properties, but I can’t seem to figure out what’s causing the misalignment.

Here’s a simplified version of my HTML and CSS:

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.child {
  /* Some styling here */
}
<div class="flex-container">
  <div class="child">Content 1</div>
  <div class="child">Content 2</div>
  <div class="child">Content 3</div>
</div>

I expected the child elements to be evenly spaced with their content centered vertically, but that’s not the case. Any insights into what might be causing this issue or suggestions for troubleshooting would be greatly appreciated! Thanks.

Tags:

2

Answers


  1. 0

    align-items: center centres the flex items within the flex container. But your flex container is just a regular block element and its height depends on its contents. It is only as high as it needs to be, which in the case of your snippet is just a single line high. The flex container appears at the top of the document, and therefore the top of the viewport. Here is a snippet to demonstrate the default height of a flex container and the flex items being vertically centered within it.

    .flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: pink;
}
    <div class="flex-container">
  <div class="child">Content 1</div>
  <div class="child">Content 2<br>Content 2</div>
  <div class="child">Content 3<br>Content 3<br>Content 3</div>
</div>

    If what you actually want is for the flex items to be vertically centered within the viewport, then you need to set the height of your flex container to match the viewport, so set it to 100vh.

    body {
  margin: 0;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: pink;
  height: 100vh;
}
    <div class="flex-container">
  <div class="child">Content 1</div>
  <div class="child">Content 2<br>Content 2</div>
  <div class="child">Content 3<br>Content 3<br>Content 3</div>
</div>
    Login or Signup to reply.
  2. 0 
    .flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.child {
  /* Some styling here */
}
    <div class="flex-container">
  <div class="child">Content 1</div>
  <div class="child">Content 2</div>
  <div class="child">Content 3</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search