This is my second article about getting started

Flex properties

Flex properties can be divided into two categories, one written on parent elements and one written on child elements

The attributes that apply to the parent element are:

justify-content: Sets the alignment of child elements along the main axis (default horizontal axis) to apply to a single line

Justice-content: default flex-start The following properties can be set: flex-start: justify the start line of the main axis flex-end: justify the center at the end of the main axis: Flex-start =flex-end space-between: the first element is aligned with the starting line of the main axis, the last element is aligned with the end position of the main axis, and the middle element divides the remaining space equally between the two Spaces. The elements are evenly distributed and the space between the two elements is equal, while the space in front of the first element and the space behind the last element is half the space of the other blank Spaces.Copy the code

HTML code:

        <p>flex-start</p>
        <div class="box1">
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
        </div>
        <p>flex-end</p>
        <div class="box2">
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
        </div>
        <p>center</p>
        <div class="box3">
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
        </div>
        <p>space-between</p>
        <div class="box4">
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
        </div>
        <p>space-around</p>
        <div class="box5">
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
        </div>
Copy the code

The CSS code:

    .box1..box2..box3..box4..box5{
    width:100px;
    height: 100px;
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    align-self: center;
}
.content{
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid green;
}
.box1{
    justify-content: flex-start;
}
.box2{
    justify-content: flex-end;
}
.box3{
    justify-content: center;
}
.box4{
    justify-content: space-between;
}
.box5{
    justify-content: space-around;
}
Copy the code

Running results:

align-items: Sets the alignment of child elements on the cross axis (perpendicular to the main axis)

Align-itmes: stretch baseline flex-start: stretch baseline flex-start: stretch baseline flex-end: stretch baseline flex-start: stretch baseline flex-start: stretch baseline flex-start: stretch baseline flex-start: stretch baseline flex-start: stretch baseline flex-start: stretch baseline flex-start: stretch baseline flex-start: stretch baseline flex-start: The boundary of the child element's cross end boundary is immediately centered on the cross end boundary of the row: the child element is centered on the cross axis of the rowCopy the code

The CSS code:

.box1..box2..box3..box4..box5{
    width:100px;
    height: 100px;
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    align-self: center;
}
.content{
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid green;
}
.box1{
    align-items: stretch;
}
.box2{
   align-items: flex-start;
}
.box3{
    align-items: flex-end;
}
.box4{
    align-items: baseline;
}
.box5{
   align-items: center;
}
Copy the code

Running results:

flex-wrap: Sets the child to single – or multi-line display

Flex-wrap: the default value is nowrap. The following attributes can be set: nowrap: line wrap is not allowed. Wrap: line wrap is allowedCopy the code

HTML code:

        <p>nowrap</p>
        <div class="box1">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>
        <p>wrap</p>
        <div class="box2">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>
        <p>wrap-reverse</p>
        <div class="box3">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>
Copy the code

The CSS code:

.box1..box2..box3{
    width:100px;
    height: 100px;
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    align-self: center;
}
.content{
    width: 50px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid green;
}
.box1{
    flex-wrap: nowrap;
}
.box2{
    flex-wrap: wrap;
}
.box3{
    flex-wrap: wrap-reverse;
}
Copy the code

Running results:

align-content: Sets the alignment of child elements along the main axis (default horizontal axis) to apply to multiple lines

Align-content: the default value is stretch, similar to justify, except that align-content applies to multi-line elements and can be set to:  flex-start,flex-end,center,space-between,space-around,stretchCopy the code

HTML code:

        <p>stretch</p>
        <div class="box1">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>
        <p>flex-start</p>
        <div class="box2">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>
        <p>flex-end</p>
        <div class="box3">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>
        <p>center</p>
        <div class="box4">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>
        <p>space-between</p>
        <div class="box5">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>
        <p>space-around</p>
        <div class="box5">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>
Copy the code

The CSS code:

box1,.box2..box3..box4..box5..box6{
    width:100px;
    height: 100px;
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    align-self: center;
    flex-wrap: wrap;
}
.content{
    width: 50px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid green;
}
.box1{
   align-content: stretch;
}
.box2{
    align-content: flex-start;
}
.box3{
    align-content: flex-end;
}
.box4{
    align-content: center;
}
.box5{
   align-content: space-between;
}
.box6{
    align-content: space-around;
}
Copy the code

Running results:

flex-direction: Sets the spindle direction

Flex-direction: the default value is row. Properties that can be set: Row: horizontal alignment from left to right (aligned on the left) row-reverse: vertical alignment from top to bottom (aligned on the top) Column-reverse: vertical alignment from the opposite columnCopy the code

HTML code:

        <p>row</p>
        <div class="box1">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>
        <p>row-reverse</p>
        <div class="box2">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>
        <p>column</p>
        <div class="box3">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>
        <p>column-reverse</p>
        <div class="box4">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>
Copy the code

The CSS code:

.box1..box2..box3..box4{
    width:100px;
    height: 100px;
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    align-self: center;
}
.content{
    width: 50px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid green;
}
.box1{
   flex-direction: row;
}
.box2{
    flex-direction: row-reverse;
}
.box3{
    flex-direction: column;
}
.box4{
    flex-direction: column-reverse;
}
Copy the code

Running results:

Attributes that apply to child elements:

order: Fill in the number. The smaller the number is, the lower the number is displayed first. It can be negative

Order: Enter a number. The smaller the value is, the higher the value is. The value can be negativeCopy the code

HTML code:

    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
Copy the code

The CSS code:

