CSS3 new feature styles

background

background-origin

We know the size of the box is made up of three parts: border, padding, and content, so when we set the background image, will the image be aligned with the top left corner, but with the top left corner of the border or with the top left corner of the padding or the top left corner of the content? Border-origin is used to set this, and it has three optional values

  • border-box
  • padding-box
  • content-box

The meaning can be understood without explanation. If not set, the default is padding-box, with the upper left corner of the padding as the origin.

background-clip

This property is used to set the range of the background (background image, background color) extension. There are four values to choose from

  • Border-box: Background extends to the outer edge of the border (but below the border)
  • Padding-box: The background extends to the outer edge of the padding and is not drawn to the border
  • Content-box: The background is cropped to the outer edge of the content box
  • Text: The foreground color where the background is cropped to the text

For details, please refer to background-clip, here to demonstrate the above effect

background-size

Background-size specifies the background image size. The background size of a single image can be specified in one of three ways:

  • Use the keyword contain
  • Use the keyword cover
  • Set width and height values

Setting the specified width and height values probably needs no introduction. Contain and cover will scale the image in the same scale so that the image can be contained to the maximum or cover the minimum background area.

If background area (determined by the background – origin) the aspect ratio of width to height ratio and the picture is the same, then cover and contain the result is the same, will completely cover the background area and the full display.

A border

Border with rounded corners

You can use border-radius to set the border to be rounded. The value of border-radius is the radius of the border.

width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 20px;
background-color: pink;
Copy the code

As with padding, take different numbers of values to represent the radius of the rounded corner set in different places, such as

The number of values Set up the
For example, border-radius: 20px Set the fillet radius for all four corners to 20px
Two, for example, border-radius: 10px 20px Set the upper left and lower right diagonals to 10px and the other diagonals to 20px
Three, e.g. Border-radius: 10px 20px 30px Set the upper left corner to 10px, the upper and lower left diagonals to 20px, and the lower right corner to 30px
4, e.g. Border-radius: 5px 10px 15px 20px Start at the top left and work clockwise, 5px at the top left, 10px at the top right…

From the first figure, we can find that the radius is also divided into horizontal radius and vertical radius. These two can also be set separately and separated by/as two groups. The first set the horizontal radius and the second set the vertical radius, as shown in

width: 100px;
height: 120px;
margin: 0 auto;
border-radius: 50px / 60px; 
background-color: pink;
Copy the code

We set the horizontal radius of the four corners to 50px and the horizontal radius of the four corners to 60px. The result is as follows

If not set separately, the horizontal and vertical radii are the same by default.

If you want a more detailed understanding, here recommended a ruan Yifeng web log CSS3 rounded border.

Border images

Find the correct use of border-image in a well-written blog post, so I won’t write it myself.

shadow

Shadow box

To find out what a box shadow is, watch the following effect

Here I chose the method of millet, because the color of the set shadow is relatively light, so it may be difficult to see.

The property used to set the box shadow is box-shadow, which has a large number of values, so the values need to be set are as follows:

  • The level of the shadow
  • Vertical shadow
  • Fuzzy distance (virtual and real)
  • Shadow size (Shadow size)
  • Shadow color
  • Inner/outer shadows

H-shadow and V-shadow are required.

To see the effect of setting these values, let’s first create a box

width: 200px;
height: 200px;
border: 1.px solid #CCC;
margin: 100px auto;
Copy the code

Add a shadow to the box

box-shadow: 1.px 1px 1px 1px red;
Copy the code

Effect of horizontal shadow size (positive, shadow moves to the right, negative, shadow moves to the left)

Effect of vertical shadow size (positive, shadow moves down, negative, shadow moves up)

The effect of fuzzy distance

Influence of shadow size

Text shadow

Use text-shadow to set the text shadow. Use the same as box-shadow, see text-shadow for details.

CSS 3 selector

CSS3 adds a number of selectors, giving us more flexibility in selecting elements.

Property selector

  • [attr] : Select the tag that contains the ATTR attribute
  • [attr=value] : indicates the tag whose attR attribute value is value
  • [attr^=value] : Select the tag whose attR attribute value starts with value
  • [attr*=value] : select the tag whose attR attribute value contains value
  • [attr$=value] : indicates the tag that selects the value of the ATTR attribute

