Css3中display:flex与display:box区别

怀抱清风 2018-08-06

display:box和display:flex区别

答案：没区别,是不同阶段w3c草案命名的不同，

W3C 2009年第1次草案：display:box; 
W3C 2011年第2次草案：display:flexbox | inline-flexbox;- 
W3C 2012年第5次草案及以后的候选推荐标准：display:flex | inline-flex;

如果想兼容更多浏览器可以，可以这样写：

display: -webkit-box;/* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */

display: -moz-box;/* Firefox 17- */

display: -webkit-flex;/* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */

display: -moz-flex;/* Firefox 18+ */

display: -ms-flexbox;/* IE 10 */

display: flex;/* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

下面通过一个实例详细介绍一下display:flex弹性布局

假设有一个底部导航条,效果如下：


Css3中display:flex与display:box区别
  最终代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style type="text/css">
    * {
        padding: 0px;
        margin: 0px;
        list-style: none;
        font-size: 14px;
    }

    footer {
        position: fixed;
        left: 0px;
        bottom: 0px;
        width: 100%;
    }

    .nav {
        display: flex;
        height: 50px;
        align-items: center;
        background: #ccc;
    }

    li {
        flex: 1;
        border-right: 1px solid #000;
        text-align: center;
    }

    li:last-child {
        border-right: none;
    }
    </style>
</head>

<body>
    <footer>
        <ul class="nav">
            <li>首页</li>
            <li>物流</li>
            <li>购物车</li>
            <li>更多</li>
            <li>我的</li>
        </ul>
    </footer>
</body>

</html>
怀抱清风

怀抱清风

相关推荐

css 属性值 display

/* display: block; */ /* 浏览器默认样式 *//* display: inline; */ /* 设置为行内元素 *//* display: none; */ /* 隐藏元素不占空间 *//* display: inline-blo

hellowzm / 0评论 2020-07-19

jquery与css控制元素的隐藏和显示的几种方法

CSS visibility 属性规定元素是否可见。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。display:none和visible:hidden都能把网页上某个元素隐藏起来，在视觉

drdrsky / 0评论 2020-06-04

Spring Boot 连接 ZooKeeper 注册中心发生异常的排查经历

使用 Spring Boot 整合 Dubbo + ZooKeeper 的时候，启动 Provider 时发生异常：

XuNeely / 0评论 2020-04-22

行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。B-1:为什么选择方法一加入table标签?针对B

lyg0 / 0评论 2020-03-07

css display属性详解

css 中display属性决定了一个元素的显示方式，它分别有下面几种显示方式。　　inline-block 行内块级元素显示，可以设置高宽、前后没有换行符。　　list-item 列表块级元素显示，前后都有换行符，但和block不同的是，它可以和li一样

tianzyc / 0评论 2020-02-17

css之display:inline-block布局

使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.不能更改元素的height，width的值，大小由内容撑开.可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom

沈宫新 / 0评论 2020-01-02

web前端入门到实战：css中display属性

设置ul的样式display:inline-block,同时为了让所有的li标签不换行，设置white-space: nowrap为了能让ul的white-space: nowrap生效，li标签需要设置display:inline-block，要消除代码

impress / 0评论 2020-01-02

利用Js/Jquery实现div的隐藏与显示(注意释放与不释放空间)

jQuery隐藏和显示div的方式：1、$.attr;//隐藏div. 方法1 和 方法2 中的 display:none 可以换成 visibility:hidden，display:block可以换成 visibility:visible .两者的区别

89510194 / 0评论 2019-12-31

web前端入门到实战：布局之display属性

在CSS中插何一个元素都是一个盒子，甚至是文本节点也是一个盒子；都有自己的视觉格式化 。而其中CSS的 display 属性又可以显式的修改每个盒子的视觉格式化模型，比如说从 行内级盒子 变成 块级盒子 。那在这一章节中，我们就来一起探讨CSS的 disp

wwwxuewen / 0评论 2019-12-19

[CSS] 伪元素after和属性position:absolute以及display:block之间的关系

为什么after伪元素之后content无法应用高度和宽度？显示范围只有“12”这部分，而没有50px * 50px的框。因为after之后的元素默认display为inline，所以无法响应width和height属性。之前的内容应该是block。inl

hlfsunshine / 0评论 2013-09-02

CSS Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。但是请注意，这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。内联元素只需要必要的宽度，

lcyangcss / 0评论 2019-11-10

Python之游戏开发-飞机大战

bullett.y - hero.y - 40) ** 2) ** 0.5 < 40 and bullett.baozhaflag == 0:

zhangpan / 0评论 2019-11-09

实现Linux待机的命令

if [ "$STATUS" == " DPMS is Disabled" ]. # find out if the monitor is on

liushi / 0评论 2007-11-13

Linux系统下设置DISPLAY笔记

所以要切换用户也可以用 X11的话，就要export DISPLAY=localhost:12.0或者将此export DISPLAY=localhost:12.0写入profile文件。[sky@smsgw ~]$ su - OraclePassword

超哥Blog / 0评论 2007-09-30

Linux中DISPLAY的设置

所以要切换用户也可以用 X11的话，就要export DISPLAY=localhost:12.0或者将此export DISPLAY=localhost:12.0写入profile文件。[sky@smsgw ~]$ su - OraclePassword

libowenhit / 0评论 2007-09-27

css页面布局技巧

display:inline-block; /*变成行内块元素，让元素宽度自适应，不继承父元素宽度；*/

