How to align one flex child as flex-start and other in center?-CodePudding

I have a sidebar that is set to flex with direction column. I am trying to get my menu ul to be vertically centered, and my .logo-container to be on the top of the page.

Is there any way to get one child to flex-start and another one centered?

Code:

<aside >
    <nav >
      <div >
        <a href="index.html" >
          <img src="http://unsplash.it/30/30"  alt="">
          <h6 >My<span >Name</span></h6>
        </a>
      </div>
      <ul >
        <li ><a href="#" >Menuitem1</a></li>
        <li ><a href="#" >Menuitem2</a></li>
        <li ><a href="#" >Menuitem3</a></li>
        <li ><a href="#" >Menuitem4</a></li>
      </ul>
    </nav>
  </aside>

CSS:

html {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

.side-bar {
  width: 35%;
  height: 100vh;
  background-color: blue;
}

.navigation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  height: 100%;
}

.logoname {
  display: inline-block;
}

* {
  color: black;
}

ul {
  list-style: none;
}

Codepen

Many thanks!

CodePudding user response：

What you can do is to create an empty/invisible element as a third flex item inside the flex parent (in my example below it's the divwith class xxx) and apply justify-content: space-between to the flex parent (instead of center).

Depending on your actual code and content you should make sure that that additional element has the same height as the nav element (30px in your and my example). And again, depending on the situation you might want to add visibility: hidden; to the additional element (xxx) to make it invisible but still have its height included in the flex position calculations:

html {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

.side-bar {
  width: 35%;
  height: 100vh;
  background-color: blue;
}

.navigation {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logoname {
  display: inline-block;
}

* {
  color: black;
}

ul {
  list-style: none;
}

.xxx {
  height: 30px;
  visibility: hidden;
}

<aside >
  <nav >
    <div >
      <a href="index.html" >
        <img src="http://unsplash.it/30/30"  alt="">
        <h6 >My<span >Name</span></h6>
      </a>
    </div>
    <ul >
      <li ><a href="#" >Menuitem1</a></li>
      <li ><a href="#" >Menuitem2</a></li>
      <li ><a href="#" >Menuitem3</a></li>
      <li ><a href="#" >Menuitem4</a></li>
    </ul>
    <div ></div>
  </nav>
</aside>

CodePudding user response：

All you have to do is to have the logo and ul in separate divs within the parent div that has the column direction styling, apply flex-shrink:0 to the div containing the logo and flex-grow: 1 to the other div.

That will allow the logo to be at the top and the other div to take the rest of the space - then you can apply flex styling in the navigation -container to center the ul within that div.

html {
  box-sizing: border-box;
  color: white;
}

* {
  margin: 0;
  padding: 0;
}

.side-bar {
  width: 35%;
  height: 100vh;
  background-color: blue;
  padding: 8px;
}

.navigation {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
    align-items: center;
}

.logo-container {
 flex-shrink:0
}

.logoname {
  display: inline-block;
  padding : 8px;
    color: lime;
}

.navigation-container {
 flex-grow:1;
   display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;


}


ul {
  list-style: none;
}
li a{ color: white; }

<aside >
    <nav >
    
      <div >
        <a href="index.html" >
          <img src="http://unsplash.it/30/30"  alt="">
          <h6 >My<span >Name</span></h6>
        </a>
      </div>
      <div >
        <ul >
          <li ><a href="#" >Menuitem1</a></li>
          <li ><a href="#" >Menuitem2</a></li>
          <li ><a href="#" >Menuitem3</a></li>
          <li ><a href="#" >Menuitem4</a></li>
        </ul>
      </div>
    </nav>
  </aside>