flex弹性盒子

最新推荐文章于 2024-07-21 21:06:06 发布

致可乐

最新推荐文章于 2024-07-21 21:06:06 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/ling_xy/article/details/109729250

版权

1.弹性盒子

给父元素设置

display :flex；
display:-webkit-flex;
设置当前元素里面子元素的模式
flex-direction:column; //列排
控制子元素在主轴方向对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around
控制子元素在侧轴方向对齐方式、
align-items: flex-start | flex-end | center
举例：

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title></title>
   <style>
       .par{
           display: flex;
           flex-direction:column;
           height: 100%;
       }
       .rows{
           flex: 1;
           border: 1px solid pink;
           display: flex;
           flex-direction: row;
           justify-content: space-around;
           align-items: center;
       }
       .column{
           width: 50px;
           height: 50px;
           border: 1px solid blue;
       }
   </style>
</head>
<body>
<div class="par">
   <div class="rows row1">
       <div class="column col1">a</div>
       <div class="column col2">b</div>
       <div class="column col3">c</div>
       <div class="column col4">d</div>
       <div class="column col5">e</div>
   </div>
</div>
</body>
</html>

在这里插入图片描述

给子元素设置

控制子元素的位置顺序
order：1；

.col1{
            order: 5;
        }
        .col2{
            order: 4;
        }
        .col3{
            order: 3;
        }
        .col4{
            order: 2;
        }
        .col5{
            order: 1;
        }

在这里插入图片描述

   弹性盒子里面的行元素  默认不折行（单行显示的）  设置wrap多行显示

默认：（行宽不够，元素被挤压，无法显示原设置宽度）在这里插入图片描述

给父元素设置flex-wrap: wrap;
在这里插入图片描述

在子元素中设置侧轴方向居中
align-self: center;

2.完美居中

父元素设置：display: flex;
子元素设置：margin: auto;``

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no"/>
    <title></title>
    <style>
        html,body,.box{
            width: 100%;
            height: 100%;
        }
        .box{
            display: flex;
        }
        .squer{
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="squer"></div>
</div>
</body>
</html>