Such as

div[class] {
    /* Select the div tag */ that contains the class attribute
}
div[class="active"] {
    /* Select div tag */ with class attribute value active
}
div[class^="header"] {
    /* Selects the div tag */ with the class attribute beginning with header}... .Copy the code

Structure pseudo-class selector

  • E:first-child
  • E:last-child
  • E:nth-child(n)
  • E:nth-last-child(n)
  • E:first-of-type
  • E:last-of-type
  • E:nth-of-type(n)
  • E:nth-last-of-type(n)

The above selector is one of the more common structural pseudo-class selectors. Here’s what it means.

E:first-child means select E if it is the first child of its parent element. That sounds a little convoluting. Let’s do an example

<div>
    <span></span>
    <h1></h1>
    <p></p>
</div>
<div>
    <i></i>
    <span></span>
    <h1></h1>
    <p></p>
</div>
Copy the code
span:first-child {
    /* It selects span, provided that the span is the first child of its parent element */
}
Copy the code

Since the span in the first div is the first child of its parent (the first div), the span in the first div is selected. The span in the second div is not the first child of its parent (the second div), so the span will not be selected.

E:last-child = E:first-child

E:nth-child(n) is E:nth-child(1). E:first-child is E:nth-child(1). The “n” in E:nth-child(n), in addition to being a specific number, can also be odd and even, which means to select all the E’s that are the odd or even of their parent element. In addition, “n” can also be an expression, such as 2n+1, 3n(n starts at 1).

E:nth-last-child(n) n :nth-last-child(n) n :nth-last-child(n) n :nth-last-child(n)

E:first-of-type is different from E:first-child, which means the first E element under the selector’s parent element. Again, let’s take the above two divs

<div>
    <span></span>
    <h1></h1>
    <p></p>
</div>
<div>
    <i></i>
    <span></span>
    <h1></h1>
    <p></p>
</div>
Copy the code
span:first-of-type {
    /* Select the first span element */ under the span parent
}
Copy the code

In this case, both spans can be selected. First-of-type is equivalent to extracting all the E contained in the parent element of E, and then selecting. Now we’re going to pull out all the span that div contains, which is equal to

<div>
    <span></span>
</div>
<div>
    <span></span>
</div>
Copy the code

Then select the first span, so both spans can be selected to. First-last-type, nth-of-type(n), nth-last-of-type (n), nth-last-of-type (n), nth-last-of-type (n)… The difference between fitst-child and first-of-type has been explained in detail.

CSS3 Color gradient

Color gradient refers to a smooth transition between two colors. In the past, if we wanted a gradient effect, we would design the desired effect in a drawing tool (such as Photoshop) and then use it as an image to achieve the effect. It is now rendered in the browser, which reduces download time and bandwidth usage, and looks better when zoomed in because it is automatically generated by the browser.

Linear gradient

Linear gradient refers to the smooth change of color along a line. To achieve linear gradient, we need to specify the direction of the line, the starting color and the ending color. Its syntax is

background-image: linear-gradient(direction.color-stop1.color-stop2,...). ;Copy the code

Such as


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .box {
            width:100%;
            height:100px;
            background-image: linear-gradient(to right, red, green);
        }
    </style>

</head>
<body>
    <div class="box">

    </div>
</body>
</html>
Copy the code

Effect of

Among them

linear-gradient(to right.red.green);
Copy the code

The first parameter, to right, is used to set the direction

  • From left to right
  • A. to left B. right TO left c. right to left d. right to left
  • To the top
  • To bottom: from the top down, default
  • 2. I’m going from the top left to the bottom right
  • . .

In addition to setting these values, you can also set angles, such as

linear-gradient(0deg.red.green);
Copy the code

The directions represented by the angles are shown below

So 0deg is from the bottom up.

In addition to setting the start and end colors, you can also set multiple color nodes between them, such as a rainbow gradient set below

background-image: linear-gradient(to right.red.orange.yellow.green.blue.indigo.violet);
Copy the code

In addition, you can add a number or percentage to the color, e.g

