弹性布局

最新推荐文章于 2020-09-26 13:24:37 发布
最新推荐文章于 2020-09-26 13:24:37 发布
阅读量78 收藏
点赞数
分类专栏： HTML 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/simple5960/article/details/108642925
版权

1.伸缩菜单项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 500px;
            height: 400px; 
            border: 1px solid #cccccc;
            margin: 0 auto;
        }
        ul
        {
            list-style: none;
            width: 100%;
            display: flex;
        }
        div>ul>li
        {
            flex: 1;
            height: 36px;
            line-height: 36px;
            text-align: center;
            background-color: chartreuse;
            border-right: 1px solid #CCC;
            
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>首页</li>
            <li>商品分类</li>
            <li>我的订单</li>
            <li>最新商品</li>
        </ul>
    </div>
</body>
</html>

2.宽高自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 500px;
             height: 600px;
           
             display: flex;
            background-color: #cccccc;
            margin: 10px auto;
            flex-flow: column;
            
        }
        main{
            width: 100%;
            display: flex;
            /* 当前元素占据父容器剩余空间
                因为默认主轴是水平排列。header和footer占据完了水平空间，水平没空间让main放了
                main就放不下，所以应该让主轴column排列
             */
            flex: 1;
            background-color: blue;
        }
        main>article{
            height: 100%;
            flex: 1;
            background-color: burlywood;
        }
        main>aside{
            height: 100%;
            flex: 3;
            background-color: chartreuse;
        }
        header
        {
            width: 100%;
            height: 60px;
        background-color: red;
        }
        footer{
            width: 100%;
            height: 80px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <header></header>
        <main>
            <article></article>
            <aside></aside>
        </main>
        <footer></footer>
    </div>
</body>
</html>

3.携程网案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ 
            padding: 0;
            margin: 0;
        }
        header
        {
            width: 100%;
            display: flex;
        }
        header>a{
            flex: 1;
        }
        header>a>div
        {
            width: 100%;
            height: 90px;
            background-color: chartreuse;
        }
        main
        {
           width: 100%;
           padding: 0 10px;
           /* 因为加了padding之后盒子的宽度会发生变换，所欲哦要设置盒模型的大小为加了边框的大小 */
           box-sizing: border-box;
        }
        main>.item
        {
            width: 100%;
            height: 100px;
            background-color: aqua;
            border-radius: 5px;
            margin-top: 10px;
            display: flex;
        }
        main>.item:nth-last-of-type(2)
        {
            background-color: bisque;
        }
        main>.item:nth-last-of-type(3)
        {
            background-color: teal;
        }
        main>.item:nth-last-of-type(4)
        {
            background-color: forestgreen;
        }
        main>.item>.left
        {
            flex: 1;
        }
        main>.item>.right
        {
            flex: 3;
            /* 设置换行显示,子元素宽度和必须大于父元素 */
            flex-flow: wrap;
            display: flex;
            
        }
        main>.item>.right>a
        {
            text-align: center;
            width: 50%;
            line-height:50px;
            /* 加了边框会放不下去 */
            border-left: 1px solid #ffffff;
            border-bottom: 1px solid #ffffff;
            box-sizing: border-box;
            text-decoration: none;
            display: block;
        }
        .extra
        {
            display: flex;
            justify-content: space-around;
            
        }
        .extra>a
        {
           flex: 1;
            height: 50px;
        }
        .extra>a:nth-last-of-type(1)>div{
            background-color: blue;
            width: 100%;
            height: 50px;
          
            
        }
        .extra>a:nth-last-of-type(2)>div{
            background-color: red;
            width: 100%;
            height: 50px;
            
            
        }
        footer
        {
            width: 100%;
        }
        footer>nav{
            width: 100%;
            display: flex;
            border-top: 1px solid green;
            border-top: 1px solid green;
        }
        footer>nav>a
        {
            flex: 1;
            text-align: center;
            line-height: 30px;
            color: hotpink;
            font-size: 13px;
            text-decoration: noneb;
        }
        footer>.link{
            text-align: center;
            line-height:25px ;
        }
        footer>.copyright
        {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <a href="" style="text-align: center;vertical-align: middle;font-size:50px;line-height: 50px;">
                <div>携程</div>
            </a>
        </header>
        <main>
            <section class="item">
                <div class="left"></div>
                <div class="right">
                    <a href="">海外酒店</a>
                    <a href="">团购</a>
                    <a href="">特惠酒店</a>
                    <a href="">客栈公寓</a>
                </div>
            </section>
            <section class="item">
                <div class="left"></div>
                <div class="right">
                    <a href="">海外酒店</a>
                    <a href="">团购</a>
                    <a href="">特惠酒店</a>
                    <a href="">客栈公寓</a>
                </div>
            </section>
            <section class="item">
                <div class="left"></div>
                <div class="right">
                    <a href="">海外酒店</a>
                    <a href="">团购</a>
                    <a href="">特惠酒店</a>
                    <a href="">客栈公寓</a>
                </div>
            </section>
            <section class="item">
                <div class="left"></div>
                <div class="right">
                    <a href="">海外酒店</a>
                    <a href="">团购</a>
                    <a href="">特惠酒店</a>
                    <a href="">客栈公寓</a>
                </div>
            </section>
            <section class="extra">
                <a href="">
                    <div></div>
                </a>
                <a href="">
                    <div></div>
                </a>
            </section>
            
        </main>
        <footer>
            <nav>
                <a href="">电话预定</a>
                <a href="">下载客户端</a>
                <a href="">我的订单</a>
            </nav>
            <p class="link">
                <a href="">网站地图</a>
                <a href="">ENGLISH</a>
                <a href="">电脑版</a>

            </p>
            <p class="copyright">
                &copy;2015携程旅行
            </p>
        </footer>
    </div>
</body>
</html>

5.综合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       *{
           padding: 0;
           margin: 0;
       }
       .box
       {
           width: 800px;
           height: 700px;
           border: 1px solid rebeccapurple;
           box-sizing: border-box;
           display: flex;/*设置为flex布局之后，子元素的float clear vertical-align都失效*/
            justify-content: space-around;
           align-items: stretch; 
           flex-wrap: nowrap;/*是否换行*/
           /* flex-flow: flex-dirction flex-wrap; */
           flex-flow: row nowrap;
           
       }
       
       .first
       {
           width: 200px;
           /* height: 200px; */
           background-color: springgreen;
           order: 4;/*改变元素的顺序*/
           flex-grow: 0;/*//定义项目的放大比列，默认为0*/
           flex-shrink: 1;/*如果所有项目的flex-shrink都为1，空间不够则等比例缩小*/
       }
       .second
       {
           width: 230px;
           height: 200px;
           background-color: skyblue;
           order: 3;
           flex-shrink: 1;
       }
       .third{
           width: 200px;
           height: 200px;
           background-color: salmon;
           order: 2;
           flex-shrink: 1;
       }
       .fourth{
           width: 200px;
           height: 200px;
           background-color: red;
           order: 1;
           flex-shrink: 1;
       }
    </style>
</head>
<body>
    <div class="box">

        <div class="first">1</div>
        <div class="second">2</div>
        <div class="third">3</div>
        <div class="fourth">4</div>
    </div>
</body>

</html>
Simple_IDE
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用弹性盒子（flexbox）进行页面布局
believet93的博客
11-27 739
1、直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
element侧栏固定，header固定，main主体可以滚动
热门推荐
ryan55的博客
03-19 3万+
需求 利用elementui的Container 布局容器，布置一个有顶部header，侧边栏aside以及主体main，现要求当主题长度过长时可以滚动，但是顶部和侧边固定。 思路 利用position中的absolute和relative，以及overflow-y来实现 详解 在elementui官网复制Container 布局容器布局，代码如下 <el-container> &...
设置ECLIPSE编辑窗口布局
04-29
设置ECLIPSE编辑窗口布局，拖动编辑器相关窗口进行排列，成品字型
定制Eclipse IDE之界面篇
weixin_33717298的博客
07-31 346
为什么要定制IDE?      在工作时候，当公司有了自己的框架，给自己开放人员用，甚至是可以卖的时候，我们可以做成一个产品，而这个产品将包括框架本身、文档、工具、教程等等。工具之中最重要的莫过于开发工具（IDE）、调试工具。      我在公司里面做的是一个hybrid框架，而一个配套的IDE是比不可少的，主要用来开发HTML5。这个IDE可以算是框架东西的聚合，可以将在线文档、工程模板、打...
使用Eclipse IDE的技巧
clarksuperman的专栏
08-08 544
<br />使用Eclipse IDE的技巧<br />作者：Sam Brodkin<br />翻译：tetsu <br />版权声明 ：可以任意转载，转载时请务必以超链接形式标明文章原始出处和作者信息及本声明<br />作者:<br />Sam Brodkin ;tetsu <br />原文地址:<br />http://www.javaworld.com/javaworld/jw-08-2005/jw-0829-eclipse.html<br />中文地址:<br />http://www.matrix
弹性布局的简单设置实例
09-15
对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及实例,其中有主轴的设置, 以及属性值 对弹性布局的简单设置以及...
弹性布局实例骰子
03-28
弹性布局实例骰子
弹性布局制作的简单百度网页
06-30
在IT行业中，网页布局设计是前端开发的重要组成部分，特别是在当今多设备、多屏幕尺寸的环境下，弹性布局（Flexbox）成为了一种主流的解决方案。本文将深入探讨如何使用HTML5和弹性布局技术来创建一个简单的百度网页...
flex弹性布局用法笔记
01-20
【flex弹性布局】是CSS3中的一种布局模式，它极大地增强了网页和应用程序的布局能力，使得开发者能够更灵活地控制元素的排列、对齐和大小调整。以下是对flex弹性布局中核心属性的详细解释： 1. **display: flex** -...
Flex弹性布局详解
09-29
形象生动讲解CSS布局，Flex弹性布局生动形象的理解，更好的理解弹性布局
在JavaScript文件中引入jQuery
simple5960的博客
09-26 5331
var script=document.createElement("script"); script.type="text/javascript"; script.src="../JSlib/jquery-3.4.1.min.js";
GET 和POST传递参数
simple5960的博客
09-26 4267
使用GET方式传递参数 使用POST方式传递参数 提交、重置、普通按钮如何传送参数 单行与多行文本输入框如何传送参数 单选按钮与复选框如何传送参数 隐藏表单字段与图像字段如何传送参数 列表框如何传送参数 使用Javascript防止重复提交表单 使用GET方式传递参数 在浏览器地址栏中输入某个URL地址或单击网页上的一个超链接时，浏览器发出的HTTP请求消息的请求方式为GET。 如果网页中的表单元素的method属性被设置为了“GET”，浏览器提交这个FORM表单时生成的HTTP请求消息的请求方式也为GET
ToDoList
simple5960的博客
09-17 3334
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../JSlib/jquery-3.4.1.mi
阿里巴巴icon font导入CSS
simple5960的博客
09-26 1278
1.先去icon font官网随便找几个图标添加至购物车 2.点击购物车，添加至项目 3.点击font class 然后生成链接 4.将生成的链接输入浏览器地址栏访问 5.然年后将上面的东西复制到CSS文件中，在其他文件中引入就可以辣 6.使用 ...
HTML5中接口的使用
simple5960的博客
09-13 953
1.全屏接口 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <img
vue中import的ES6语法
simple5960的博客
09-25 925
import Vue from ‘vue’; import App from ‘./App’; import router from ‘./route’; import axios from ‘axios’; import ‘./less/index’; 于是赶快上了阮一峰大牛的《ES6标准入门》这辆车，学习了： 1.项目为什么要模块化？ 2.ES6模块与CommonJS和AMD模块加载的不同。 3.export命令 4.import命令 5.模块的整体加载 get到很多的新姿势，然而并不能解释import
CSS3动画实现无缝滚动
simple5960的博客
09-13 773
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ pad
弹性布局 flex布局
最新发布
08-22
Flex布局，也称为弹性布局，是一种浏览器提倡的布局模型。它的特点是可以更简单、灵活地布局网页，避免了浮动脱标的问题。通过使用Flex布局，我们可以精确灵活地控制块级盒子的布局方式，避免浮动布局中脱离文档流...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值