What is the Flex layout

Flex layout can be used in any element, and when it is set to Flex layout, the float, clear, and vertical-align attributes of child elements are invalidated.

// block level elements and inline block level elements. Box {display: flex; } // The inline element span {display: inline-flex; } // Webkit kernel browsers must be prefixed with -webkit. box {display: -webkit-flex; dispaly: flex; }Copy the code

The basic concept

Elements with a Flex layout are called Flex containers, or containers for short. All of its children automatically become container members and become Flex items, or items for short.The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the main axis (where it intersects with the border) is called main start and the ending position is called main end. The intersecting axes are called cross start and cross end. By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.

Container properties

The following five properties are set on the container

  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content

3.1 Flex-direction (spindle and cross axis direction)

The flex-direction property determines the direction of the main and cross axes and has four values:

  • Row (default): The main axis is horizontal and the starting point is in the upper left, and the cross axis is vertical and the starting point is in the upper left
  • Row-reverse: The main axis is horizontal and the starting point is in the upper right, while the cross axis is vertical and the starting point is in the upper left
  • Column: The main axis is in the vertical direction and the starting point is in the upper left. The cross axis is in the horizontal direction and the starting point is in the upper left
  • Column-reverse: The main axis is in the vertical direction and the starting point is in the lower left. The cross axis is in the horizontal direction and the starting point is in the upper left

3.2 Flex-wrap (line wrap)

The flex-wrap attribute defines how to wrap a line if it does not fit on the main axis:

  • Nowrap: no newline
  • Wrap: The first line is at the top
  • Wrap-reverse: newline with the first line at the bottom

3.3 context-content (alignment of items on the main axis)

The context-content attribute defines the alignment of items on the main axis.

  • Flex-start: left-align spindle
  • Flex-end: right-align spindle
  • Center: spindle center
  • Space-between: the two ends of the spindle are aligned and the spacing between items is equal
  • Space-around: Each item has equal spacing on both sides, so the space between items is twice as large as the space between items and the border
  • Space-instituted: Evenly spaced between projects, not like space-around

3.4 align-items(alignment of items on the cross axis)

  • Stretch (default): If the project has no fixed height set, it will be stretched to fill the remaining space in the cross axis direction
  • Flex-start: Items are aligned along the start line of the cross axis
  • Flex-end: items are aligned along the cross axis finish line
  • Center: Items are centered and aligned in the cross axes
  • Baseline: The baseline alignment of the item along the first line of text in the item along the cross axis

3.5 align-content(Define alignment of multiple axes)

The ald-content property defines the alignment of multiple axes, which does not work if the project has only one axis. The ald-content property controls the alignment of multi-line items (multiple spindles). This is similar to context-content, except that align-content controls how much space is allocated between lines, and context-content controls how much space is allocated between items.

  • Stretch: Default value. The remaining space in the cross axis is evenly distributed to each row, and the height of the row is stretched to fill the entire row
  • Flex-start: All rows are aligned with the starting position of the cross axis in the direction of the cross axis
  • Flex-end: All rows are aligned in the direction of the cross axis to the end of the cross axis
  • Center: All rows are centered and aligned on the cross axis
  • Space-between: Lines in the direction of the intersecting axis are aligned at both ends, and then the spacing between the lines is equal
  • Space-around: In the direction of the intersecting axis, the remaining space is evenly allocated on either side of each row
  • Space-instituted: Evenly split the remaining space in the intersecting axes

Project attributes

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

order

The order attribute defines the order of items. The smaller the value, the more advanced it is. The default value is 0

flex-grow

The Flex-grow attribute defines the percentage of the remaining space (if any) that the project stretches in the main axis. The default is 0, that is, no expansion if there is any remaining space, and if all projects have a Flex-grow attribute of 1, they will divide the remaining space equally (if any). If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items.

flex-shrink

The Flex-shrink attribute is used to control how much a project shrinks in the main direction. The higher the number, the more shrinkage. The default is flex-shrink: 1, which is equal to shrink.

flex-basis

The Flex-basis property defines the amount of spindle space that an item occupies before allocating excess space, and is used to initialize the size of the spindle space that each item occupies

flex

The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional. This attribute has two shortcut values: auto (1 1 auto) and None (0 0 auto). It is recommended to use this attribute first.

align-self

The align-self property controls the alignment of the item itself on the intersecting axis. The priority is higher than align-items. Align-items is the container that controls the alignment of each item in the container, while align-self is the item that controls the alignment of the item itself. Default: align-self: auto; , inherits the value of align-items set by the container, and is the same as align-items except for one more auto option.