wangnantjobj / 0评论 2019-11-03

Python3 code to display hostname and IP address

OS: Windows 7. #!/usr/bin/env python3. # Python3 code to display hostname and. # IP address. # Importing socket library. import

宿舍 / 0评论 2019-10-21

一个简单的CSS弹出窗

今天为大家介绍一款简单的弹出窗。大家在浏览网页的时候就会遇到某些提示信息或者是警告信息，这些信息也往往是以弹出窗的形式出现的。这些弹出窗口也往往是以浏览器默认的样式出现的，各个浏览器或者是手机网站渲染的效果也往往不同。下面做一个统一的弹窗框，可以根据根据自

zyhui / 0评论 2014-11-13

CSS布局 ——从display，position， float属性谈起

页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。让我们从基础的CSS知识谈起，相信很多初学者和

怀抱清风 / 0评论 2017-03-06

C语言的10大基础算法

算法是一个程序和软件的灵魂，作为一名优秀的程序员，只有对一些基础的算法有着全面的掌握，才会在设计程序和编写代码的过程中显得得心应手。本文是近百个C语言算法系列的第二篇，包括了经典的Fibonacci数列、简易计算器、回文检查、质数检查等算法。也许他们能在你

qscool / 0评论 2019-09-04

解决CSS中 display 与 visibility 的区别

大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示。

ZiXuanFY / 0评论 2007-03-04

CentOS 7 修改default.target 不能启动的处理办法

修改启动项，在 initrd16 末尾添加 init=/bin/sh, Ctrl+x 启动。最后 exec /sbin/init 启动到命令行模式。

87324554 / 0评论 2016-09-24

使用xmamager来连接centos

-A RH-Firewall-1-INPUT -m state --state NEW -m udp -p udp --dport 177 -j ACCEPT. Execution Command可以填写/usr/bin/gnome-session --d

liuyanwuyu / 0评论 2011-11-10

数字媒体资源管理系统Razuna安装使用

Razuna依赖的库安装如下

老王的技术 / 0评论 2015-05-16

判断程序实例是否已经运行的N种方法（判断窗口已经运行）

对于某些情况，我们可以通过判断窗口是否正在运行来保证只有一个程序实例运行。

永不妥协 / 0评论 2010-10-19

HIVE QL

https://cwiki.apache.org/confluence/display/Hive/HiveQL#HiveQL-Set%2Fgetsystemproperties

taisenki / 0评论 2013-04-26

解决淘宝客户端获取sessionKey的问题。

appkey={appkey} 授权后会在页面上得到一个字符串。当然通过神马httpclient啊之类的抓取页面源码都是抓取不到的。只有通过swt的不知道神马版本里面有一个browser.getText();才能得到源代码。之后把得到的字符串解码就OK了。

mwx / 0评论 2012-09-01

All you need of Email/PDF

SDNWikiisagreateplace http://wiki.sdn.sap.com/wiki/display/ABAP/Sending%20Mails%20-%20Home%20Page http://wiki.sdn.sap.co

托尼写代码 / 0评论 2010-09-15

display tree

<!<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">. vartemp,temp2,cookieArray,cook

高超ELEMENTS / 0评论 2009-11-26

css实现水平垂直居中

纯CSS实现水平垂直居中最近的几场面试都问了这个问题，自己也只答了2种，感觉面试官不满意，特地总结了几种在开发中比较实用的方法，与大家分享。</div>因为margin/padding的百分比值是参照父元素的width，所以无法用百分比。

