弹性布局

最新推荐文章于 2023-09-05 00:08:23 发布
最新推荐文章于 2023-09-05 00:08:23 发布
阅读量521 收藏 2
点赞数
分类专栏： Html5和css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45819769/article/details/111657399
版权

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
    评论
专栏目录
flex布局（弹性布局）
weixin_52580677的博客
01-07 2万+
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex items默认都是沿着main axis（主轴）从main start 开始往main end 方向排布flex-direction决定了main axis的方向，有4个取值：效果如下 justify-content决定了flex items在main axis 上的对齐方式，共6个取值：效果如下： ali
flex 平铺布局_最详细完整的flex弹性布局
weixin_39965881的博客
12-19 2112
初了解在学习弹性布局之前首先就要明白其概念flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性任何一个容器都可以指定为flex布局.box{display: flex;}行内元素当然也可以使用flex布局.box{display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{display: -webkit-fl...
【移动开发】弹性布局详细讲解
yubao0723的专栏
01-09 3308
移动端开发常用布局之弹性布局详细讲解。
弹性布局（flex)
meigancai_的博客
08-07 2085
一、弹性布局简介弹性布局，也称为Flex布局（Flexbox），是一种用于设计Web页面布局的CSS技术。它的目标是在不同屏幕尺寸和设备上创建灵活的、自适应的布局，使开发者能够更轻松地控制元素在容器内的排列和分布。Flex布局的核心思想是通过指定容器（flex container）和其内部的子元素（flex it基本概念：① 容器： 需要添加弹性布局的父元素；② 项目： 弹性布局容器中的每一个子元素，称为项目；基本方向：① 主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；
你必须知道的flex伸缩布局
lmy233的博客
10-16 1313
伸缩布局： display:flex;让大盒子成为容器，容器有主轴和侧轴； 子盒子是容器的项目，项目默认会从主轴的起点沿主轴的方向依次排列，如果超过容器，则会自动收缩，不换行 所以一定要注意当前主轴的起点在什么地方 容器的6个属性：写在容器的css里 —1--- flex-direction控制主轴的方向： row→：默认值，主轴呈现水平方向从左往右 column↓：主轴呈现垂直方向从上往下，项目会垂直排列，侧轴会变成水平方向从右往左 row-reverse← 主轴呈现水平方向从右往左，项目的排列也会反过来
弹性布局的简单设置实例
09-15
对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及...
弹性布局实例骰子
03-28
弹性布局实例骰子
弹性布局制作的简单百度网页
06-30
在IT行业中，网页布局设计是前端开发的重要组成部分，特别是在当今多设备、多屏幕尺寸的环境下，弹性布局（Flexbox）成为了一种主流的解决方案。本文将深入探讨如何使用HTML5和弹性布局技术来创建一个简单的百度网页...
flex弹性布局用法笔记
01-20
【flex弹性布局】是CSS3中的一种布局模式，它极大地增强了网页和应用程序的布局能力，使得开发者能够更灵活地控制元素的排列、对齐和大小调整。以下是对flex弹性布局中核心属性的详细解释： 1. **display: flex** -...
Flex弹性布局详解
09-29
形象生动讲解CSS布局，Flex弹性布局生动形象的理解，更好的理解弹性布局
【CSS】浅谈flex弹性布局
m0_46537958的博客
09-28 443
flex 设置两端对其 .div-new-dialog-footer{ display: flex; flex-flow: row nowrap; justify-content: space-between; } .left-div{ display:inline } .right-div{ display:inline }
弹性（flex）布局
qq_43679416的博客
07-09 2627
什么是Flexbox ？ Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。它可以： 1、在不同方向排列元素 2、重新排列元素的显示顺序 3、更改元素的对齐方式 4、动态地将元素装入容器 在 Flexbox 模型中，有三个核心概念： ..
弹性布局（自适应布局）
最新发布
indigoticrain的博客
09-05 514
一般情况下，如果垂轴是纵向的，那么flex-wrap:wrap表示弹性元素可换行，且换行方向是从上到下，flex-wrap:wrap-reverse表示弹性元素的换行方向是从下往上。2、弹性布局有两个重要的概念：弹性容器和弹性元素，触发了FFC的元素称为弹性容器，也就是display属性值为flex或者inline-flex的元素，而元素的子元素称为弹性元素。把每一行中的第一个弹性元素放在主轴的起边，最后一个元素放在轴的终边，然后将主轴上的剩余空间平均分配在余下的每一相邻的弹性元素之间。
HTMl弹性布局
weixin_45723378的博客
04-27 1988
CSS3弹性布局
弹性布局 flex布局
08-22
Flex布局，也称为弹性布局，是一种浏览器提倡的布局模型。它的特点是可以更简单、灵活地布局网页，避免了浮动脱标的问题。通过使用Flex布局，我们可以精确灵活地控制块级盒子的布局方式，避免浮动布局中脱离文档流...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值