Css--display:flex

Flex is the abbreviation for flexible box, meaning "resilient layout", which provides maximum flexibility for box-shaped models.

When set to flex layout, the, and attributes of the child elements float clear vertical-align are invalidated. It can be applied to a container, or it can be applied to inline elements. (explained in conjunction with developer tools) in 2009, the website presented a new solution----flex layout that enables easy, complete and responsive layout of various pages. Currently, it has been supported by all browsers, which means that this feature is now safe to use.

<! DOCTYPE html>. Father {width:600px;            height:300px; Background-color: #b6ff00;            Display:flex; /*Flex-flow:column;*/Flex-Flow:row; }. Father. Son1 {flex:1; border:1px Solid #000000;                }. Father. son2 {width:500px; border:1px Solid #000000; }. Father. Son3 {flex:1; border:1px Solid #000000; }    </style>
The parent tag sets the Dispaly:flex after the default scaling direction is from sitting to right. When the sub-tag is set flex:1 the child elements are evenly distributed in the telescopic direction.
Reference: Dispaly, talking about the flex layout of display properties in CSS3
Css--display:flex