flex常见布局

时间：2022-09-02 17:27:25

一，常见圣杯布局

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            /* 圣杯布局 */

            body{

                margin: 0;

                padding: 0;

                display: flex;

                flex-direction: column;/* 灵活的项目将垂直显示，正如一个列一样 */

            }

            header{

                flex: 0 0 50px;

                background-color: aliceblue;

                align-items: center;

            }

            footer{

                flex: 0 0 200px;

                background-color: dimgray;

            }

            .content{

                display: flex;

                width: 70%;

                margin: 0 auto;

                background: beige;

                height: auto;

            }

            .square1{

                border: aqua 1px solid;width: 100px; height: 100px;/* 内容效果 */

            }

            .square2{

                border: aqua 1px solid;width: 700px; height: 100px;/* 内容效果 */

            }

            .parcel2{

                display: flex;

                flex-wrap: wrap;

            }

        </style>

    </head>

    <body>

        <!--

            页面从上到下为头部、中部、脚部；头部、脚部定高，不可伸缩；中部高度自适应。

         -->

         <header><h1>阿呆云[-].COM</h1></header>

             <div class="content">

                <div class="parcel">

                    <div class="square1" >方块1</div>

                    <div class="square1" >方块1</div>

                    <div class="square1" >方块1</div>

                    <div class="square1" >方块1</div>

                    <div class="square1" >方块1</div>

                    <div class="square1" >方块1</div>

                </div>

                <div class="parcel2">

                    <div class="square2" >方块2</div>

                </div>

             </div>

         <footer></footer>

    </body>

</html>

效果图：

flex常见布局

二，快资讯页面

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            body{

                display: flex;

                margin: 0;

                padding: 0;

                flex-wrap: wrap;

            }

            .box{

                display: flex;

                margin: 0 auto;

                width: 80%;

                height: 1000px;

                background: #696969;

            }

            .top{

                width: 100%;

                height: 50px;

                background: #00FFFF;

                text-align: center;

            }

            .left{

                width: 30%;

                background: #F5F5DC;

            }

        </style>

    </head>

    <body>

        <div class="top">导航栏</div>

        <div class="box">

            <div class="left">

                略缩内容

            </div>

            <div class="right">

                展开内容

            </div>

        </div>

    </body>

</html>

效果图：

flex常见布局

flex常见布局的更多相关文章

  1. flex弹性布局

    Flex 布局教程:语法篇  原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 作者:  ...

  2. css常见布局方式

    CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...

  3. CSS常见布局问题整理

    实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...

  4. css CSS常见布局解决方案

    CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...

  5. 前端进阶系列&lpar;二&rpar;&colon;css常见布局解决方案

    水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...

  6. CSS3新属性之---flex box布局实例

    flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...

  7. css进阶之二：flex弹性布局

    布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...

  8. CSS之常见布局&vert;常用单位&vert;水平垂直居中

    常见布局: 1. 流式布局:百分比布局,宽高.margin.pinding都是百分比 2. 固定布局:盒子的宽高固定,如:margin.padding等 3. 浮动布局:float 4. 弹性布局:f ...

  9. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

随机推荐

  1. ngCloak 实现 Angular 初始化闪烁最佳实践

    在做angular的SPA开发时,我们经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁.对于这个问题由于JavaScript去 ...

  2. Eclipse下maven使用嵌入式（Embedded）Neo4j创建Hello World项目

    Eclipse下maven使用嵌入式(Embedded)Neo4j创建Hello World项目 新建一个maven工程,这里不赘述如何新建maven工程. 添加Neo4j jar到你的工程 有两种方 ...

  3. JBOSS内存参数详解

    JAVA_OPTS="$JAVA_OPTS -server -Xms1024m -Xmx1024m -Xss512k -XX:PermSize=128m -XX:MaxPermSize=25 ...

  4. AI &lpar;Adobe Illustrator&rpar;详细用法（五）

    最后的调整和输出. 一.改变形状工具/宽度工具/包裹工具 1.改变形状工具[整形工具] 改变形状工具可以让我们更细致的控制形状的改变. 用钢笔工具画一条曲线,并设置宽度样式等. 如果想让这条曲线形状变 ...

  5. MSP430之频率测量，误差1Hz

    #include "timerHz.h" #include "msp430g2553.h" #define _DEBUG_TIMERHZ_ unsigned ] ...

  6. js在本地预览图片

    移动web <body> <form enctype="multipart/form-data" name="form1"> 上传文件: ...

  7. API模板

    #include <windows.h> #include <windowsx.h> #define DIVISIONS 5 LRESULT CALLBACK WndProc ...

  8. ●BZOJ 2442 &lbrack;Usaco2011 Open&rsqb;修剪草坪

    题链: http://www.lydsy.com/JudgeOnline/problem.php?id=2442 题解: 单调队列优化DP 把问题转化为:从序列里选出一些相邻之间间隔不超过K的数,使得 ...

  9. Android TextView的属性设置为textstyle&equals;&quot&semi;bold&quot&semi;时 中文的&OpenCurlyDoubleQuote;￥”不显示

    昨天在修改列表的时候出现了一个挺让人纠结的问题.在TextView中“￥”符号无论如何也显示不出来.尝试了使用气的特殊符号,都是能够正确显示的. 最后百度google了一圈也没找出个所以然来.于是觉得 ...

  10. 自学oracle数据库

    1.因为自己要自学oracle数据库,所以就上网查了一下资料,总结了一下. 在以下连接有自学oracle的一下资料 博文中不让加入一些有广告的网站,请谅解,如有需要评论我私发. 2.学习Oracle的 ...

相关文章