Flex Box Layout

. box{

Display:flex;

}

. box {

Display:inline-flex;

}

. box {

Display:-webkit-flex;

Display:flex;

}

Flex-direction

Flex-wrap

Flex-flow

Justify-content

Align-items

Align-content

Property name	Row	Row-reverse	Column	Column-reverse
Flex-direction	The spindle is in the horizontal direction and the starting point is left (default value)	Spindle is horizontal, starting point at right end	Colum, the spindle is in the vertical direction, the starting point is on the top edge	The spindle is in the vertical direction, starting at the lower edge

Property name	NoWrap	Wrap	Wrap-reverse
Flex-wrap ( whether to change careers)	NoWrap(default)	Normal line break	Wrap from bottom to top

Description: Flex-wrap is nowrap; When the screen width is full screen, assuming that the box's child element item's width width=100px, then 100px is the maximum width of item. As the screen shrinks, the width of the item can be narrowed, and the item's minimum width is the width of its child elements.

Flex-flow It's flex-direction . and Flex-wrap the Shorthand form

justify-content Properties (horizontal alignment)

/tbody>

property value	meaning
flex-start	left-justified
flex-end	Right align
center	center
space-between	justify
< P align= "Center" >space-around

align-content Properties (vertical alignment)

Property name	Meaning
Flex-start	Align with the start of the intersection axis
Flex-end	Align with cross Axis's end point
Center	Aligns to the midpoint of cross axis
Space-between	aligned with cross axis and evenly spaced across the circumference
Space-around	The intervals are equal on each side of the week line
Stretch	Main axis fills the entire cross axis

Project Properties

order Attribute definition: The order of the items, the smaller the number, the first month, the default is 0;

Flex-grow Property Definition:

If the Flex-grow property values for the items are all 1, they will divide the remaining space, if any. If the Flex-grow property of one project is 2 and the other items are 1, the former occupies more than one more space than the other items

Flex-shrink Property Definition:

Flex-shrink property value is 1, when the space is not enough, will be scaled down, if the Flex-shrink property of an item is 0, the other items are 1, then the space is low, the former does not shrink, the negative value is not valid for this property

flex-basis Property Definition:

The Flex-basis property defines the spindle space (main size) that the item occupies before allocating the extra space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is auto, which is the original size of the project

flex-basis:350px 350px;

Flex

Flex is a shorthand for flex-grow/flex-shrink/flex-basic

Align-self

align-selfproperty 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 .

Flex Box Layout