CSS3-box-flex弹性盒布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒布局</title>
    <style>
        div {
            height: auto;
            padding: 20px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        div.wrapper {
            width: auto;
            display: -webkit-box;
            display: -moz-box;
            /*box-flex生效需定义其父元素display为box或inline-box*/
            background-color: rgba(153, 130, 255, 0.49);
        }
        div.left {
            /*width: 200px;*/
            -webkit-box-flex: 2;
            -moz-box-flex: 2;
            background: #52ffaf;
            /*改变元素的显示顺序*/
            -webkit-box-ordinal-group: 3;
            -moz-box-ordinal-group: 3;
        }
        div.center {
            /*width:; 设置box-flex时不能设置宽度*/
            -webkit-box-flex: 1;/*表示分配父元素剩余空白空间的份数,越大越好?*/
            -moz-box-flex: 1;
            background-color: #ff7efa;
            /*改变元素的显示顺序*/
            -webkit-box-ordinal-group: 1;
            -moz-box-ordinal-group: 1;
        }
        div.right {
            width: 250px;
            background-color: #8879e0;
            /*改变元素的显示顺序*/
            -webkit-box-ordinal-group: 2;
            -moz-box-ordinal-group: 2;
        }
        .packalign{
            width: 300px;
            height:300px;
            display: -webkit-box;
            display: -moz-box;
            -webkit-box-pack: center;
            -moz-box-pack: center;
            -webkit-box-align: center;
            -moz-box-align: center;
            background: #34466e;
            -webkit-border-radius: 300px;
            -moz-border-radius: 300px;
            border-radius: 300px;
            font: bold 24px "微软雅黑";
            color: #fff;
        }
    </style>
</head>
<body>
<div class="packalign">
    中
</div>
<h1>学习列表</h1>
<ul>
    <li>display:-webkit-box | -moz-box;盒布局</li>
    <li>-webkit-box-flex | -moz-box-flex;弹性盒布局</li>
    <li>-webkit-box-ordinal-group | -moz-box-ordinal-group;改变元素排列顺序</li>
    <li>-webkit-box-orient | -moz-box-orient;改变元素排列方向:垂直|水平</li>
    <li>-webkit-box-pack | -moz-box-pack;垂直方向上,元素排列位置</li>
    <li>-webkit-box-align | -moz-box-align;水平方向上,元素排列位置</li>
    <li>align和pack结合使用,可以让元素中的内容在元素正中央显示</li>
</ul>
<div class="wrapper">
    <div class="left">
        1html中我在最左边<br/><p></p>
        1每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)
    </div>
    <div class="center">
        2html中我在中间<br/>
        <p></p>
        2每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)
    </div>
    <div class="right">
        3html中我在最右边<br/><p></p>
        3每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)
    </div>
</div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏破晓之歌

vue的video插件vue-video-player

在线视频文件格式转化工具:https://cloudconvert.com/wmv-to-mp4

1.4K30
来自专栏前端儿

【转】不同内核浏览器的差异以及浏览器渲染简介

浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(...

21910
来自专栏姬小光

姬小光前端兴趣班【第008期】- 真正的切图大法

上一期我们使用了 word 转存大法来生成网页,主要是为了帮助大家理解表格布局的原理。那么今天我们就来学习一下真正的切图大法。

14520
来自专栏Material Design组件

Human Interface Guidelines — Modality

16830
来自专栏二次元

给你的博客加上个Live2D看板娘吧

本文章中所用模型解包自药水制作师手机游戏,版权归该官方所有。(没错,我也是来安利这款游戏的)

37300
来自专栏编程

5个最好的开源Javascript图表库

在这篇文章中,我向大家介绍前5名最好的开源JavaScript图表库。每个站点的仪表板都是不完整的,因为他们缺少图表,所以为我们的站点找到正确的图表库是非常重要...

49480
来自专栏葡萄城控件技术团队

UWP入门教程1——UWP的前世今生

目录 引言 设备族群 UI 和通用输入模式 通用控件和布局面板 工具 自适应扩展 通用输入处理 引言 在本篇文章中,可以掌握以下知识: 设备族群,如何决定目标设...

19650
来自专栏互联网杂技

20个为前端开发者准备的文档和指南7

1. DevTools Challenger 它是一个交互式的站点,演示了如何在Firefox开发者版本里使用其拥有的新的相关动画功能。 ? 2. The HT...

38050
来自专栏ThoughtWorks

展望2016,REACT.JS 最佳实践 | TW洞见

今日洞见 译者:ThoughtWorks-吕靖,译自 Péter Márton:React.js Best Practices for 2016。 本文所有内容...

39790
来自专栏Youngxj

自定义易玩稀的媒体范

19950

扫码关注云+社区

领取腾讯云代金券