flex布局知识总结

最新推荐文章于 2024-02-12 22:19:08 发布

码世界

最新推荐文章于 2024-02-12 22:19:08 发布

阅读量670

点赞数 1

分类专栏： css3 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_30607437/article/details/125691221

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、flex布局原理

在这里插入图片描述

2、flex布局父项常见属性

在这里插入图片描述

2.1 flex-directon设置主轴方向

在这里插入图片描述

 div{
 	 /* 给父集添加flex属性 */
	 display: flex;
     width: 800px;
     height: 300px;
     background-color: pink;
     /* 默认的主轴是x轴 行row 那么y轴就是侧轴喽 */
     /* 我们的元素是跟前辈主轴来排列的 */
     /* flex-direction: row;  */
     /* 简单了解 翻转 */
     /* flex-direction: row-reverse; */
     /* 我们可以把我们的主轴设置为y轴 那么x轴就变成了侧轴 */
     flex-direction: column;
}

2.2 justify-content设置主轴上子元素排列方向

在这里插入图片描述

div{
     /* 给父集添加flex属性 */
     display: flex;
     width: 800px;
     height: 300px;
     background-color: pink;
     /* 默认的主轴是x轴 row */
     flex-direction: row;
     /* justify-content: 设置主轴上子元素的排列方式; */
     /* justify-content: flex-start; */
     /* justify-content: flex-end; */
     /* 让子元素局中对齐 */
     justify-content: center;
     /* 平分剩余空间，有左右边距 */
     /* justify-content: space-around;*/
     /* 两边贴边,在分配剩余空间 */
     justify-content: space-between; 
 }

2.2 flex-wrap设置子元素是否换行

在这里插入图片描述

div{
   /* 给父集添加flex属性 */
   display: flex;
   width: 800px;
   height: 300px;
   background-color: pink;
   /* flex布局中,默认的子元素是不换行的,如果装不开，会缩小子元素的宽度,放到父元素里面 */
  /*flex-wrap: nowrap;*/
   flex-wrap: wrap;
}

2.3 align-items设置侧轴上子元素排列方向

说白了就是侧轴相对于主轴的变化。
在这里插入图片描述

div{
	/* 给父集添加flex属性 */
    display: flex;
    width: 800px;
    height: 300px;
    background-color: pink;
    /* 默认的主轴是x轴 行row */
    justify-content: center;
    /* 我们需要一个侧轴局中 */
    align-items: center;
    /* align-items: flex-start;
    align-items: flex-end; */
    /* 拉伸，但是子盒子不要给高度 */
    align-items: stretch;
}

2.4 align-content设置侧轴上子元素排列方向(多行)

在这里插入图片描述

div{
 	/* 给父集添加flex属性 */
    display: flex;
    width: 800px;
    height: 500px;
    background-color: pink;
    /* 换行 */
    flex-wrap: wrap;
    /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用align-content */
    /* 内容都在上面 */
    /* align-content: flex-start; */  
    /* 内容都在下面 */
    /* align-content: flex-end; */
    /* 内容都局中 */
    /* align-content: center; */
    /* 内容上下局中 */
    /* align-content: space-around; */
    /* 高度平分父元素 */
    align-content: stretch;
}

在这里插入图片描述

2.5 flex-flow是flex-direction与flex-wrap属性的复合属性

在这里插入图片描述

div{
 	/* 给父集添加flex属性 */
    display: flex;
    width: 800px;
    height:300px;
    background-color: pink;
    /* flex-direction: row;
    flex-wrap: wrap; */
    /* 是 flex-direction  与  flex-wrap 的合体 */
    flex-flow: row  wrap;
}

3、flex 布局子项常见属性

在这里插入图片描述

3.1 flex属性

在这里插入图片描述

<body>
	<style>
        section{
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }
        section div:nth-child(1){
            width: 100px;
            height: 150px;
            background-color: red;
        }
        section div:nth-child(2){
            flex: 1;
            background-color: green;
        }
        section div:nth-child(3){
            width: 100px;
            height: 150px;
            background-color: blue;
        }
        p{
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }
        /* 平均分配都为1*/
        p span{
            flex: 1;
        }
        /* 第二个盒子占两份*/
        p span:nth-child(2){
            flex: 2;
            background-color: yellow;
        }
    </style>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>

在这里插入图片描述

3.2 align-self控制子项自己在侧轴上的排列方式

在这里插入图片描述

<body>
	<style>
        div{
            /* 给父集添加flex属性 */
            display: flex;
            width: 800px;
            height:300px;
            background-color: pink;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color:purple;
            margin-right: 5px;
        }
        div span:nth-child(2){
            align-self: flex-end;
        }
    </style>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

在这里插入图片描述

3.3 order属性定义项目的排列顺序

在这里插入图片描述

<body>
	<style>
        div{
            /* 给父集添加flex属性 */
            display: flex;
            width: 800px;
            height:300px;
            background-color: pink;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: greenyellow;
            margin-right: 5px;
        }
        div span:nth-child(2){
            align-self: flex-end;
        }
        div span:nth-child(3){
            /* -1 比 0 小所以排在最前面 */
            order: -1;
        }
    </style>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

在这里插入图片描述

4 案例

在这里插入图片描述

4.1 背影渐变色

在这里插入图片描述

div{
    width: 600px;
    height: 600px;
    /* 背景渐变必须添加浏览器私有前缀 */
    /* 从左上解开始  */
    background: -webkit-linear-gradient(left,red,blue);
    /* 对角线 
        top 上
        left 左
        表示 从左上角开始
    */
    background: -webkit-linear-gradient(top left,red,blue);
}

4.2 常见flex布局思路

在这里插入图片描述

4.3 案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            max-width: 540px;
            min-width: 320px;
            margin: 0 auto;
            font: normal 16px/1.5 PingFangSC-regular,Tahoma,Lucida Grande,Verdana,Microsoft Yahei,STXihei,hei;
            color: #000;
            background: #f4f4f4;
            overflow-x: hidden;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            /* 设备尺寸的变化将会使得文本大小变化 */
            -webkit-text-size-adjust: none;
            /* 用于设置或检索是否允许用户选中文本 */
            -moz-user-select: none;
        }
        a {
            text-decoration: none;
            color: #222;
            font-size: 12px;
        }
        div {
            box-sizing: border-box;
        }
        ul { 
            list-style: none;
            margin: 0;
            padding: 0;
        }
        /* 搜索模块 */
        .search-index{
            display: flex;
            /* 固定定位跟父级没有关系,它以屏幕为准 */
            position: fixed;
            top: 0;
            left: 50%;
            /* 固定的盒子应该有宽度 */
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            width: 100%;
            max-width: 540px;
            min-width: 320px;
            height: 44px;
            background-color: #f6f6f6;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
        .search{
            position: relative;
            height: 26px;
            line-height: 24px;
            border: 1px solid #ccc;
            flex: 1;
            margin: 7px 10px;
            border-radius: 5px;
            font-size: 12px;
            color: #999;
            padding-left: 25px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        .search::before{
            content: "";
            position: absolute;
            top: 0px;
            left: -4px;
            width: 23px;
            height: 23px;
            background: url(./images/tabbar.png) no-repeat 0 -64px;
            background-size: 23px auto;
            margin:  -4px 5px;
        }
        .user{
            width: 44px;
            height: 44px;
            font-size: 12px;
            text-align: center;
            color:#666;
        }
        .user::before{
            content: "";
            display: block;
            width: 23px;
            height: 23px;
            background: url(./images/tabbar.png) no-repeat 0 -96px;
            background-size: 32px auto;
            margin:  1px 7px;
        }
        /* 焦点图模块 */
        .focus{
            margin-top:44px;
        }
        .focus img {
            width: 100%;
            /* height:130px; */
        }
        /* 局部导航栏 */
        .local-nav{
            display: flex;
            height: 64px;
            background-color: #fff;
            border-radius: 8px;
            margin: 3px 4px;
        }
        .local-nav li{
            flex: 1;
        }
        .local-nav li a{
            display: flex;
            flex-direction: column;
            /* 侧轴局中对齐 因为是单行 */
            align-items: center;
            font-size: 12px;
            line-height: 15px;
        }
        .local-nav li [class^="local-nav-icon"]{
            width: 32px;
            height: 32px;
            margin-top: 8px;
        }
        /* .local-nav li .local-nav-icon-icon2{

        } */
        /* nav */
        nav{
            border-radius: 8px;
            overflow: hidden;
            margin: 0 4px 3px;
        }
        .nav-common{
            display: flex;
            height: 88px;  
        }
        .nav-common:nth-child(2){
            margin: 3px 0;
        }
        .nav-item{
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .nav-item a{
            flex: 1;
            text-align: center;
            line-height: 44px;
            font-size: 14px;
            color: #fff;
            /* 文字阴影 */
            text-shadow: 1px 1px rgba(0,0,0,.2);
        }
        .nav-item a:nth-child(1){
            border-bottom: 1px solid #fff;
        }
        .nav-item:nth-child(1) a{
            border: 0;
            background: url(./images/hotel.png) no-repeat bottom center;
            background-size: 84px auto;
        }
        /*  n+2 ：代表从前2个开始 
            -n+2：代表选择前2个
        */
        .nav-item:nth-child(-n+2){
            border-right: 1px solid #fff;
        }
        .nav-common:nth-child(1){
            background: -webkit-linear-gradient(left,#FA5A55,#FA994D);
        }
        .nav-common:nth-child(2){
            background: -webkit-linear-gradient(left,#4B90ED,#53BCED);
        }
        .nav-common:nth-child(3){
            background: -webkit-linear-gradient(left,#34C2A9,#6CD559);
        }
        /* 侧导航栏 */
        .subnav-entry{
            display: flex;
            border-radius: 8px;
            background-color: #fff;
            margin: 0 4px;
            flex-wrap: wrap;
            padding:5px 0;
        }
        .subnav-entry li{
            /* 里面的子盒子可以写% 相对于父级来说的
            flex: 1; */
            flex: 20%;
        }
        .subnav-entry a{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .subnav-entry-icon{
            width: 28px;
            height: 28px;
            margin-top: 4px;
            background: url(./images/hotel.png) no-repeat bottom center;
            background-size: 28px auto;
        }
        /*销售模块*/
        .sale-box{
            border-top: 1px solid #bbb;
            margin: 4px;
            background-color: #fff;
        }
        .sale-hd{
            position: relative;
            height: 44px;
            border-bottom: 1px solid #ccc;
        }
        .sale-hd h2{
            position: relative;
            /* 隐藏热门活动字体 */
            text-indent: -999px;
            overflow: hidden;
        }
        .sale-hd h2::after{
            position: absolute;
            top:0px;
            left: 20px;
            content: "";
            width: 79px;
            height: 20px;
            background:url(./images/hot.png) no-repeat;
            background-size: 79px auto;
        }
        .more{
            position: absolute;
            top: 0;
            right: 8px;
            background: -webkit-linear-gradient(left,#FF506c,#FF6BC6);
            border-radius: 15px;
            padding: 3px 20px 3px 10px;
            color: #fff;
        }
        .more::after{
            content: "";
            position: absolute;
            top: 7px;
            right: 9px;
            width: 7px;
            height: 7px;
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
            transform: rotate(45deg);
        }
        .row{
            display: flex;
        }
        .row a{
            flex: 1;
            border-bottom: 1px solid #ccc;
        }
        .row a:nth-child(1){
            border-right:  1px solid #ccc;
        }
        .row a img{
            width: 100%;
            height: 190px;

        }
    </style>
</head>
<body>
    <!-- 顶部搜索 -->
    <div class="search-index">
        <div class="search">搜索:目的地/酒店/景点/航班号</div>
        <a href="#" class="user">我 的</a>
    </div>
    <!-- 焦点图模块 -->
    <div class="focus">
        <img src="./images/focus.jpeg" alt="">
    </div>
    <!-- 局部导航栏 -->
    <ul class="local-nav">
        <li>
            <a href="" title="景点.玩乐">
                <img class="local-nav-icon-icon1" src="./images/hotel.png" alt="">
                <span>景点.玩乐</span>
            </a>
        </li>
        <li>
            <a href="" title="景点.玩乐">
                <img class="local-nav-icon-icon2" src="./images/hotel.png" alt="">
                <span>景点.玩乐</span>
            </a>
        </li>
        <li>
            <a href="" title="景点.玩乐">
                <img class="local-nav-icon-icon3" src="./images/hotel.png" alt="">
                <span>景点.玩乐</span>
            </a>
        </li>
        <li>
            <a href="" title="景点.玩乐">
                <img class="local-nav-icon-icon4" src="./images/hotel.png" alt="">
                <span>景点.玩乐</span>
            </a>
        </li>
        <li>
            <a href="" title="景点.玩乐">
                <img class="local-nav-icon-icon5" src="./images/hotel.png" alt="">
                <span>景点.玩乐</span>
            </a>
        </li>
    </ul>
    <!-- 主导航栏 -->
    <nav>
        <!-- 1 -->
        <div class="nav-common">
            <div class="nav-item">
                <a href="#">海外酒店</a>
            </div>
            <div class="nav-item">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-item">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
        <!-- 2 -->
        <div class="nav-common">
            <div class="nav-item">
                <a href="#">海外酒店</a>
            </div>
            <div class="nav-item">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-item">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
        <!-- 3 -->
        <div class="nav-common">
            <div class="nav-item">
                <a href="#">海外酒店</a>
            </div>
            <div class="nav-item">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-item">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
    </nav>
    <!-- 侧导航栏 -->
    <ul class="subnav-entry">
        <!-- li{$}*10 -->
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
    </ul>
    <!-- 销售模块 -->
    <div class="sale-box">
        <div class="sale-hd">
            <h2>热门活动</h2>
            <a href="#" class="more">获取更多福利</a>
        </div>
        <div class="sales-bd">
            <div class="row">
                <a href="#">
                    <img src="./images/bg.png" alt="">
                </a>
                <a href="#">
                    <img src="./images/bg1.jpeg" alt="">
                </a>
            </div>
            <div class="row">
                <a href="#">
                    <img src="./images/bg.png" alt="">
                </a>
                <a href="#">
                    <img src="./images/bg1.jpeg" alt="">
                </a>
            </div>
        </div>
    </div>
</body>
</html>

注：参考bilili视频 https://www.bilibili.com/video/BV1N54y1i7dG?p=26&vd_source=f9f1b2be9cb64a025839e49063d67b0c