flex布局

最新推荐文章于 2024-08-10 17:13:35 发布

碵蝎

最新推荐文章于 2024-08-10 17:13:35 发布

阅读量1.2k

点赞数

分类专栏： css/css3

本文链接：https://blog.csdn.net/QQ408896436/article/details/79361324

版权

css/css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

如何使用flex布局？

设置父容器为display:fiex，如：

<!DOCTYPE html>
<html>
<head>
    <style>
        .f1{
            width: 500px;
            border: 2px solid #aaaaaa;
        }
        .f2,
        .f3,
        .f4{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
        .f3{
            background-color: yellowgreen;
        }

        .f1{
            display: flex; <!--这里！-->
        }
    </style>
</head>
<body>
   <div class="f1">
        <div class="f2"></div>
        <div class="f3"></div>
        <div class="f4"></div>
        <div class="f3"></div>
        <div class="f4"></div>
        <div class="f3"></div>
   </div>
</body>
</html>

运行效果：

flex布局特性

当父元素装不下子元素时，子元素会被缩放。（如上面的例子）不管我增加多少个子元素，都能在一行内展示。

设置子元素不缩放

使用flex-shrink属性，可以设置子元素不缩放。如：

<!DOCTYPE html>
<html>
<head>
    <style>
        .f1{
            width: 500px;
            border: 2px solid #aaaaaa;
        }
        .f2,
        .f3,
        .f4{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            flex-shrink: 0; <!--0为不缩放，1为缩放。默认值是1-->
        }
        .f3{
            background-color: yellowgreen;
        }
        .f1{
            display: flex;
        }
    </style>
</head>
<body>
   <div class="f1">
        <div class="f2"></div>
        <div class="f3"></div>
        <div class="f4"></div>
        <div class="f3"></div>
        <div class="f4"></div>
        <div class="f3"></div>
   </div>
</body>
</html>

子元素在主轴的排列方式（主轴： x轴、水平方向）

子元素在主轴的排列方式有4种，分别是：

row：从左向右（默认这个~~）

row-reverse从右往左：从右往左

column：从上往下

column-reverse：从下往上

下面我们以子元素“从右往左”排列举一个例子：

<!DOCTYPE html>
<html>
<head>
    <style>
        .f1{
            width: 800px;
            height: 200px;
            background-color: #cccccc;
            display: flex;
            flex-direction:row-reverse; <!--子元素从右往左排列-->
        }
        .item{
            width: 200px;
            height: 200px;
            border: 1px dashed #333333;
            box-sizing: border-box;
            font-size: 40px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
   <div class="f1">
       <div class="item">1</div>
       <div class="item">2</div>
       <div class="item">3</div>
       <div class="item">4</div>
   </div>
</body>
</html>

子元素在主轴上的对其方式

子元素在主轴上对其方式有5种，分别是：

flex-start：靠近起点

center ：居中

flex-end ：靠近终点

space-between ：两端对齐

space-around ：每个子元素两侧的间隔都相等

例子：

<!DOCTYPE html>
<html>
<head>
    <style>
        .f1{
            
            width: 800px;
            background-color: #cccccc;
            display: flex;
            flex-direction: row;   
            justify-content: space-between; <!--两端对齐-->
        }
        .item{
            width: 200px;
            height: 200px;
            border: 1px dashed #333333;
            box-sizing: border-box;
            font-size: 40px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
   <div class="f1">
       <div class="item">1</div>
       <div class="item">2</div>
       <div class="item">3</div>
   </div>
</body>
</html>

子元素在交叉轴的对其方式（交叉轴：y轴、竖直方向）

子元素在交叉轴的对其方式有3种，分别是：

flex-start：起点（默认是这个~~）

center：居中

flex-end：终点

下面我们以子元素“居中”对其举一个例子：

<!DOCTYPE html>  
<html>  
<head>  
    <style>  
        .f1{  
            width: 800px;  
            height: 200px;  
            background-color: #cccccc;  
            display: flex;  
            align-items: center;  <!--子元素居中对其-->
        }  
        .item{  
            width: 200px;  
            height: 50px;  
            border: 1px dashed #333333;  
            box-sizing: border-box;  
            font-size: 40px;  
            text-align: center;  
            line-height: 50px;  
        }  
    </style>  
</head>  
<body>  
   <div class="f1">  
       <div class="item">1</div>  
       <div class="item">2</div>  
       <div class="item">3</div>  
       <div class="item">4</div>  
   </div>  
</body>  
</html>

子元素换行方式

当子元素超出父元素的宽度时，默认是不换行的，子元素各个会被缩放。这里可以使用flex-wrap属性，设置子元素如何换行。

flex-wrap有2个值，分别是：

wrap：最后一个元素会被挤下来

wrap-reverse：最后一个元素会被挤上去

例子：

<!DOCTYPE html>
<html>
<head>
    <title>flex换行</title>
    <style>
        .f1{
            width: 800px;
            background-color: #cccccc;
            display: flex;
            flex-direction: row;   
            flex-wrap: wrap-reverse; <!--最后一个元素会被挤上去-->
        }
        .item{
            width: 200px;
            height: 200px;
            border: 1px dashed #333333;
            box-sizing: border-box;
            font-size: 40px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
   <div class="f1">
       <div class="item">1</div>
       <div class="item">2</div>
       <div class="item">3</div>
       <div class="item">4</div>
       <div class="item">5</div>
   </div>
</body>
</html>

子元素排序

使用order属性，可以为某个子元素设置排序。数值越小，排序越靠前，默认为0

例子：

<!DOCTYPE html>
<html>
<head>
    <style>
        .f1{
            width: 800px;
            height: 200px;
            background-color: #cccccc;
            display: flex;
            flex-direction: row;   
        }
        .item{
            width: 200px;
            height: 200px;
            border: 1px dashed #333333;
            box-sizing: border-box;
            font-size: 40px;
            text-align: center;
            line-height: 200px;
        }
        .ff{
            order: -1; <!--这里-->
        }
    </style>
</head>
<body>
   <div class="f1">
       <div class="item">1</div>
       <div class="item">2</div>
       <div class="item ff">3</div>
   </div>
</body>
</html>

运行效果：