Alisa0 / 0评论 2019-07-01

Jenkins Wiki

https://wiki.jenkins-ci.org/display/JENKINS/Use+Jenkins

leonranri / 0评论 2016-06-12

solr(6)Version 5.2.0 and Information

References:. solrtoprod

年轻就要对味 / 0评论 2015-07-13

springMVC的一个demo

首先到引入jar包 ，懒得分类，直接把下载的spring所有都copy进去了，自己查查各个jar包都是干嘛的。

lhhhoo / 0评论 2015-04-24

CSS中的多种居中方式

居中的多种方式flex布局居中是我目前使用最多的一种方式，flex布局也是现在最方便的一种布局，广泛用于pc端和移动端。}grid布局居中grid布局是一种比flex更加强大的布局，但是目前兼用性并不好，我使用的并不多，但也能实现居中。}display:

afeichuanqi / 0评论 2019-06-29

控件和背景图片一样大小

static Display display = Display.getDefault();static Image backgroundImage = new Image(display, UsingImage.class. static Image i

dazhi00 / 0评论 2013-12-13

Dubbo简介

Dubbo地址。开源地址

夫子与歌 / 0评论 2013-05-11

6种不同的CSS实现垂直水平居中

<!DOCTYPE html>. width: 200px;height: 200px;background: #cccccc;margin-top: 10px;display: table-cell;vertical-align: middl

冰蝶 / 0评论 2018-08-17

前端入门-day2（常见css问题及解答）

写在前面今天是入门前端的day2, 小伙伴们应该已经看了一些HTML的基础和CSS的基础了，是不是遇到了很多关于CSS的问题呢。因为HTML很少有太复杂的问题，所以直接写一篇关于CSS的常见问题及解答啦~display: none;不会再占据空间，就跟不存

懵懂听风雨 / 0评论 2019-06-28

一个高度不固定的div，里面的文字如何垂直居中？

我也找了老半天，后来发现一个很强势的写法 简单暴力// 加在父级div中垂直居中：align-items:center; display: -webkit-flex;水平居中：justify-content:center; display: -webkit

FZfeng / 0评论 2018-04-04

css之display

<p>当一个元素中的display属性是none时，浏览器不会渲染这个元素里的任何内容，不会占据浏览器窗口空间，但它存在与文档流当中。<div class="content">display属性为inline的元

coulder / 0评论 2019-06-28

html布局之table表格布局

使用与表格相关的display属性值只是声明了某些元素在浏览器中的样式而不包含语义。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿table对象，使其符合table/inline-table

caiselangren / 0评论 2017-09-25

css控制图片不改变原比例居中显示，图片超出div部分隐藏

<!DOCTYPEhtml>. display:flex;flex-direction:row;width:200px;height:200px;overflow:hidden;display:flex;justify-content:cent

hhhkhhh / 0评论 2017-07-20

CSS魔法堂：display:none与visibility:hidden的恩怨情仇

前言还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗？是不是回答完display:none不占用原来的位置，而visibility:hidden保留原来的位置后，面试官就会心一笑呢？其实不

k韶华 / 0评论 2019-06-28

CSS布局 ——从display，position， float属性谈起

页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。让我们从基础的CSS知识谈起，相信很多初学者和

cfang00 / 0评论 2017-03-06

css实现居中、自适应

水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法。.child{display: inline-block;}优点：兼容性好；不足：需要同时设置子元素和父元素。.child{display:t

realitycss / 0评论 2019-06-28

Jquery点击弹出遮罩层

<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv" />

刁连通 / 0评论 2016-05-06

gulp常用的plugin描述（陆续更新）

用来将对应管道中的文件生成.map文件，而.map文件的作用就是让浏览器在对应加载的代码上找到映射的源，比如通过加载的css找到对应的sass. 用来启动一个web服务，是的可以通过HTTP的方式来调试web页面，也可以在里面进行配置访问代理，总的来讲就是

json / 0评论 2016-04-13

css在JQuery、JS、HTML中的写法

//不止一个属性 $.css;在js中写法：

hjfbluesky / 0评论 2016-03-29

CSS属性中Display与Visibility的区别

两者都可以用来控制元素的显示和隐藏，visibility属性用来确定元素是显示还是隐藏来表示，visible表示显示，hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据所在文档流中

vavid / 0评论 2016-03-20