CODEWITHSUNDEEP
htmlcssflexbox
ManuKaracho
ManuKaracho

Reputation: 1218

Aligning single child elements vertically with flexbox

I'm trying to have a variable number of columns evenly spaced, which contain a variable number of child elements vertically centered. I'm almost where I want to, but if I reduce the amount of child elements to one, the vertical alignment fails (row one and five).

What am I doing wrong?

The Code (http://codepen.io/anon/pen/bpvMda):

.myView {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 500px;
  width: 500px;
}
.wpType {
  flex: 0 1 auto;
  display: flex;
  flex-flow: row wrap;
  align-items: space-around;
  align-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
}
.wpType:nth-child(even){
  background: blue;
}
.wpType:nth-child(odd){
  background: red;
}
.wp {
  flex: 0 1 auto;

  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: white;
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}
<div class="myView">
  <div class="wpType">
    <div class="wp"></div>
  </div>
  <div class="wpType">
    <div class="wp"></div>
    <div class="wp"></div>
    <div class="wp"></div>
  </div>
  <div class="wpType">
    <div class="wp"></div>
    <div class="wp"></div>
    <div class="wp"></div>
  </div>
  <div class="wpType"><div class="wp"></div>
    <div class="wp"></div></div>
  <div class="wpType"><div class="wp"></div></div>
</div>

Upvotes: 3

Views: 949

Answers (1)

Wowsk
Wowsk

Reputation: 3675

Use these properties on your parent div of all of the centered elements.

display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;

Codepen

Upvotes: 4

Related Questions