<!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. C#获得网络连接信息 IPGlobalProperties

    IPGlobalProperties 提供有关本地计算机的网络连接的信息. 此类提供有关本地计算机的网络接口和网络连接的配置和统计信息 可以获取本机TCP UDP 丢包 发包等数据. 此类提供的信息与 ...

  2. Pyhon环境搭建-window

    1.安装python3.4.3版本 地址:(64位)https://www.python.org/ftp/python/3.4.3/python-3.4.3.amd64.msi (32位)http:/ ...

  3. C#面向接口编程详解（1）——思想基础

    我想,对于各位使用面向对象编程语言的程序员来说,“接口”这个名词一定不陌生,但是不知各位有没有这样的疑惑:接口有什么用途?它和抽象类有什么区别?能不能用抽象类代替接口呢?而且,作为程序员,一定经常听到 ...

  4. 修改安卓串口蓝牙app问题记录

    * 在网上下载的安卓的蓝牙串口app都是基于eclipse的,但往as里边导入时都存在问题. 迫不得已最后我使用的办法还是在as下面新建工程,然后把相关文件导入.不过还是遇到了其他的问题. * 某个蓝 ...

  5. charles使用

    charles和fillder功能差不多,易用性更好些 1.安装和破解,替换charles.jar文件 2.手机代理: 设置charles 设置手机wifi将http代理修改成手动,填写本机ip地址和 ...

  6. Javascript 自动计算生日

    首先调用方法需要注意 //inner_page为外围大层,确保时间可以实时修改  $(".inner_page").mouseover(function() {        va ...

  7. Convert.ToInt32()与int.Parse()的区别

    Convert.ToInt32()与int.Parse()的区别 (1)这两个方法的最大不同是它们对null值的处理方法:    Convert.ToInt32(null)会返回0而不会产生任何异常, ...

  8. h5调用摄像头

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  9. Todo List

    Contest 11.13 2016ACM/ICPC亚洲区青岛站(5/13, solved 7/13) Training 11.06 2016年中国大学生程序设计竞赛(合肥)(solved 6/10) ...

  10. 《C与指针》第十二章练习

    本章例程 //12.3 #include <stdio.h> #include <stdlib.h> typedef struct NODE{ struct NODE *lin ...