<!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. windows下开启mysql表名大小限制

    找到my.ini文件 在文件中找到 [mysqld]的下面, 看有没有 [mysqld] lower_case_table_names 的设置, 如果没有 添加lower_case_table_nam ...

  2. tinyXML的用法

    tinyXML一款很优秀的操作C++类库,文件不大,但方法很丰富,和apache的Dom4j可以披靡啊!习惯了使用java类库的我看到这么丰富的c++类库,很高兴!它使用很简单,只需要拷贝几个文件到你 ...

  3. LintCode StrStr

    1. 讨论目标字符串若为空, 则返回-1: 资源字符串若为空, 则返回-1. 2.讨论目标字符串个数为零, 则返回0: 资源字符串个数为零, 则返回-1. 3. 插入旗帜来使第二循环的结束为有条件地返 ...

  4. telnet -测试端口号

    点击计算机的开始菜单-->运行 ,输入CMD命令,然后确定.打开cmd命令行.   输入telnet测试端口命令: telnet IP 端口 或者 telnet 域名 端口 回车   如果端口关 ...

  5. linuxz终端开启echo颜色显示

    echo输出命令echo [选项] [输出内容]-e //支持反斜线控制的字符转换:控制字符:\a //输出警告音:\b //退格键,也就是向左删除键:\n //换行符:\r //回车键:\t //制 ...

  6. 《C与指针》第十五章练习

    本章例程 15.1打开和关闭文件 #include <stdlib.h> #include <stdio.h> int main(int ac, char **av) { in ...

  7. SQL-server的事务,视图和索引

    (1):  A: B: C: D: 选错误A,D 因为bc不对所以选AD,A:关系数据库中,数据是保存在数据页中的,而索引则是存储在索引页中.因此,数据表中的索引并非越多越好,一个表中如果有大量的索引 ...

  8. Linux-磁盘及网络IO工作方式解析

    PIO与DMA 有必要简单地说说慢速I/O设备和内存之间的数据传输方式. PIO我们拿磁盘来说,很早以前,磁盘和内存之间的数据传输是需要CPU控制的,也就是说如果我们读取磁盘文件到内存中,数据要经过C ...

  9. 移动支持 – ASP.NET MVC 4 系列

           目前,有各种各样的方法可以提高网站应用程序的移动体验.在某些情况下,我们只想在小规格上做一些微小的风格变化:另一些情况下,我们可能完全改变外观显示或者一些视图的内容:最极端的情况下,我们 ...

  10. 关于post请求超出最大长度

    这是因为asp.net默认限制最大上传文件大小为4096kb,而我上传了6000kb+所以超出了限制,需要修改项目的web.config文件即可解决,可以将最大文件长度设置为你需要的长度,我这里设置为 ...