<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            .nav{

                display: -webkit-flex;

                background-color: lightgreen;

                height: 100px;

            }

            .item{

                color: #FFF;

                flex: 1;

            }

            .first{

                width: 100px;

                background: red;

            }

            /*水平垂直居中   css*/

            .myoff{

                position: absolute;

                top: 50%;

                left: 50%;

                transform: translate(-50% , -50%);

                background-color: royalblue;

                width: 300px;

                height: 300px;

            }

            /*水平垂直居中 flex版本*/

            .parent{

                display: flex;

                justify-content: center;

                align-items: center;

                position: absolute;

                left: 0;

                top: 0;

                width: 100%;

                height: 100%;

            }

        </style>

    </head>

    <body>

        <div class="nav" style="flex-direction: row-reverse;">

            <div class="first">哈哈</div>

            <div class="item">adsfasdf</div>

            <div class="item" style="flex: 2;">大厦法定是adsfasdf</div>

            <div class="first">呵呵</div>

        </div>

        <!--<div class="myoff">asdf</div>-->

        <div class="parent">

            <div style="width: 100px;height: 100px; background: red;">aaaaaaaaaaaa</div>

        </div>

    </body>

</html>

css3 flex盒子布局的更多相关文章

  1. flex盒子布局

    看过很多对于弹性盒子flex的简介,但还是觉得阮一峰大神的解析和张鑫旭大神(旧版flex)的解析比较容易理解,下面,我以自己的理解来叙述关于flex弹性布局! 1.概念(容器和项目) 在flex中,有 ...

  2. CSS3 box-sizing 盒子布局

    在CSS中盒模型被分为两种,第一种是W3C的标准模型,第二种是IE怪异盒模型.不同之处在于后者的宽高定义的是可见元素框的尺寸,而不是元素框的内容区尺寸.目前对于浏览器大多数元素都是基于W3C标准的盒模 ...

  3. CSS3总结五：弹性盒子(flex)、弹性盒子布局

    弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...

  4. css3的盒子模型布局

    写在前面的话: css3盒子布局,可以更简单直观的均分页面某一个div,并且还可以达到均分后的每一个元素中的内容上下居中.左右居中,但是该模型对浏览器的版本有要求: { display: -webki ...

  5. CSS3 Flex Box（弹性盒子）

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

  6. css3弹性伸缩布局(一)—————flex布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...

  7. CSS3(5)---伸缩布局(Flex)

    CSS3(5)---伸缩布局 有关页面布局之前写过三篇相关文章: 1.CSS(5)---盒子模型 2.CSS(6)---浮动(float) 3.CSS(8)---定位(position) 一.什么是F ...

  8. CSS3 弹性盒子(Flex Box)

    1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...

  9. CSS3弹性伸缩布局（二）——flex布局

    上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...

随机推荐

  1. Ansible-Tower快速入门-6.查看tower的仪表板【翻译】

    查看tower的仪表板 到这一步,我们已经可以在屏幕上看到tower的仪表板了,我们可以看到你目前"主机""资产清单"和"项目"的汇总信息, ...

  2. JAVA深入研究——Method的Invoke方法。

    在写代码的时候,发现Method可以调用子类的对象,但子类即使是改写了的Method,方法名一样,去调用父类的对象也会报错,虽然这是很符合多态的现象,也符合java的动态绑定规范,但还是想弄懂java ...

  3. sql developer 要求输入jdk地址

    困扰了好久  终于找到解决办法了. 将sql developer改为 兼容模式和管理员方式运行,选择java.exe的路径 终于可以在64位系统下顺利使用了.

  4. jQuery HTML

    alert("Text: " + $("#test").text());获取text alert("HTML: " + $("#t ...

  5. 使用java连接MySQL数据库

    import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException;import com.mys ...

  6. iOS 系统架构

    https://developer.apple.com/library/ios/documentation/Miscellaneous/Conceptual/iPhoneOSTechOverview/ ...

  7. Python2.7.12开发环境构建(自动补全)

    一.安装readline-devel包 Python的编译安装依赖于这个包 yum -y install readline-devel 二.安装Python2.7.12 Python官方网站(到此处下 ...

  8. phpstorm version 2016.2 License Server激活

    phpstorm version 2016.2 License Server激活 安装后,在激活的时候选择 license server; 输入如下地址激活: http://jetbrains.ten ...

  9. Linear Algebra lecture 2 note

    Lecture2 Elimination Inverses Permutation 消元法介绍(elimination): 有方程组 提取系数,形成矩阵为: 消元的思想跟解方程组中先消除未知数的思路一 ...

  10. UVA213 信息解码

    对于lrj的想法,真是太清晰.自己真的是很难去做到.贴此代码,加以练习,加以感悟. #include<cstdio> #include<cstring> ][<<] ...