CSS3 Flex Box (Flex Box)

In the style design of web applications, layout is a very important part. Layout is used to determine the size and position of different components and elements on the page. With the popularity of responsive user interfaces, web applications are generally required to adapt to different device sizes and browser resolutions. The most important aspect of responsive user interface design is layout. The layout needs to be adjusted according to the window size, thereby changing the size and position of the components to achieve the best display effect. This also makes the layout logic more complex.

This article introduces the new layout model introduced in the CSS3 specification: the flex box model. The flexbox model can meet many common complex layout needs in a simple way. Its advantage is that developers only declare the behavior that the layout should have, without giving specific implementation methods. The browser is responsible for doing the actual layout. This layout model is supported in major browsers.

##CSS3 Flexible Box Content##Flexible The box is composed of a Flex container and a Flex item.

A flexible container is defined as a flexible container by setting the value of the display property to flex or inline-flex.

The flexible container contains one or more flexible sub-elements.

Note: The outside of the flexible container and inside the flexible sub-element are rendered normally. The flex box only defines how the flex child elements are laid out within the flex container.

Flexible sub-elements are usually displayed in one line within the flexible box. By default there is only one row per container.

      
  
 
 1
 
 2
 
 3
 
  

flex-direction property

Sets or retrieves the child elements of the flex box object The position in the parent container.

Syntax
flex-direction: row | row-reverse | column | column-reverse

row: arranged horizontally from left to right (left aligned), the default arrangement method.

