How do I position a flex item at the top of a columnar flex-container, when the container is set to-CodePudding

I have a flex-container with the 'flex-direction' set to column and 'justify-content' set to 'center'.

By default child items will be vertically aligned to the center of the flex-container.

However, I want the first item to be flush against the top of the column.

So for the child I've added the property 'justify-self: flex-start'.

This has no effect. The 'justify-self' property is being ignored.

[Codepen](https://codepen.io/bobdobbs_/pen/XWBNZwx)

Even when I set 'justify-self' to !important the property gets ignored.

The easiest thing to do here seems to be to use absolute positioning. But if that's the case there doesn't seem to be much of a point to using flexbox for anything much at all.

Is there a flexbox solution for this problem? Or should I just stick to using absolute positioning?

CodePudding user response：

Please press "Run code snippet" and see the code. Stop useing position absolute for normal positioning things.

Use 1-2 hour here -> https://flexboxfroggy.com/ and you will be good at flexbox.

.flex {
  display: flex;
}

.jcc {
  justify-content: center;
  align-items: center;
}

.column {
flex-direction: column;
}

  

  
  <div >
    <h2>I want this header to be at the top</h2>
 <h3>let this be centered</h3>
 </div>

CodePudding user response：

I would separate the header content from the other content (for readability and semantic structuring of the column) and use flex to create two containing divs inside the parent (one for the header and one for the content) - and apply the vertical centering to the content area.

I have added outlines to show the different divs and aligned the text to the center of the column too.

.wrapper {
  display:flex;
  flex-direction: column;
  outline: solid 1px red;
  outline-offset: -1px;
  width: 300px;
  height: 100vh;
}

h2, p {margin: 0}

.header {
  padding: 8px; 
  text-align: center;
  flex-shrink:0;
  outline: solid 1px blue;
  outline-offset: -4px;
}

   .content {
  padding: 8px; 
  text-align: center;
  flex-grow:1;
  outline: solid 1px green;
  outline-offset: -4px;
  display:flex;
  flex-direction: column;
  justify-content: center;
}

<div >
  <div >
    <h2>heading</h2>
  </div>
  <div >
    <p>content</p>
    <p>content</p>
    <p>content</p>
    
  </div>
</div>