In a vertical box, by default, all objects are the same width, that of the widest child in the box. An object becomes flexible when the flex attribute is placed on the element. Objects that are flexible can shrink or grow as the box shrinks and grows. Whenever there is extra space left over in a box, the flexible objects are expanded to fill that space. Flex is specified as a numerical value.
All flex is relative.
For example, a child with a flex of 2 is twice as flexible as a child with a flex of 1. In the above example, the box is 200 pixels tall, which is more than enough room for the three buttons. Because the first and third buttons are inflexible, they remain the same size as in the previous example. The second button is specified as being flexible, and because it is the only flexible object in the box, it receives all of the extra space. When several objects in a box are flexible, the extra space is divided among the objects based on how flexible they are.