background-image: linear-gradient(to right.red.blue 10%, violet);
Copy the code

Blue 10% indicates that the blue color node is 10% of the linear direction, so the gradient from 0% to 10% is red to blue, and the gradient from 10% to 100% is blue to purple.

The last feature of gradients is gradient repetition. Here’s an example

/* Set it to 23% and not to a number that is divisible by 100%
repeating-linear-gradient(to right.red.yellow23%).Copy the code

The above means a gradient of red to yellow from 0-23%, then repeat until 100%.

Radial gradient

Radial gradient refers to a point as the center of the circle, outward color gradient. So in order to achieve radial gradient, we need to specify the location of the center of the circle and the starting and ending colors. The syntax for radial tween is

background-image: radial-gradient(shape size at position.start-color. .last-color);
Copy the code

Shape is the gradient shape, and there are two values

  • Circle (round)
  • Ellipse (the default)

Size refers to the length represented by 100% and has four values

  • Closest side
  • The distance from the farthest side
  • Cloest-corner (distance to the nearest corner)
  • Apoapsis -corber(distance from farthest Angle, default)

Position refers to the center of the circle. The default value is center, which can also be set at 100px 100px. The upper left corner is (0px, 0px).

.box {
    width:400px;
    height:200px;
    /* Set size to the nearest edge */
    background-image: repeating-radial-gradient(circle closest-side at 200px 100px, red, red 10%,green 12.5%, green 25%)}Copy the code

You can see that the nearest edge has 4 complete repeats.

/* Set size to the distance from the furthest edge */
background-image: repeating-radial-gradient(circle farthest-side at 200px 100px.red.red 10%,green 12. 5%, green 25%)
Copy the code

You can see that the farthest side has 4 complete repeats.

/* In order to make the distance between the farthest Angle and the nearest Angle different, the position cannot be set in the center */
/* Set size to the nearest Angle */
background-image: repeating-radial-gradient(circle closest-corner at 100px 100px.red.red 10%,green 12. 5%, green 25%)
Copy the code

The nearest Angle has four complete repeats.

/* Set size to the distance */ from the farthest Angle
background-image: repeating-radial-gradient(circle farthest-corner at 100px 100px.red.red 10%,green 12. 5%, green 25%)
Copy the code

The farthest Angle has four complete repeats.

The range of 2 d transformation

CSS3 2D transformations involve moving, scaling, rotating, stretching, or stretching elements.

  • Translate () : Moves the element

    • Translate (100px) : Move elements in the x positive direction by 100px(negative elements in the negative direction).
    • Translate (100px, 100px) : Move the elements 100px in the x, y positive direction

  • Scale () : Scales an element

    • Scale (n) : Scale the element. If the parameter is greater than 1, zoom in. If the parameter is less than 1, zoom out
    • Scale (x, y) : The first parameter scales the width, and the second value scales the height

  • Rotate () : rotates around the center, with positive values clockwise and negative values counterclockwise

    • Transform-origin: Can change the center of a rotation, as in

      /* Rotate around the upper left corner */
transform-origin: left top;
Copy the code
      /* Rotate the center to the default value */
transform-origin: 50% 50%;
Copy the code

  • Skew () : Skews the element

    • Skew (Angle) : skew in the negative direction of the X-axis (negative value along the positive direction)
    • Skew (Anglex, Angley) : The first parameter is for the x direction and the second parameter is for the y direction

In addition to being able to set using the above properties, translateX(), translateY(), and so on can also be used.


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            width: 100px;
            height: 100px;
        }

        /* Set the color for each div */
        .box1 {
            background-color: red;
        }
        .box2 {
            background-color: aqua;
        }
        .box3 {
            background-color: chocolate;
        }
        .box4 {
            background-color: darkcyan;
        }

        /* Set a different 2D transformation effect for each box */
        .box1:hover {
            transform: translateX(100px);
        }
        .box2:hover {
            transform: scale(0.5);
        }
        .box3:hover {
            transform: rotate(-30deg);
        }
        .box4:hover {
            transform: skew(30deg);
        }
    </style>

</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>  
</body>
</html>
Copy the code

CSS3 3D

