Flex layout

The traditional layout of web pages is based on box model , rely on display attribute ,position attribute ,float attribute . It is inconvenient for special layout , such as ： Vertical layout .W3C Propose new solutions -Flex Layout , Can be simple , complete , Responsive implementation of various page layouts , At present, it has been supported by all browsers .Flex Layout as the first choice of future layout .

Flex What is the layout ？

Flex yes Flexible Box Abbreviation , Means flexible layout , Provides maximum flexibility for boxed models .

Any container can be specified as Flex Layout ,dispaly:flex;

Inline elements can also be used Flex Layout ,display:inline-flex;

Webkit Browser for kernel , Have to add -webkit Prefix ,display:-webkit-flex;display:flex.

Set up Flex After layout , Subelement float、clear and vertical-align Property will fail

Basic concepts , use Flex Elements of layout , be called Flex Containers , All child elements automatically become container members , be called Flex project .

Flex There are two axes by default ： Horizontal principal axis and vertical cross axis . The starting position of the spindle is called main start , The end position is mian end; The starting position of the cross axis is relatively cross start, The end position is cross end. Items are arranged along the main axis by default . The spindle space occupied by a single project is relatively small mian size, The cross axis space occupied is called cross size.

Properties of the container ：flex-direction flex-wrap flex-flow justify-content align-items align-content

flex-direction Property determines the direction of the spindle flex-direction:row|row-reverse|column|columen-reverse

row： The spindle is horizontal , The starting point is on the left

row-reverse: The spindle is horizontal , The starting point is on the right

column: The spindle is vertical , The starting point is at the top

column-reverse: The spindle is vertical , Starting edge

flex-wrap Attribute definitions , If an axis doesn't line up , How to wrap ,flex-wrap:nowrap|wrap|wrap-reverse.nowrap, Don't wrap ;warp: Line break , The first row is at the top .wrap-reverse: Line break , The first row is at the bottom

flex-flow The attribute is flex-direction and flex-wrap Short form of property , Default row nowarp.flex-flow:<flex-direction>||<flex-wrap>.justify-content Property defines the alignment of the item on the spindle ,justify-content: flex-start | flex-end | center  | space-betewwn | space-around.flex-start Align left ,flex-end Right alignment ,center In the middle ,space-between full-justified , The intervals between the items are all equal ,space-around Each item is equally spaced on both sides , The interval between items is twice as large as that between items and borders