Using Flex Box CSS Model

Using Flex Box CSS Model
0

#1

I’m trying to solve the last 4 projects of the front end using the flex box model (instead of Bootstrap).
However, things don’t work as expected and I am not sure why.
Take a look at this visual guide: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flexbasis

However when I try using flex-basis in this pen http://codepen.io/bencarp/pen/yMRyQg it doesn’t work.


Any idea why?
Thanks in advance!
@Swoodend


#2

Your button container is not a flex container. Even if it is, it doesn’t have enough space for you to do a flex-basis.

<div id="buttons" style="display:flex; flex-flow:wrap;">
</div>

#3

Thanks for finding my (naive) error.

I hope u can help me with this follow up question.

  1. I read that if u have a flex container and u use margin:auto on an item it centers both horizontally and vertically. Why doesn’t it work in my pen? (Body is set as flex, and the div ‘calc’ is set to margin:auto.)
  2. Even though the ‘calc’ container is set to have:
  flex-basis: 460px;
  align-content: space-between;

There is very little space between the screen and the keyboard. Why? What is the solution?

Thanks in advance!


#4

Percent centering only works if the container has a associated height in the parent container.
In your case, if you put an outline in your body, which is the container for the calc, you’ll know if it is being centered or not.

<body style="outline:2px solid white;">
</body>

If you want it to be centered of the screen. Then the parent of “calc” will have to have width and height of 100%

html, body {
   width:100%;
   height:100%;
}