Flex Flexible Layout

Grammar Chapterflex layouts are flexible layouts that provide maximum flexibility for box-shaped models. any container can be set to flexible layoutcompatibilityWebkitThe kernel browser needs to prefix-webkit, and the older version is Flex-box, where the related attributes are slightly different. See http://www.ccwebsite.com/flex-layout-old-and-new-compatible/

Axisthe container has two axes by default: the horizontal spindle (main axis) and the vertical intersection axis (cross axis). The starting position of the spindle (the intersection with the border) is called main start , the end position is called main end ; the start position of the intersection axis is called cross start , the end position is called cross end . The project is arranged by default along the spindle. The main spindle space occupied by a single item is called the main size occupied cross-axis space cross size .

Container Properties

• Flex-direction
• Flex-wrap
• Flex-flow
• Justify-content
• Align-items
• Align-content

1.flex-direction PropertyThe Flex-direction property determines the direction of the item arrangement

1 . Box {2   flex-direction:row | row-reverse | column | column-reverse; 3 }

2. Flex-wrap Properties

1 . box{2   flex-wrap:nowrap | wrap | wrap-reverse; 3 }

nowrap: The default value does not wrap, and each item is scaled down if the item overflows. Wrap: Line wrap. Wrap-reverse: newline, but reversed, the first line is below3.Flex-flow PropertyProperties flex-flow are flex-direction flex-wrap shorthand for properties and properties, and the default value is row nowrap .

1 . Box {2   flex-flow: <flex-direction> | | <flex-wrap>; 3 }

4. Justify-content Properties justify-content Property defines how the item is aligned on the spindle.

1 . Box {2   justify-content:flex-start | flex-end | center | space-between | space-around;< /c13>3 }

5. Align-items Properties align-items Property defines how the item is aligned on the intersection axis.

1 . Box {2   align-items:flex-start | flex-end | center | baseline | stretch; 3 }

6、Align-content Property align-content Properties Define the alignment of multiple axes. If the item has only one axis, this property does not work.

Project PropertiesThe following six properties are set on a project:

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1. Order attribute order Property defines the order in which items are arranged. The smaller the number, the higher the alignment, and the default is 0.

1 . Item {2   order: <integer>;  // integer Numbers 3 }

2 Flex-grow Properties flex-grow property defines the magnification of the item, by default, that is 0 , if there is space left, do not zoom in.

1 . Item {2   /*  */3 }

If all items have flex-grow properties of 1, they will divide the remaining space (if any). If an item has a flex-grow property of 2 and the other item is 1, the former occupies more than the remaining space. 3 Flex-shrink PropertiesProperty defines the scale-out for the project, which defaults to 1, that is, if there is not flex-shrink enough space, the item shrinks.

1 . Item {2   /*  */3 }

If all items have a flex-shrink property of 1, they will be scaled down when there is not enough space. If an item has a flex-shrink property of 0 and the other items are 1, the former does not shrink when there is not enough space. A negative value is not valid for this property. 4. Flex-basis Properties flex-basis property defines the spindle space (main size) that the item occupies before allocating extra space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is the auto original size of the project.

1 . Item {2   /*  */3 }

it can be set to width height the same value as a property (such as 350px), the item will occupy a fixed space,or as a percentage.

5. Flex Properties flex The property is flex-grow , flex-shrink and shorthand for, flex-basis the default value 0 1 auto . The latter two properties are optional

1 . Item {2   Flex:none | [< ' Flex-grow ' > < ' Flex-shrink ';? | | < ' flex-basis ' > ] 3 }

This property has two shortcut values: auto () 1 1 auto and None ( 0 0 auto ). It is recommended that you use this property instead of writing three separate properties separately, because the browser calculates the relevant values. 6 Align-self Properties lign-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value auto , which represents the property that inherits the parent element align-items , is equivalent to if there is no parent element stretch .

1 . Item {2   Align-self:auto | flex-start | flex-end | center | baseline | stretch; 3 }

This property, in addition to auto, is identical to the Align-items property.

Flex Flexible Layout