<!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. 使用node-inspector对Node.js进行调试

    1.通过npm来安装node-inspector npm install -g node-inspector // -g 导入安装路径到环境变量 2.后在命令行中执行“node --debug app ...

  2. test latex1

    equation systems: \begin{equation} 1 + 2 = 3 \ 1 = 3 - 2 \end{equation} align text \begin{align} 1+2 ...

  3. spring简单介绍

    1.spring 的核心技术 IOC(控制翻转)和aop(切面编程) IOC容器是一种设计模式,可以说是工厂模式的升华.它有多种实现方法,其中主要是依赖注入. aop是一种设计思想,通常的功能包括日志 ...

  4. PowerDesigner怎样才能在修改表的字段Name的时候Code不自动跟着变

    怎样才能在修改表的字段Name的时候,Code不自动跟着变 tools-> General   Options-> Dialog:Operation   Modes: 去掉 NameToC ...

  5. linux下如何安装webbench

    1.上传webbench,解压 2.make&&make install进行安装 如果报没有man1目录,则要用 mkdir -p /usr/local/man/man1 然后 mak ...

  6. IIS错误：在唯一密钥属性 fileExtension=".url"时，无法添加类型为“mimeMap”的重复集合项

    代码可以运行,但没有加载上样式,后来在IIS点击MIME类型时报错了 查看web.config中 <staticContent> <mimeMap fileExtension=&qu ...

  7. input常用属性

    对于input的使用,大家都很熟悉的,<input> 标签用于搜集用户信息.根据不同的 type 属性值,输入字段拥有很多种形式.输入字段可以是文本字段.复选框.掩码后的文本控件.单选按钮 ...

  8. serialVersionUID的作用

    Java的序列化机制是通过在运行时判断类的serialVersionUID来验证版本一致性的.在进行反序列化时,JVM会把传来的字节流中的serialVersionUID与本地相应实体(类)的seri ...

  9. 未能加载文件或程序集“AspNetPager”或它的某一个依赖项。参数错误（转）

    未能加载文件或程序集“AspNetPager”或它的某一个依赖项.参数错误. 看你的的开发框架用的是多少的2.0, 3.0, 3.5, 4.0 那么删除的框架的文件夹也相对应的变化   删除 C:\W ...

  10. [NOIP2015] 子串（dp）

    题目描述 有两个仅包含小写英文字母的字符串 A 和 B.现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一 个新的字符串,请问 ...