The operation of 3D transformation is the same as that of 2D, except for the z-axis operation, such as translateZ(). Rotate is also divided into rotateX(), rotateY(), and rotateZ(), which means rotation around the X-axis, Y-axis, and z-axis respectively. Rotate () for the 2D transformation is essentially rotateZ().

CSS 3 animation

transition

Let’s start with an example

.box {
    height: 100px;
    width: 100px;
    background-color: black;
}
.box:hover {
    transform: translateX(600px);
}
Copy the code

When we place the mouse over the box, the box moves 600px to the right, but this process is instantaneous and very abrupt. We want a slow transition from one state to another. This effect is called a transition, so we use the Transition property.

To add a transition effect to an element, you must specify two things:

  • Transition-property: Specifies the CSS property to which you want to add the effect

For example, we need to add a transition effect to transform, so we can write as

The /* value can be used to add a transition effect for all properties. The default value is all*/
transition-property: transform;
Copy the code
  • Transition-duration: Adds the total duration of the transition
The default value is 0s */
transition-duration: 1.s; /* The unit can be s */
transition-duration: 100ms; /* The unit can also be ms */
Copy the code

In addition to the two properties you must set above, you can set the following properties

  • Transition-timing: A time function that sets the speed of transition
    • Ease: slow to start and end, fast in the middle, default.
    • Linear: Constant speed.
    • Ease-in: Start slowly.
    • Ease-out: End slowly.
    • Ease-in-out: Similar to but larger than ease.

In addition to the above keywords, you can also set the steps() function with the following syntax:

steps(<integer>[,start | end]?).Copy the code

The first argument is passed an integer value, and the steps function runs the transition time in equal-sized intervals. This integer value is the split. The second value is optional and defaults to end. If it is start, the start value is not retained, and if it is end, the start value is retained.

Here is an example of an animation using the steps() function.

  • Transition-delay: indicates the delay time. The default value is 0s

animation

Like transition, an animation has many properties

  • Animation-name: specifies the name of an animation
  • Animation-duration: specifies the duration of an animation
  • Animation-timing: animation-timing function
  • Animation-delay: animation delay time
  • Animation-iteration – Count: The number of times an animation is executed. This can be set to an integer or to infinite, meaning an infinite loop
  • Animation-direction: animation execution direction
  • Animation-paly-state: indicates the animation playing state
  • Animation-fill-mode: animation-fill mode

Transition is between two states, while animation is between multiple states, these states we call keyframes, so animation is also called keyframe animation. To use an animation, first create a keyframe and then call the animation using animation-name, as in

 
      
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 
     <style>
         .box {
             width: 100px;
             height: 100px;
             background-color: aqua;
         }
         
         .box:hover {
            animation-name: move;
            animation-duration: 1s;
         }

        /* Create a keyframe animation named move */
        /* Use animation-name: move call */
         @keyframes move {
             /* The first state 0% can be used instead of */
             /* Where the percentage is the total time * % of the state */
             0% {
                 transform: translateX(0px); 50%} {transform: translateX(100px);
             }

             /* 100% can use to instead of */
             100% {
                 transform: translateY(100px); }}</style>
 
 </head>
 <body>
    <div class="box">
         
    </div>
 </body>
 </html>
Copy the code

We can also set the number of times the animation is executed, changing the above style to

.box {
    width: 100px;
    height: 100px;
    background-color: aqua;
    animation-name: move;
    animation-duration: 1s;
    /* The default value is 1 */
    animation-iteration-count: infinite;
}
Copy the code

We find that after the animation is executed, the box suddenly returns to its original position. This process is a little abrupt, and we want this process to be slow, so we can set animation-direction. There are four values for animation-direction

  • Normal: The default value can be played normally
  • Reverse: Indicates the reverse playback
  • Alternate: If the animation occurs two or more times, the even number of times is played in reverse, enabling the effect of the transition when the animation returns to its original position. If the animation is played only once, it is the same as playing forward.
  • Alternate-reverse: The same as if the animation is played only once. If more than two times are played, the even number of times is played forward
.box:hover {
   animation-name: move;
   animation-duration: 1s;
   animation-iteration-count: 2;
   animation-direction: alternate;
}
Copy the code

