css弹性盒模型详解----flex-wrap

最新推荐文章于 2023-04-27 18:15:08 发布

旧城空巷旧心

最新推荐文章于 2023-04-27 18:15:08 发布

阅读量2.3k

点赞数

分类专栏： css 文章标签：弹性盒模型 flex css3

本文链接：https://blog.csdn.net/qq_34451947/article/details/103049274

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本篇文章详细介绍flex-wrap

		flex-wrap是控制盒模型容器下一级子元素的在一行显示的时候是否换行
			nowrap（默认值）：不换行
			wrap：自动换行
			wrap-reverse：换行，第一行在下方。

//第一条属性 默认的nowrap 不换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .flex-box{
            width: 1000px;
            margin: 0 auto;
            background-color: #ccc;
            display: flex;
           
        }
       
        .box{
            width: 400px;
            height: 100px;
            background-color: red;
            color: blue;
            margin-right: 50px;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div class="box">1111111</div>
        <div class="box">222222</div>
        <div class="box">3333</div>
    </div>
</body>
</html>

//说明  从代码中可以看出三个三个总宽度是1200px+150px  父元素的宽度是1000  当出现这样的情况 不是会出现子元素溢出父元素  而是三个子元素自动等比例缩放了

效果演示如下：

展示效果

//第二条属性 wrap 换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .flex-box{
            width: 1000px;
            margin: 0 auto;
            background-color: #ccc;
            display: flex;
            flex-wrap:wrap;
        }
       
        .box{
            width: 400px;
            height: 100px;
            background-color: red;
            color: blue;
            margin-right: 50px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div class="box">1111111</div>
        <div class="box">222222</div>
        <div class="box">3333</div>
    </div>
</body>
</html>

效果演示如下:

效果演示

//第三条属性wrap-reverse：换行，第一行在下方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .flex-box{
            width: 1000px;
            margin: 0 auto;
            background-color: #ccc;
            display: flex;
            flex-wrap: wrap-reverse;
           
        }
       
        .box{
            width: 400px;
            height: 100px;
            background-color: red;
            color: blue;
            margin-right: 50px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div class="box">1111111</div>
        <div class="box">222222</div>
        <div class="box">3333</div>
    </div>
</body>
</html>

效果演示如下：

效果演示

旧城空巷旧心

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css弹性盒模型详解----flex-wrap

本篇文章详细介绍flex-wrap flex-wrap是控制盒模型容器下一级子元素的在一行显示的时候是否换行 nowrap（默认值）：不换行 wrap：自动换行 wrap-reverse：换行，第一行在下方。//第一条属性默认的nowrap 不换行<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