Axis is horizontal, cross axis is vertical,flex-direction reverses axis and cross axis directions, row and row-reserve are unchanged,column and column-reserve are vertical, cross axis is horizontal,flex layout is used Manipulates the arrangement of elements in a container

Flex layout is an efficient way of CSS layout, can be flexible in operation box project arrangement, disadvantages are clearly not put, sometimes line will need more line layout, but for the flex a new line is a new independent flex container, for multiple lines layout operation is not very ideal, so flex layout is also called a dimension of cloth Bureau of

Refer to the article: segmentfault.com/a/119000002… www.ruanyifeng.com/blog/2015/0…

calc()

Calc () This CSS function allows you to perform some calculations when declaring CSS property values. The calc() function takes an expression as its argument and the result of the expression as its value. The expression can be a combination of the addition, subtraction, multiplication and division operators, a simple expression using standard operator rules. The + and – operators must be flanked by whitespace characters. Calc () is literally a function with a js expression in parentheses. Calc () is best used for fluid layout.

Vw and vh

Vw and vh depend on window size,% depends on parent element size

Sticky (sticky layout)

Sticky sticky positioning can be considered as a mixture of relative positioning and fixed positioning. Before the element crosses a specific value, it is relative positioning, and then it is fixed positioning. Only when one of the four thresholds of TOP, right, bottom or left is specified, can sticky positioning take effect. Otherwise it behaves the same as relative positioning. Note that sticky will fail if the ancestor element is overflow, hidden, Scroll, auto, or overlay.

::before and ::after(pseudo-elements)

CSS pseudo-elements are called pseudo-elements because they are not real page elements. HTML has no equivalent, but they are used and behave like real page elements.::before and ::after create a pseudo-element that will become the first child of the selected element, usually with the Content attribute To add modifier content to an element. This element defaults to an inline element. The generated pseudo-elements are contained in the element box.

Q ::before {content: "«"; color: blue;} q::after {content: "»"; color: red; }Copy the code

<< some quotes >>, he said, << is better than nothing >>. .

Pseudo-element characteristic

  • The pseudo-element is not part of the document, so JS cannot manipulate it
  • The pseudo element is part of the main element, so clicking on it triggers the click event of the main element

transform

The transform property allows you to rotate, scale, tilt, or pan a given element

rotate()

Rotate defines a rotation property that rotates an element around a fixed point without deforming it. The amount of movement is defined by the specified Angle, clockwise if positive and counterclockwise if negative.

The transform: rotate in turn (0.5); transform: rotate(50%); transform: rotate(50deg);Copy the code

RotateX (), rotateY(), rotateZ() this CSS function defines ways to rotate elements on different axes without distorting them. The degree of motion is defined by the specified Angle

scale()

Scale is used to change the size of an element, and can be enlarged or reduced by x or y coordinates

transform: scale(x, y)
Copy the code

ScaleX (), scaleY(), scaleZ() This CSS function uses a constant factor to modify the different coaxial coordinates of each cell point

skew()

Skew contains two parameters, indicating the Angle of the tilt of the X axis and the tilt of the Y axis. If the second parameter is empty, the default value is 0

  • skewX(); It only tilts in the X direction.
  • skewY(); It only tilts in the Y direction.
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
Copy the code

translate()

The translate attribute is used to move elements on the plane.

transform: translate(50px,100px);
transform: translateX(120px);
transform: translateY(120px);
Copy the code

transition

The transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

Transitions can define different transitions for an element to switch between different states, such as switching between pseudo-elements :hover, :active, or state changes implemented through JavaScript.

transition-property

Transition-property Specifies the name of the transition property to apply.

transition-property: none;
transition-property: all;
transition-property: margin-right;
transition-property: width,height;
Copy the code

transition-duration

The transition-duration property specifies how long the transition animation takes in seconds or milliseconds. The default value is 0s, indicating that no transition animation is displayed.

transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;
Copy the code

transition-timing-function

The transition-timing-function property specifies the speed of the switching effect.

Linear specifies the transition effect from beginning to end at the same speed (equal to cubic-bezier(0,0,1,1)). Ease specifies the transition effect of starting slowly, then getting faster, then ending slowly (cubic- Bezier (0.25,0.1,0.25,1)). Ease-in specifies the transition effect starting at a slow speed (equal to cubic-bezier(0.42,0,1,1)). Ease-out specifies the transition effect ending at a slow speed (equal to cubic-bezier(0,0,0.58,1)). Ease-in-out specifies the transition effect of starting and ending at a slow speed (equal to cubic-bezier(0.42,0,0.58,1)). Cubic - Bezier (n,n,n,n) defines its own value in the cubic-bezier function. Possible values are between 0 and 1.Copy the code

transition-delay

The transition-delay property specifies when switching effects will begin.