Animation-play-state Specifies the animation playing state. There are two values

  • Running: Default value, animation running
  • Paused: Animation paused

Change the style to

.box {
    width: 100px;
    height: 100px;
    background-color: aqua;
    animation-name: move;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
         
.box:hover {
    /* Pause the animation when the mouse is over */
   animation-play-state: paused;
}
Copy the code

Animation-fill-mode defines the action before the start frame and after the end frame of an animation. There are four values

  • None: The default value. After the animation is over, the element moves to its initial state (not necessarily the 0% state, but the attribute value of the element itself)
  • Forwards: Point at the end of the animation where the element stops (not necessarily 100%, it can move backwards)
  • Backwards: Elements can move backwards to the position they were at the start of the animation within the duration of animation-delay. If the element has no animation-delay, it has the same effect as none
  • Both forwards and forwards

Modify the style as follows

.box {
   width: 100px;
   height: 100px;
   background-color: aqua;
}
         
.box:hover {
   animation-name: move;
   animation-duration: 1s;
   /* After the animation is over, stay where the animation ended */
   animation-fill-mode: forwards;
}
Copy the code

CSS 3 flex layout

When a parent element is set to display:flex, it is an elastic layout, and the float, clear, and vertical-align properties of the child element are invalid. We call the parent element container and the child element item. What happens to the children when the parent element is set to an elastic layout? Let’s get a feel for it


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .container {
            display: flex;
            width: 500px;
            height: 400px;
            background-color: crimson;
        }

        .item {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: relative;
        }
        
        /* This is to demonstrate the convenience of the style is not important do not have to look at */
        .item div{
           width: 50%;
           height: 50%;
           position: absolute;
           /* The following three lines are used to set center alignment */
           top: 50%;
           left: 50%;
           transform: translate(50%, 50%);background-color: brown;
           /* Rounded border */
           border-radius: 50%;
           /* The next two lines set text-centered alignment */
           text-align: center;
           line-height: 50px;
           /* Set font style */
           font-size: 30px;
           font-weight: 700;
           color: white;
        }
    </style>

</head>
<body>
   <div class="container">
        <div class="item"><div>1</div></div>
        <div class="item"><div>2</div></div>
        <div class="item"><div>3</div></div>
   </div>
</body>
</html>
Copy the code

When the parent element is set to the Flex layout, the child item element is arranged on the main axis of the parent container element.

This is where the new concept of main axis comes in. The main axis of a Flex container is the X axis by default, which is left to right. Since there is a main axis, there is a cross axis, which is the Y axis by default, which is top to bottom.

Properties on container

Now let’s take a look at what flex properties to set. First set the Flex properties in container

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

Here’s an introduction.

Flex-direction is used to set the main axis and has the following four values to choose from

  • Row: Default. The main axis is horizontal and the starting point is on the left.
  • Row-reverse: The main axis is horizontal and the starting point is on the right.
  • Column: the main axis is vertical and the starting point is on the upper edge.
  • Column-reverse: the main axis is vertical and the starting point is lower.

Now let’s change the styles inside the container separately

flex-direction: row-reverse;
Copy the code

flex-direction: column;
Copy the code

flex-direction: column-reverse;
Copy the code

To demonstrate flex-wrap, we add nine items (the flex-direction is now row by default, unless otherwise stated, and we show one of its Flex properties with the other Flex properties set to default).

<div class="container">
     <div class="item"><div>1</div></div>
     <div class="item"><div>2</div></div>
     <div class="item"><div>3</div></div>
     <div class="item"><div>4</div></div>
     <div class="item"><div>5</div></div>
     <div class="item"><div>6</div></div>
     <div class="item"><div>7</div></div>
     <div class="item"><div>8</div></div>
     <div class="item"><div>9</div></div>
</div>
Copy the code

Effect of

We find 9 items in a row with no line breaks. In order for item to wrap, we need to set flex-wrap, which has three optional values

  • Nowrap: Default value, no line feeds
  • Wrap: the first line is at the top
  • Wrap-reverse: a new line, with the first line at the bottom
flex-wrap: wrap;
Copy the code

flex-wrap: wrap-reverse;
Copy the code

Flex-flow is short for the flex-direction and flex-wrap properties. The default value is row wrap

flex-flow: <flex-direction> || <flex-wrap>;
Copy the code

This is used to set the alignment of the item on the main axis of the container. The alignment depends on the direction of the main axis. Let’s assume that the main axis is left to right (row). The following values are available

  • Flex-start: left-aligned
  • Flex-end: Right alignment
  • Center: Center alignment
  • Space-between: Aligns the items at both ends and the space between items is equal
  • Space-around: Equally spaced on both sides of each project. As a result, the space between items is twice as large as the space between items and borders.

Here’s an example of space-between and space-around

justify-content: space-between;
Copy the code

justify-content: space-around;
Copy the code

Align-items define the alignment on the side axis (for example, the side axis from the top down)

  • First-start: Aligns upward
  • First-end: Aligns downward
  • Center: Center alignment
  • Baseline: Baseline alignment of the first line of text on item.
  • Stretch: default value. If no height is set or height is set to Auto, it will fill the entire container height

Here’s a demo of stretch, without height

.container {
    display: flex;
    width: 500px;
    height: 400px;
    background-color: crimson;
    align-items: stretch;
}
.item {
    width: 100px;
    /* height: 100px; * /
    background-color: aqua;
    position: relative;
}

.item div {
    /* Change the word-height to 200px to center the text */
}
Copy the code

Align-content: When flex-wrap is set to wrap or wrap-reverse, the item will occupy multiple lines. This property is used to set the alignment of multi-line items on the side axis. If there are no multiple lines, this property is invalid. The following values are available (take the side axis as an example from top to bottom)

  • First-start: Aligns upward
  • First-end: Aligns downward
  • Center: Center alignment
  • Stretch: Default value. The axis occupies the entire side axis
  • Space-between: Aligns both ends and distributes evenly between axes
  • space-around

Property on item

The following six properties are set on item

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

The order attribute defines the order in which items are arranged. The smaller the value, the higher the order. The default is 0. Now set the order of the second item to 1

.item:nth-child(2){
    order: 1;
}
Copy the code

If there is free space, flex-grow can be used to set the number of copies of the remaining space that an item takes (which causes the item to grow). The default value is 0, meaning that even if there is free space, it does not grow. Now set their respective Flex-grow

.item:first-child {
    /* The first item accounts for the remainder of 1/ (1 + 2 + 1) = 1/4 */
    flex-grow: 1;
}
.item:nth-child(2) {
    /* The second item takes up 2/4 of the remaining space */
    flex-grow: 2;
}
.item:last-child {
    /* The third item takes up 1/4 of the remaining space */
    flex-grow: 1;
}
Copy the code

Flex-shrink is the opposite of flex-grow, where items are shrunk when space is scarce so that all items are included in the container. The default value is 1, meaning that each item will scale down equally

.item:first-child {
    flex-shrink: 2;
}
.item:nth-child(2) {
    flex-shrink: 2;
}
.item:last-child {
    flex-shrink: 2;
}
Copy the code

You can see that the first, second, and last ones shrink more.

Flex-basis means the size of the item before it is put into the container. That’s the ideal or assumed size of the item. The default value is auto. If this is not set and the main axis is row, then flex-basis is the size of width. If the main axis is column, then flex-basis is the size of height. Flex-basis is the size of content. The width of the item is the final Flex-basis, and the best approach is to use only flex-basis rather than the width or height attributes.

But flex-basis doesn’t guarantee its size! Once the item is in the Flex container, the value of the Flex-basis is not guaranteed. This is due to flex-grow and Flex-shrink, which can be used to enlarge or shrink items.

In addition, flex-basis is also constrained by min-width, max-width, min-height, and max-height. See The Difference Between Width and Flex Basis for more details, and it’s definitely worth your money.

The slef-align property allows individual items to have a different alignment than other items, overriding the alignment-items property. The default value is Auto, which means that the align-items property of the parent element is inherited, and is equivalent to stretch if there is no parent element.

.container { ... . align-items: center; flex-wrap: wrap; } .item:first-child { align-self: flex-start; }Copy the code