row-reverse: Reverse the horizontal arrangement (right-aligned, from back to front, with the last item at the front.

column: Vertical arrangement.

row-reverse: Reverse the vertical arrangement, from back to front, with the last item on top

Browser support

Firefox, Opera and Chrome support the flex-direction property

      
  
flex-direction:row
 
 
a
 
b
 
c
 
 
flex-direction:row-reverse
 
 
a
 
b
 
c
 
 
flex-direction:column
 
 
a
 
b
 
c
 
 
flex-direction:column-reverse
 
 
a
 
b
 
c
 
  

##justify-content. Attribute

Sets or retrieves the alignment of the flexbox element in the main axis (horizontal axis) direction

When all child elements on a row in the flexbox. This property also controls alignment when an element overflows a row.

Syntax

#justify-content: flex-start | flex-end | center | space-between | space-around

flex-start: The flex box element will be aligned to the start of the row. The edge of the main start of the row's first child element will be aligned with the edge of the row's main start, while all subsequent flex items will be aligned with their previous item.

flex-end: The flex box element will be aligned to the end of the line. The edge of the main end of the row's first child element will be aligned with the edge of the row's main end, and all subsequent flex items will be aligned with its previous item.

center: The flex box element will be aligned to the middle of the row. The row's child elements will be aligned to each other and centered within the row, with the first element having as much margin from the main start position of the row as the last element has from the main end position of the row (if the remaining space is negative , then the overflow of equal lengths at both ends is maintained).

space-between: Flexbox elements will be evenly distributed in the rows. If the leftmost remaining space is negative, or the row has only one child, this value is equivalent to 'flex-start'. In other cases, the first element's margin is aligned with the line's main start margin, while the last element's margin is aligned with the line's main end margin, and the remaining flex items are evenly distributed, and Make sure there is equal white space between the two.

space-around: The flex box elements will be evenly distributed in the row, leaving half of the spacing between sub-elements at both ends. If the leftmost remaining space is negative, or there is only one flexbox item in the row, this value is equivalent to 'center'. In other cases, the flex box items are evenly spaced, with equal white space between them, and the space before the first element and the space after the last element being half of the other white spaces.

      
  
 
a
 
b
 
c
 
 
justify-content:flex-end
 
 
a
 
b
 
c
 
 
justify-content:center
 
 
a
 
b
 
c
 
 
justify-content:space-between
 
 
a
 
b
 
c
 
 
justify-content:space-around
 
 
a
 
b
 
c
 
  

align-items property

Set or retrieve the flex box element on the cross axis Alignment in the (vertical axis) direction.

Syntax

align-items: flex-start | flex-end | center | baseline | stretch

flex-start: The boundary of the starting position of the cross axis (vertical axis) of the flex box element is close to the starting boundary of the cross axis of the row.

flex-end: The boundary of the starting position of the cross axis (vertical axis) of the flex box element is close to the end boundary of the cross axis of the row.

center: The flexbox element is centered on the cross axis (vertical axis) of the row. (If the size of the row is smaller than the size of the flexbox element, it will overflow the same length in both directions).

baseline: If the inline axis and side axis of the flex box element are the same, this value is equivalent to 'flex-start'. Otherwise, this value will participate in baseline alignment.

stretch: If the attribute value specifying the cross-axis size is 'auto', its value will make the size of the item's margin box as close as possible to the size of the row, but at the same time it will comply with 'min/max-width/height' 'Attribute restrictions.

      
  
align-items:flex-start
 
 
a
 
b
 
c
 
 
align-items:flex-end
 
 
a
 
b
 
c
 
 
align-items:center
 
 
a
 
b
 
c
 
 
align-items:baseline
 
 
a
 
b
 
c
 
 
align-items:strecth
 
 
a
 
b
 
c
 
  

flex-wrap property

Sets or retrieves the child elements of the flex box object Whether to wrap when exceeding the parent container.

Syntax

flex-wrap: nowrap | wrap | wrap-reverse

nowrap: Do not wrap when the child element overflows the parent container.

wrap: Automatically wrap when the child element overflows the parent container.

wrap-reverse: Reverse the wrap arrangement.

      
  
 
a
 
b
 
c
 
 
flex-wrap:wrap
 
 
a
 
b
 
c
 
 
flex-wrap:wrap-reverse
 
 
a
 
b
 
c
 
  

align-content property

Sets or retrieves the flex box stacking telescopic row Alignment.

Syntax

align-content: flex-start | flex-end | center | space- between | space-around | stretch

flex-start: Each row is stacked toward the starting position of the flex box container. The cross-axis starting edge of the first row in the flexbox container is adjacent to the cross-axis starting edge of the flexbox container, and each subsequent row is adjacent to the previous row.

flex-end: Each row is stacked toward the end of the flex box container. The cross-axis end boundary of the last row in the flexbox container is close to the cross-axis end boundary of the flexbox container, and each subsequent row is close to the previous row.

center: Each row is stacked toward the middle of the flexbox container. The rows are aligned two by two and are centered in the flex container, maintaining the distance between the starting content edge of the flex container and the first row and the distance between the ending content edge of the container and the last row. The distance is equal. (If the remaining space is a negative number, the rows will spill out an equal distance in both directions.)

space-between: Rows are evenly distributed within the flexbox container. If the remaining space is negative or there is only one row in the flex container, this value is equivalent to 'flex-start'. In other cases, the first row's cross-axis start edge is against the flex container's cross-start content edge, the last row's cross-axis end edge is against the flex container's cross-end content edge, and the remaining The rows are arranged in the flexbox window in such a way that the space between them is equal.

space-around: Each row is evenly distributed in the flexbox container, leaving half of the space between sub-elements at both ends. If the remaining space is negative or there is only one row in the flexbox container, this value is equivalent to 'center'. In other cases, the rows are arranged in the flexbox container in such a way that the space between them is equal, and the space before the first row and after the last row is half the space of the other rows.

stretch: Each row will stretch to take up the remaining space. If the remaining space is negative, this value is equivalent to 'flex-start'. In other cases, the remaining space is divided equally among all rows to expand their cross-axis size.

      
  
align-content:flex-start
 
 
a
 
b
 
c
 
d
 
e
 
f
 
 
align-content:flex-end
 
 
a
 
b
 
c
 
d
 
e
 
f
 
 
align-content:center
 
 
a
 
b
 
c
 
d
 
e
 
f
 
 
align-content:space-between
 
 
a
 
b
 
c
 
d
 
e
 
f
 
 
align-content:space-around
 
 
a
 
b
 
c
 
d
 
e
 
f
 
 
align-content:strecth
 
 
a
 
b
 
c
 
d
 
e
 
f
 
  

order property

Sets or retrieves the occurrence of child elements of the flexbox model object Order.

Syntax

order:

: Use integer values to define the sort order, with smaller values listed first. Can be negative.

      
  
 
a
 
b
 
c
 
d
 
e
 
  

align-self attribute

Sets or retrieves the flex box element itself on the side Alignment along the axis (vertical axis).

Syntax

align-self: auto | flex-start | flex-end | center | baseline | stretch

auto: If the value of 'align-self' is 'auto', its calculated value is the 'align-items' value of the element's parent element, if it has no parent element, The calculated value is 'stretch'.

flex-start: The boundary of the starting position of the cross axis (vertical axis) of the flex box element is close to the starting boundary of the cross axis of the row.

flex-end: The boundary of the starting position of the cross axis (vertical axis) of the flex box element is close to the end boundary of the cross axis of the row.

center: The flexbox element is centered on the cross axis (vertical axis) of the row. (If the size of the row is smaller than the size of the flexbox element, it will overflow the same length in both directions).

baseline: If the inline axis and side axis of the flex box element are the same, this value is equivalent to 'flex-start'. Otherwise, this value will participate in baseline alignment.

stretch: If the attribute value specifying the cross-axis size is 'auto', its value will make the size of the item's margin box as close as possible to the size of the row, but at the same time it will comply with 'min/max- width/height' attributes.

      
  
 
a
 
b
 
c
 
d
 
e
 
f
 
g
 
h
 
i
 
  

flex property

Composite property. Sets or retrieves how the child elements of the flex box object allocate space.

If the abbreviation flex:1, its calculated value is: 1 1 0

Syntax

flex: none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

##none: Calculation of none keyword The value is: 0 0 auto

[ flex-grow ]: Defines the expansion ratio of the flex box element.

[ flex-shrink ]: Define the shrinkage ratio of the flex box element.

[ flex-basis ]: Defines the default basis value of the flex box element.

      
  
 
flex:1;
 
flex:1;
 
flex:1;
 
 
 
flex:1 0 100px;
 
flex:2 0 100px;
 
flex:3 0 100px;
 
 
 
flex:1 1 400px;
 
flex:1 2 400px;
 
flex:1 2 400px;