Flexbox centering in a box

Question

So I am a bit new to flexbox and I was trying to put this paragraph in a flexed div and have it have a min-width so that it didn't stretch across the whole page. However, once I added a min-width on the div box it stopped centering my content passed the mobile width. I'll add a snippet below and if anyone needs further clarification on the problem let me know. Thank you to anyone who takes the time to review this and offers me advice!

#whoheading {
  color: #10D0C9;
  font-family: 'Philosopher', sans-serif;
  display: flex;
  align-content: center;
  align-items: center;
  align-self: center;
  justify-content: center;
}

#description {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  color: #BBBBBB;
  margin: 15px;
}

@media only screen and (min-width: 760px) {
  #smaller {
    display: flex;
    justify-content: center;
    align-content: center;
    align-self: center;
    min-width: 200px;
    max-width: 400px;
    flex-basis: auto;
    /* default value */
    flex-grow: 1;
  }
}

<div id="who">
  <h3 id="whoheading">Who Am I?</h3>
  <div id="smaller">
    <p id="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
  </div>
  <a href="contact.html" class="goals hover-fill" data-txthover="Hover Over Me">Contact me to achieve these goals</a>
  <div class="keepOpen"></div>
</div>

Answer 1

You don't need to use flexbox for such simple centering.
max-width and margin: auto will suffice.

https://jsfiddle.net/gnka8pky/

#whoheading {
  color: #10D0C9;
  font-family: 'Philosopher', sans-serif;
  text-align: center; /* centered text */
}

#description {
  color: #BBBBBB;
  margin: 15px auto; /* left and right margin = auto */
  max-width: 400px; /* text will not stretch past this point */
}

<div id="who">
  <h3 id="whoheading">Who Am I?</h3>
  <div id="smaller">
    <p id="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
  </div>
  <a href="contact.html" class="goals hover-fill" data-txthover="Hover Over Me">Contact me to achieve these goals</a>
  <div class="keepOpen"></div>
</div>

If you need to center the link on the bottom, you will need to make it a block element and use text-align: center. Or add an additional block level wrapper like a div and center the text from it.

a.goals {
  display: block;
  text-align: center;
}

Answer 2

Pretty sure you don't need to use flexbox at all. A left/right margin of auto will center a sized element horizontally. Your heading doesn't need flexbox, just needs text-align: center;. The flex centering properties you have on #description aren't actually centering anything, either. Here's your code simplified without any flex properties - is this what you're going for?

#whoheading {
  color: #10D0C9;
  font-family: 'Philosopher', sans-serif;
  text-align: center;
}

#description {
  color: #BBBBBB;
  margin: 15px;
}

@media only screen and (min-width: 760px) {
  #description {
    margin: 15px auto;
    min-width: 200px;
    max-width: 400px;
  }
}

<div id="who">
  <h3 id="whoheading">Who Am I?</h3>
  <p id="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
  <a href="contact.html" class="goals hover-fill" data-txthover="Hover Over Me">Contact me to achieve these goals</a>
  <div class="keepOpen"></div>
</div>

Answer 3

It's not centering because you've limited the container's total width:

#smaller {
    display:flex;
    justify-content: center;
    align-content: center;
    align-self: center;
    min-width: 200px; /* limits width; no space for centering */
    max-width: 400px; /* limits width; no space for centering */
    flex-basis: auto;
    flex-grow: 1;
}

Instead, set the limits on the text element:

#description {
  min-width: 200px;
  max-width: 400px;
}

jsFiddle

Answer 4

So with flexbox, the display: flex must be applied to the parent element of whatever you are trying to position, and only directly affects the children elements.

you will then need to change the flex-direction to be column such that all elements line up under each other.

try this instead of the #whoheading css

#who{
  color:#10D0C9;
  font-family: 'Philosopher', sans-serif;
  display:flex;
  align-content: center;
  align-items: center;
  align-self: center;
  justify-content: center;
  flex-direction: column;
}