Flexible layout (II)

Catalog

One 、 Axis description

Horizontal arrangement

Arrange vertically

  Two 、justify-content

  Use  space-evenly  Distribute container elements equally

  3、 ... and 、 Cross axis row

1.align-items

 2.align-content

Four 、 Elastic element

1. align-self

5、 ... and 、 Acting on sub tags 6 Big attributes

One 、 Axis description

Horizontal arrangement

Here's how to use flex-flow: row wrap Description of main axis and cross axis .

Here's how to use flex-flow: row-reverse wrap-reverse Description of main axis and cross axis .

Arrange vertically

Here's how to use flex-flow: column wrap Description of main axis and cross axis .

  Two 、justify-content

Used to control the element in Spindle The arrangement on the , Again, it is the arrangement of spindles .

Options	explain
flex-start	The element is close to the starting point of the spindle
flex-end	The element is close to the end of the spindle
center	The element starts at the center of the elastic container
space-between	The first element depends on the starting point , The last element depends on the end , The remaining elements allocate space equally
space-around	The spacing on both sides of each element is equal . therefore , The spacing between elements is twice as large as the spacing between elements and containers
space-evenly	Average distribution of distance between elements

Arrange elements horizontally , And use  justify-content: flex-end  Align to the end of the spindle

<style>
  * {
    padding: 0;
    margin: 0;
    padding: 10px;
    margin: 10px;
  }
  body {
    font-size: 14px;
    color: #555;
  }
  article {
    border: solid 5px silver;
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
  }
  article div {
    width: 80px;
    border: solid 5px orange;
    text-align: center;
    font-size: 28px;
  }
</style>
...

<article>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</article>

  Use  space-evenly  Distribute container elements equally

 flex-flow: row wrap;
 justify-content: space-evenly;

  Align to the end of the spindle when arranging vertically

 flex-flow: column wrap;
 justify-content: flex-end;

  3、 ... and 、 Cross axis row

1.align-items

Used to control the arrangement of container elements on the cross axis .

Options	explain
stretch	The elements are stretched to fit the container （ The default value is ）
center	The element is in the center of the container
flex-start	The element is at the beginning of the cross axis of the container
flex-end	The element is at the end of the cross axis of the container

（1） To arrange horizontally

      Stretch to fit the cross axis

If set width | height | min-height | min-width | max-width | max-height , Will affect stretch Result , because stretch The priority is lower than the width and height you set .

<style>
  * {
    padding: 0;
    margin: 0;
    padding: 10px;
    margin: 5px;
  }
  head {
    display: block;
  }
  body {
    font-size: 14px;
    color: #555;
  }
  article {
    height: 200px;
    border: solid 5px silver;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  article div {
    width: 80px;
    border: solid 5px orange;
    text-align: center;
    font-size: 28px;
  }
</style>
...

<article>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</article>

    Align to the top of the cross axis

flex-direction: row;
align-items: flex-start;

    Align to the bottom of the cross axis

flex-direction: row;
align-items: flex-end;

    Align to the center of the cross axis

flex-direction: row;
align-items: center;

 （2） Arrange vertically

In longitudinal arrangement, the cross axis arrangement

<style>
  * {
    padding: 0;
    margin: 0;
    padding: 10px;
    margin: 5px;
  }

  article {
    height: 400px;
    border: solid 5px silver;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  article div {
    height: 50px;
    min-width: 100px;
    border: solid 5px orange;
    text-align: center;
    font-size: 28px;
  }
</style>
...

<article>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</article>

 2.align-content

Only applicable to elastic containers with multi line display , Used to control the line （ Not the elements ） The arrangement on the cross axis .

Options	explain
stretch	Allocate space equally to elements
flex-start	The element is close to the starting point of the spindle
flex-end	The element is close to the end of the spindle
center	The element starts at the center of the elastic container
space-between	The first element depends on the starting point , The last element depends on the end , The remaining elements allocate space equally
space-around	The spacing on both sides of each element is equal . therefore , The spacing between items is twice as large as the spacing between items and the border
space-evenly	Average distribution of distance between elements

Horizontal arrangement is centered in the cross axis

<style>
        * {
            padding: 0;
            margin: 0;
            padding: 10px;
            margin: 5px;
        }

        article {
            height: 300px;
            border: solid 5px silver;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
            align-content: center;
        }

        article div {
            width: 90px;
            border: solid 5px orange;
            text-align: center;
            font-size: 28px;
        }
    </style>
.......

    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>

The arrangement of cross axes when arranged vertically

flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
align-content: center;

Four 、 Elastic element

The element placed in the container box is the container element .

• Out of commission float And clear The rules
• Elastic elements are block elements
• Elastic elements with absolute positioning do not participate in elastic layout

1. align-self

Used to control the arrangement of individual elements on the cross axis ,align-items  Used to control the arrangement of all elements in the container , and  align-self  Used to control the cross axis arrangement of an elastic element .

Options	explain
stretch	Allocate space equally to elements
flex-start	The element is close to the starting point of the spindle
flex-end	The element is close to the end of the spindle
center	The element starts at the center of the elastic container

<style>
        * {
            padding: 0;
            margin: 0;
            padding: 10px;
            margin: 5px;
        }

        article {
            height: 400px;
            border: solid 5px silver;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        article div {
            height: 50px;
            min-width: 50px;
            border: solid 5px orange;
            text-align: center;
            font-size: 28px;
        }

        article div:nth-of-type(1) {
            /*  The element is close to the starting point of the spindle  */
            align-self: flex-start;
        }

        article div:nth-of-type(3) {
            /* 	 The element is close to the end of the spindle  */
            align-self: flex-end;
        }
    </style>

...

    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>

5、 ... and 、 Acting on sub tags 6 Big attributes

1 order Property defines the order in which items are arranged . The smaller the numerical , The further up the line , The default is 0.

2 flex-grow Attribute defines the magnification of the item , The default is 0, That is, if there is any remaining space , And don't zoom in .

3 flex-shrink Attribute defines the reduction ratio of the project , The default is 1, That is, if there is not enough space , The project will shrink Set to 0, Insufficient parent space , The project will not shrink , Other children .

4 flex-basis Define the spindle space occupied by the project . If the spindle is horizontal , Set this property , Set the width of the project . primary width It will fail .

5 flex The attribute is flex-grow, flex-shrink and flex-basis Abbreviation , The default value is 0 1 auto. The last two properties are optional .

6 align-self: Define the individual project itself in On the cross axis The arrangement of , It can cover the container align-items attribute .