.wrapper{
   width:600px;
   height: 400px;
   border: 1px solid red;
   box-sizing: border-box;
   display: flex;
}
.content{
   width: 200px;
   height: 200px;
   box-sizing: border-box;
   border: 1px solid green;
}
.content:nth-of-type(1) {order: 5;
}
.content:nth-of-type(2) {order: 0;
}
.content:nth-of-type(3) {order: -5;;
}
Copy the code

Running results:

align-self: Sets the way child elements are treated on the cross axis

The align - the self: the default value is auto can set properties are: auto | flex - start | flex - end | center | baseline | stretchCopy the code

The CSS code:

.box1..box2..box3..box4..box5..box6{
    width:100px;
    height: 100px;
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    align-self: center;
}
.content{
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid green;
}
.box1 .content{
   align-self: auto;
}
.box2 .content{
   align-self: flex-start;
}
.box3 .content{
    align-self: flex-end;
}
.box4 .content{
    align-self: center;
}
.box5 .content{
   align-self: baseline;
}
.box6 .content{
    align-self: stretch;
}
Copy the code

Running results:

flex-basis: corresponds to width, which defines the width of the child element

Flex-basis: the default value is auto. You can set the value and percentage to define the width of an element. If the sum of the base values of all child elements is greater than the remaining space, the remaining space is scaled based on the base values set for each itemCopy the code

HTML code:

        <div class="box1">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>
Copy the code

The CSS code:

.box1{
    width:400px;
    height: 100px;
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    align-self: center;
}
.content{
    height: 50px;
    box-sizing: border-box;
    border: 1px solid green;
}
.box1 .content:nth-of-type(1) {flex-basis: 20%;
}
.box1 .content:nth-of-type(2) {flex-basis:50%
}
.box1 .content:nth-of-type(3) {flex-basis: 200px;
}
Copy the code

Running results:

When setting thewidth“, while setbasisAnd less thanwidth, then the real wide inbasis < realWIdth < width

Without settingwidth“, setbasis, the true width of the element ismin-width, when non-newline content expands beyond the content area, it expands the container

In any case, a container that is separated by a line break, will not be compressed. Okay

flex-grow: Sets the expansion factor. If the parent container has free space, the parent container expands based on the expansion factor

Flex-grow: Defaults to 1 to define the expansion ratio with a numeric value. Negative values are not allowed to allocate the remaining space according to the expansion factor set by the child element as a ratio. The remaining width = the content area of the parent container minus the width occupied by the child element. The calculation formula is: the width of its element + the remaining width/the total expansion factor * the expansion factor occupied by itselfCopy the code

Such as:

.box1{
    width:400px;
    height: 100px;
    background-color: aqua;
    display: flex;
    align-self: center;
    border: 1px solid red;
    box-sizing: border-box;
}
.content{
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border: 1px solid green;
}
.box1 .content:nth-of-type(1) {flex-grow: 0;
    background-color: black;
}
.box1 .content:nth-of-type(2) {flex-grow: 2;
   background-color: red;
}
.box1 .content:nth-of-type(3) {flex-grow: 3;
    background-color: green;
}
Copy the code
According to the formula, we can get the remaining space =398-50*3=248px. Since we set the border of 1px, the content area of the parent container is 400-1*2=398px, and the content area of the child element is 50-1*2=48px. We divide the remaining space into 5 parts. 0:2:3 So the width of the first element is: 50+248/5*0=50px; the width of the second element is: 50+248/5*2=149.2px; the width of the third element is: 50+248/5*3=198.8pxCopy the code

Running results:

CSS code when no border is set:

.box1{
    width:400px;
    height: 100px;
    background-color: aqua;
    display: flex;
    align-self: center;
  
}
.content{
    width: 50px;
    height: 50px;

}
.box1 .content:nth-of-type(1) {flex-grow: 0;
    background-color: black;
}
.box1 .content:nth-of-type(2) {flex-grow: 2;
   background-color: red;
}
.box1 .content:nth-of-type(3) {flex-grow: 3;
    background-color: green;
}
Copy the code
According to the formula, the remaining space =400-150*3=250px width of the first element: 50+250/5*0=50px width of the second element: 50+250/5*2=150px width of the third element: 50+250/5*3=200pxCopy the code

The running results are as follows:

flex-shrink: Sets the shrink factor that compacts the child element when its content area width or height exceeds that defined by the parent container

Flex-shink: The default value is 1 to define the shrinkage ratio. Negative values are not allowed to shrink the space as a ratio based on the shrink factor set by the child element. Width of element = content area of element - Content area of element * Compression factor/weighting value * Overflow weighting value = Content area of element 1 * contraction factor of element 1 + content area of element 2 * contraction factor of element n + content area of element N * contraction factor of element NCopy the code

Such as:

   .box1{
   width:400px;
   height: 100px;
   background-color: aqua;
   display: flex;
   align-self: center;
  
 
}
.content{
   width: 200px;
   height: 50px;
   

}
.box1 .content:nth-of-type(1) {flex-shrink: 1;
   background-color: black;
}
.box1 .content:nth-of-type(2) {flex-shrink: 3;
  background-color: red;
}
.box1 .content:nth-of-type(3) {flex-shrink: 4;
   background-color: green;
}
Copy the code
According to the formula, it can be concluded that: overflow =200*3-400=200px Weighted value =200*1+200*3+200*4=1600px The compressed size of the first element is: 200-200*1/1600*200=200-25=175px similarly, the second is: 200-200*3/1600*200=200-75=125px 200-200*4/1600*200=200-100=100px;Copy the code

Running results: