弹性布局

最新推荐文章于 2024-06-24 09:50:33 发布

北冥燕

最新推荐文章于 2024-06-24 09:50:33 发布

阅读量525

点赞数

分类专栏： Html5和css

本文链接：https://blog.csdn.net/qq_45819769/article/details/111657399

版权

Html5和css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.页面布局概述

网页布局方式有很多，各有各的特点：

1.传统的 DIV+CSS+float（浮动）布局方式，适用于PC端。
2.自适应布局方式，要开发多套页面，服务器根据不同的客户端返回不同的页面。
3.响应式布局方式，开发一套页面，根据媒体查询返回的结果，跳转布局以适用不同的客户端。
4.多列布局方式，类似报纸排版的样式。
5.弹性布局，适用与PC端与移动端。
… …

注意：本课程中只讲解弹性布局！

2.弹性布局（弹性盒子）

一个元素的display属性值设置为flex，那么这个元素中的子元素，就会遵循弹性布局的规则。

display:flex /flex是flexible box的缩写/

此时，这个元素就可以称为是一个弹性布局容器（弹性容器），它内部的子元素，将只按照弹性布局的规则来排列和对齐，以前的float、clear、块状与内联、vertical-align属性都不能用了。

2.1.重要概念：主轴与侧轴

弹性布局中的一个重要概念：主轴与侧轴：弹性盒子中默认存在两根轴，一个是水平方向的主轴，一个是垂直方向的侧轴。

注意点：

主轴的开始位置叫做 main start、结束位置叫做 main end；
侧轴的开始位置叫做cross start、结束位置叫做cross end；
侧轴永远垂直于主轴；

2.2.flex-direction样式

flex-direction属性就是用来设置主轴方向的。

flex-direction:row        /*子元素沿主轴方向排列，也就是水平方向。 row为默认值*/

flex-direction:column     /*子元素沿侧轴方向排列，也就是垂直方向。*/

一个完整的例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body{
                display: flex;           /*将body设置为弹性布局*/
                flex-direction: column;  /*这里设置为侧轴方向排列*/
            }
            .son{
                width: 100px;
                height: 100px;
                border: solid 2px #f90;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">4</div>
        <div class="son">5</div>
    </body>
</html>

总结：
1.在弹性容器中，子元素想要水平方向排列，那就在弹性盒子中设置：flex-direction:row
2.在弹性容器中，子元素想要垂直方向排列，那就在弹性盒子中设置：flex-direction:column
3.在弹性容器中，以前的“块状元素独占一行”，“内联元素不独占一行”，“元素水平排列时需要浮> 动”等等规则，一律不再有效。

2.3.flex-wrap样式

由于弹性布局中的子元素能自动伸缩，所以，当父容器此次小于子元素整体尺寸时，子元素不会自动换行，而是自动收缩。

body{
    display: flex;
}

那么，如果想要让子元素自动换行，可以使用flex-wrap:wrap

body{
    display: flex;
    flex-wrap: wrap;   /*当弹性布局容器尺寸小于所以子元素尺寸时，子元素会自动换行*/
}

2.4.justify-content样式

以主轴方向为例：子元素水平方向排列后，默认依次靠左排列。如果想让子元素居中、居右等，那么就可以设置justify-content样式。值有五种：

1.flex-start（默认）：左对齐。
2.flex-end：右对齐。
3.center：居中。
4.space-between：两端对齐，子元素之间间距都相等。
5.space-around：每个子元素两侧的间距相等。所以子元素之间间距比子元素到边框间距大一倍。

例如：

body{
    display: flex;
    justify-content: space-between;    /*两端对齐，子元素之间间距都相等。*/
}

总结：在弹性盒子中，子元素主轴对齐方式使用justify-content来设置

2.5.align-items与align-content样式

以主轴方向为例：子元素水平方向排列后，如果想让子元素垂直居中，那么就可以设置align-items样式。常用值有三种：

flex-start（默认）：上对齐。
flex-end：下对齐。
center：居中。

html,body{
    height: 100%;               /*html与body的高度默认为0，所以要设置高度*/
}
body{
    display: flex;
    flex-wrap: wrap;           /*如果允许换行，那么换行后，多行元素中的每一行也会垂直居中*/
    justify-content: center;
    align-items: center;       /*不论是一行，还是多行，都会垂直居中*/
}

再来看align-content样式： align-content样式对单行没有效果，对多行有效果，而且是将多行整体作为一个整体附加效果的。

总结：在弹性盒子中，子元素侧轴对齐方式可以使用align-items或align-content

1.align-items对单行和多行都有效，align-content对单行无效。
2.在多行中，align-items让每一行都在各自范围内垂直居中。 align-content将多行作为一个整> 体，然后居中。

2.6.flex样式

如果想让每个子元素所占空间不一致，那么可以使用flex给子元素分配空间。使用flex时要注意一下两点：

1.flex样式是设置在子元素上的。
2.如果设置了flex，那就说明要给子元素按比例分配空间，因此width与height就失效了。

实例1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            html,body{
                height: 100%;
            }
            body{
                display: flex;
            }
            .son{
                width: 100px;
                height: 100px;
                border: solid 2px #f90;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="son" style="flex:1;">1</div>
        <div class="son" style="flex:1;">2</div>
        <div class="son" style="flex:2;">3</div>
        <div class="son" style="flex:2;">3</div>
    </body>
</html>

上面实例中：flex样式后跟1个值：表示子元素所占空间的比例。三个div的宽度分别是窗口宽度的：1/4、1/2、1/4

实例2：

<!-- 第一个div的宽度是400px，是不变的。第二个和第三个div将剩下宽度按比例分配：1/3、2/3 -->
<body>
    <div class="son" style="flex:0 0 400px;">1</div>
    <div class="son" style="flex:1;">2</div>
    <div class="son" style="flex:2;">3</div>
</body>

上面实例中：flex样式后跟3个值：

1.第一个值：子元素尺寸自动放大值
2.第二个值：子元素尺寸自动缩小值
3.第三个值：子元素尺寸（“auto"或”%"、“px”、“em” 或任何其他长度单位的数字。）

例如：

0 1 auto（默认）：父元素尺寸变化时，子元素不放大，只缩小，尺寸自动充满。
1 1 auto：父元素尺寸变化时，子元素自动放大缩小，尺寸自动充满。
0 0 300px：父元素尺寸变化时，子元素不放大缩小，尺寸固定。

总结：可以使用flex让一行内的所有子元素自动撑满窗口宽度。而且每个子元素的宽度可以按比例> 进行分配。

3.布局实例

3.1.典型1-3-1布局

<style>
    header,nav,article,section,aside,footer{
        background-color: #666;
    }
    p{
        line-height: 50px;
    }
    .container{
        width: 1200px;
        margin: 0 auto;
    }
    .container header{
        width: 100%;
        height: 60px;
        margin-bottom: 10px;
    }
    .container nav{
        width: 100%;
        height: 60px;
        margin-bottom: 10px;
    }
    /*网页主要内容部分不能设置高度*/
    .container .main{
        width:100%;
        display: flex;
        margin-bottom: 10px;
    }
    .container .main article{
        flex: 0 0 200px;
    }
    .container .main section{
        flex: 1;
        margin: 0 10px;
    }
    .container .main aside{
        flex: 0 0 200px;
    }
    .container footer{
        width: 100%;
        height: 60px;
    }
</style>

<!-- 总容器 -->
<div class="container">
    <header></header>
    <nav></nav>
    <!-- 网页主要内容部分 -->
    <div class="main">
        <article></article>
        <section>
            <p>内容部分</p><p>内容部分</p><p>内容部分</p><p>内容部分</p>
        </section>
        <aside></aside>
    </div>
    <footer></footer>
</div>

注意点：
1.由于PC端屏幕尺寸相对固定，所以采用定宽不定高的原则。
2.所有页面元素都放在一个总容器中，然后就可以使总容器水平居中了。
3.网页主要内容部分不能设置高度，而应该是由内容撑开的。

3.2.典型自适应高度后台管理布局

<style>
    html,body,.container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: column;
    }

    .container header {
        flex:0 0 60px;
        width: 100%;
        background-color: #B3C0D1;
    }

    /*撑满header与footer剩余的高度*/
    .container .main {
        flex:1;
        width: 100%;

        display: flex;
    }

    .container .main aside {
        flex: 0 0 200px;
        background-color: #D3DCE6;
    }

    .container .main section {
        flex: 1;
        background-color: #E9EEF3;
    }

    .container footer {
        flex:0 0 60px;
        width: 100%;
        background-color: #B3C0D1;
    }
</style>

<!-- 总容器 -->
<div class="container">
    <header></header>
    <!-- 网页主要内容部分 -->
    <div class="main">
        <aside></aside>
        <section></section>
    </div>
    <footer></footer>
</div>

注意点：

1后台管理页面布局的宽度和高度，一般都会自动撑满整个窗口。
2.header和footer的高度可以固定，中间内容部分撑满剩余高度。

4.实战小项目：Vue官网首页

开发Vue官网首页：

index.html文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vue 官网</title>
        <link href="./framework/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <link href="./framework/reset.css" rel="stylesheet">
        <link href="./css/index.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <header>
                <a href="">Vue.js</a>
                <div class="right">
                    <div class="search-box">
                        <i class="fa fa-search"></i>
                        <input type="text">
                    </div>    
                    <ul>
                        <li>
                            <a href="">学习</a>
                            <i class="fa fa-caret-down"></i>
                        </li>
                        <li>
                            <a href="">生态系统</a>
                            <i class="fa fa-caret-down"></i>
                        </li>
                        <li>
                            <a href="">团队</a>
                        </li>
                        <li>
                            <a href="">资源列表</a>
                            <i class="fa fa-caret-down"></i>
                        </li>
                        <li>
                            <a href="">支持Vue</a>
                            <i class="fa fa-caret-down"></i>
                        </li>
                        <li>
                            <a href="">多语言</a>
                            <i class="fa fa-caret-down"></i>
                        </li>
                        <li>
                            <a href="">参与翻译</a>
                        </li>
                    </ul>    
                </div>
            </header>

            <div class="logo">
                <img src="./img/logo.png">
                <div class="right">
                    <h1>渐进式<br>JavaScript 框架</h1>
                    <ul>
                        <li>
                            <i class="fa fa-play-circle"></i>
                            <span>WHY VUE.JS?</span>
                        </li>
                        <li>
                            起步
                        </li>
                        <li>
                            <i class="fa fa-github"></i>
                            <span>GITHUB</span>
                        </li>
                    </ul>    
                </div>    
            </div>    

            <!-- sponsor 赞助 -->
            <div class="sponsor">
                <h3>特别赞助</h3>
                <p>
                    <a href=""><img src="./img/dcloud.gif"></a>
                    <a href=""><img src="./img/imooc-sponsor.png"></a>
                </p>
            </div>    

            <!-- highlights 亮点 -->
            <ul class="highlights">
                <li>
                    <h2>易用</h2>
                    <p>已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！</p>
                </li>
                <li>
                    <h2>灵活</h2>
                    <p>不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。</p>
                </li>
                <li>
                    <h2>高效</h2>
                    <p>20kB min+gzip 运行大小超快虚拟 DOM 最省心的优化</p>
                </li>
            </ul>    

            <footer></footer>
        </div>    
    </body>
</html>

reset.css文件：

/***************** CSS重置 *******************/
html,body,div,span,h1,h2,h3,h4,h5,h6,ul,ol,li,p{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    /*按照vue官网设置*/
    font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, "微软雅黑";
}
ul,ol{
    list-style:none;
}
a{
    text-decoration: none;
}

index.css文件：

/********************* 总容器 **********************/
.container{
    width: 100%;
    height: 100%;
}

/********************* header **********************/
header{
    width: 100%;
    height: 60px;

    box-sizing: border-box;
    padding: 10px 60px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
header > a{
    font-size: 28px;
    font-weight: 500;
    color: #273849;
}

header .right{
    display: flex;
    align-items: center;
}
header .right .search-box{
    width: 215px;
    height: 30px;
    margin-right: 20px;

    box-sizing: border-box;
    border: solid 1px #e3e3e3;
    border-radius: 15px;

    display: flex;
    align-items: center;
}
header .right .search-box i{
    font-size: 14px;
    color: #e3e3e3;
    margin: 0 8px;
}
header .right .search-box input{
    border: none;
    outline: none;
}
header .right ul{
    display: flex;
    align-items: center;
}
/*li本身尺寸用内容撑开*/
header .right ul li{
    margin: 0 10px;
}
header .right ul li i{
    font-size: 14px;
    color: #304455;
}
header .right ul li a{
    font-size: 16px;
    color: #304455;
}
header .right ul li a:hover{
    color: #41B883;
}

/********************* logo **********************/
.logo{
    width: 100%;
    margin-top: 40px;

    display: flex;
    justify-content: center;
}
.logo img{
    display: block;
    width: 215px;
    height: 215px;
    margin-right: 60px;
}
.logo .right h1{
    font-size: 52px;
    font-weight: 300;
    color: #273849;
}
.logo .right ul{
    margin-top: 40px;
    display: flex;
}
.logo .right ul li{
    height: 50px;
    box-sizing: border-box;
    margin-right: 10px;

    user-select: none;
    cursor: pointer;
}
.logo .right ul li:nth-child(1){
    width: 206px;
    background-color: #4FC08D;
    border-radius: 25px;

    display: flex;
    align-items: center;
}
.logo .right ul li:nth-child(1) i{
    font-size: 36px;
    color: #fff;
    margin-left: 10px;
    margin-right: 20px;
}
.logo .right ul li:nth-child(1) span{
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.logo .right ul li:nth-child(2){
    width: 134px;
    border: solid 1px #4FC08D;
    border-radius: 25px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 16px;
    font-weight: 700;
    color: #4FC08D;
}
.logo .right ul li:nth-child(3){
    width: 159px;
    background-color: #F6F6F6;
    border-radius: 25px;

    display: flex;
    align-items: center;
}
.logo .right ul li:nth-child(3) i{
    font-size: 36px;
    color: #7F8C8D;
    margin-left: 10px;
    margin-right: 20px;
}
.logo .right ul li:nth-child(3) span{
    font-size: 16px;
    font-weight: 700;
    color: #7F8C8D;
}

/********************* sponsor **********************/
.sponsor{
    width: 100%;
    margin-top: 60px;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.sponsor h3{
    font-size: 18px;
    color: #273849;
}
.sponsor p{
    display: flex;
    margin-top: 20px;
}
.sponsor p img{
    /*宽度或高度可以使用auto*/
    width: auto;
    height: 50px;
    margin: 0 14px;
}

/********************* highlights **********************/
.highlights{
    width: 100%;
    margin-top: 60px;

    display: flex;
    justify-content: center;
}
.highlights li{
    width: 233px;
    margin: 0 32px;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.highlights li h2{
    font-size: 24px;
    font-weight: 300;
    color: #42B9A2;
}
.highlights li p{
    margin-top: 30px;
    text-align: center;

    font-size: 16px;
    color: #4F5959;
}

/********************* footer **********************/
footer{
    width: 100%;
    margin-bottom: 60px;
}

北冥燕

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
弹性布局

1.页面布局概述网页布局方式有很多，各有各的特点：1.传统的 DIV+CSS+float（浮动）布局方式，适用于PC端。2.自适应布局方式，要开发多套页面，服务器根据不同的客户端返回不同的页面。3.响应式布局方式，开发一套页面，根据媒体查询返回的结果，跳转布局以适用不同的客户端。4.多列布局方式，类似报纸排版的样式。5.弹性布局，适用与PC端与移动端。… …注意：本课程中只讲解弹性布局！2.弹性布局（弹性盒子）一个元素的display属性值设置为flex，那么这个元素中的子元素，就会遵
复制链接

扫一扫

专栏目录