当前位置：网站首页>Flex layout

Flex layout

2022-07-24 06:29:00 【PS notes】

Flex Layout

Elastic box layout

Basic concepts ： First set the element to display:flex; The element becomes a flex Containers

The elements inside the container are flex Element or flex project （flex-item）

I learned before ：Display:none Set element hide

Display：block; Can be converted into block elements

Display：inline;  Set to inline elements 

<style>
    .container {
        display: flex;
        background-color: yellow;
        width: 800px;
        height: 300px;
    }
    .item{
        width: 100px;
        /* height: 100px; */
        background-color: red;
        border: 1px solid blue;
    }
</style>
<body>
    <div class="container">
        <div class="item">123</div>
        <div class="item">456</div>
        <div class="item">789</div>
    </div>
</body>
</html>

Main axis: Spindle

Cross axis： Cross shaft

Default ：

Flex The project in flex The container is arranged along the main axis

Flex The project is highly adaptable flex Container height （ Intra peer elements ）

Set up flex Containers ：

Flex-direction:  Set up flex Item arrangement direction

Jusrif-content:  flex Arrangement of project spindles

Align-items:    flex Arrangement of project cross axes

Flex-direction：

Row( The default value is )： The principal axis is horizontal , The starting point is on the left

Row-reverse: The principal axis is horizontal , The starting point is on the right

Column： The principal axis is perpendicular , The starting point is at the top

Column-reverse： The principal axis is perpendicular , Starting edge 

<style>
    .container {
        display: flex;
        /* flex-direction: column; Horizontal to the upper left  */
        /* flex-direction:column-reverse;  Horizontal to the bottom left */
        /* flex-direction: row; Left longitudinal axis  */
        /* flex-direction: row-reverse; To the right longitudinal axis  */
        background-color: yellow;
        width: 800px;
        height: 300px;
    }
    .item{
        width: 100px;
        /* height: 100px; */
        background-color: red;
        border: 1px solid blue;
    }
</style>
<body>
    <div class="container">
        <div class="item">123</div>
        <div class="item">456</div>
        <div class="item">789</div>
    </div>
</body>
</html>

    

 Justif-content:    、    Mainly used for control flex Alignment effect .

flex-start（ Default ）： Align left

flex-end: Right alignment

center： In the middle

space-between: full-justified , The gap between items is equal

space-around： The spacing between each item is equal , So the interval between items is twice as large as that between items and borders .

<style>
    .container {
        display: flex;
        background-color: yellow;
        width: 800px;
        height: 300px;
        justify-content: flex-start;
        /* justify-content: flex-end; */
        /* justify-content: center; */
        /* justify-content: space-between; */
        /* justify-content: space-around; */
    }
    .item{
        width: 100px;
        /* height: 100px; */
        background-color: red;
        border: 1px solid blue;
    }
</style>
<body>
    <div class="container">
        <div class="item">123</div>
        <div class="item">456</div>
        <div class="item">789</div>
       
      
    </div>
</body>
</html>

 

Align-items:    

flex-start: Align the starting points of the intersecting axes ;

flex-end： The ends of the intersecting axes are aligned ：

center： Align the midpoint of the intersecting axis ;

stretch:( extend )（ The default value is ）： If the project is not set to height or set to auto, Will fill the entire container .

<style>
    .container {
        display: flex;
        background-color: yellow;
        width: 800px;
        height: 300px;
        justify-content: flex-start;
        justify-content: space-between;
        /* align-items: flex-start; */
        /* align-items: flex-end; */
        /* align-items: center; */
        align-items: stretch;
        
    }
    .item{
        width: 100px;
        /* height: 100px; */
        background-color: red;
        border: 1px solid blue;
    }
</style>
<body>
    <div class="container">
        <div class="item">123</div>
        <div class="item">456</div>
        <div class="item">789</div>
        <div class="item">123</div>
        <div class="item">111</div>
        <div class="item">222</div>
    </div>
</body>
</html>

 

 

 

flex project ：

flex-grow： Attribute defines the magnification of the item , Default 0, There's plenty of space , Equal proportion completion .

flex-shrink: It defines the reduction ratio of the project , Default 1, That is, if there is not enough space , The project will shrink

flex-basis： The spindles are arranged in width , The cross axes are arranged in height , Set up px, The default value is auto.

flex： Combine the above three styles .flex: 0 1 auto ;

align-self：flex The way of the project （auto、flex-start  、 flex-end 、center 、 baseline 、 stretch）

<style>
    .container {
        display: flex;
        background-color: yellow;
        width: 800px;
        height: 300px;
    }
    .item{
       
        background-color: red;
        border: 1px solid blue;
        flex-grow: 1;
    }
    .big{
        flex-grow: 3;
    }
</style>
<body>
    <div class="container">
        <div class="item">123</div>
        <div class="item">456</div>
        <div class="item big">789</div>
        <div class="item">123</div>
        <div class="item">111</div>
        <div class="item">222</div>
    </div>
</body>
</html>

 .big{

        width: 300px;

        /* If the whole flex Projects are all scaled down , that flex-shrink The greater the value of , The more it shrinks , The smaller it is , I don't know much about it */

        flex-shrink: 2;

    }

 .big{

        /* flex-basis The function of is to set the width when the spindle is arranged 600px, I don't often know */

        flex-basis:600px;

    }

<style>
    .container {
        display: flex;
        background-color: yellow;
        width: 800px;
        height: 300px;
    }
    .item{
       
        background-color: red;
        border: 1px solid blue;
        /*  Set the default value  */
        /* flex: 0 1 auto ; */     Add here ,0 yes flex-grow、1 yes flex-shrink、auto yes flex-basis It means .
        /* flex-shrink: 2; You can abbreviate ： */
        flex:1;
    
    }
    .big{
        /*   flex-basis:600px; You can abbreviate ： */
        flex:2;
    }
</style>
<body>
    <div class="container">
        <div class="item">123</div>
        <div class="item">456</div>
        <div class="item big">789</div>
        <div class="item">123</div>
        <div class="item">111</div>
        <div class="item">222</div>
    </div>
</body>
</html>

Case study ： Set an element vertically and horizontally centered in the container ：

<style>
    *{
        margin: 0px;
        padding: 0px;

    }
    body,html{
        height: 100%;
    }
    .container {
        background-color: yellow;
        height: 100%;
        display:flex;
        justify-content: center;
        /* align-items: center; Horizontal center  */
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: blue;
        /* align-self: center;=align-items: center; Horizontal center  */
        align-self: center;
    }
 
</style>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

The bottom menu of the web page on the right side of the case production ：

</head>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
  
   .menu{
        position: fixed;
        background-color: yellow;
        bottom: 0px;
        display: flex;
        width:100%;
        height: 70px;
        align-items: center;
    }
    .sub{
        flex:1;
        text-align: center;
    }
    .sub img{
        height: 30px;

    }
 
</style>
<body>
    <div class="menu">
        <div class="sub">
            <img src="images/open.png" alt="">
            <p> home page </p>
        </div>
        <div class="sub">
            <img src="images/error.png" alt="">
            <p> home page </p>
        </div>
        <div class="sub">
            <img src="images/success.png" alt="">
            <p> home page </p>
        </div>
        <div class="sub">
            <img src="images/open.png" alt="">
            <p> home page </p>
        </div>
        <div class="sub">
            <img src="images/close.png" alt="">
            <p> home page </p>
        </div>
    </div>
    
</body>
</html>

 

原网站

版权声明
本文为[PS notes]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/205/202207240515577348.html

边栏推荐

猜你喜欢

随机推荐