Display/flex and centering stuff

[StuffnThingz]

I have been messing around with the flex property because I saw it in an example. Anyone experienced with that attribute and exactly what it does. I used it with the "aside" thing to get a black on the left side of the page to put images in, but the more I typed in the middle of the page, the smaller it got. I wanted the block with the image in it to be about 1/4 the page with the image centered. Been messing with it, but not finding any solutions. Also, I tried centering the text on my button, but it wouldn't center.

[JonSwallow]

@StuffnThingz here is what I used to get the image centered and justified.

aside {
  background-color: #FFF5BF;
  flex: 1 1 auto;
   padding: 20px;
  color: #7F7E73;
  text-align: center;
  border-radius: 20px;
  border-style: solid;
  border-color: #FFe96C;
  border-width: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

As far as the width of the column it seems to have to do with the size of the picture. For example, I used the same aside code in the CSS for both the pages I used a picture in that block. See the index and the about pages for reference. The first one in my index page has a thinner picture and a thinner block. I believe the padding can also be adjusted for a little more squeeze.

my results my repo

[StuffnThingz]

Thanks, @JonSwallow ! It was the flex-direction I needed. Still not sure how to center the text in the "buy this book button." I tried following the example for the button on the "Psuedo-Classes" page of the website.

[JustineEvansUM]

That's awesome @StuffnThingz! Glad something else worked better!