弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

这东西很方便呀，要分清容量属性和条目属性，想用条目属性之前要在父元素中添加：display：flex。

做了一个简易的菜单栏应用了一下这个模型：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>弹性盒模型</title>

    <style type="text/css">

        body,ul{

            margin:0;

            padding:0;

        }

        ul{

            list-style:none;

        }

        .menu_con{

            width:960px;

            height:80px;

            background-color:#ddd;

            margin:50px auto 0;

            display: flex;

        }

        .logo{

            width:80px;

            height:80px;

            background-color: gold;

        }

        .menu{

            flex-grow: 1;

            display:flex;

            align-items:center;

            overflow:hidden;

        }

        .menu li{

            flex-grow:1;

            border-right:1px solid #333;

            margin-right:-1px;

            text-align: center;

        }

        .menu li a{

            text-decoration: none;

            color:#666;

        }

        @media(max-width:960px){

            .menu_con{

                width:100%;

            }

        }

    </style>

</head>

<body>

    <div class="menu_con">

        <div class="logo"></div>

        <ul class="menu">

            <li><a href="#">首页</a></li>

            <li><a href="">首页</a></li>

            <li><a href="">首页</a></li>

            <li><a href="">首页</a></li>

            <li><a href="">首页</a></li>

        </ul>

    </div>

</body>

</html>

CSS——弹性盒模型的更多相关文章

  1. 深入理解CSS弹性盒模型flex

    × 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...

  2. CSS弹性盒模型(flex box)

    本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...

  3. CSS弹性盒模型flex概念

    盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模型. 先说CSS的伸缩盒模型:flex模型是CSS3引入的新的布局模型,是flexible box的缩写,一般称之为弹性盒模型.和CSS ...

  4. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  5. CSS弹性盒模型 box-flex

    目前没有浏览器支持boc-flex属性. Firefox支持代替的-moz-box-flex属性 Safari.Opera以及Chrome支持替代的-webkit-box-flex属性 box-fle ...

  6. css 弹性盒模型Flex 布局

    参考文章:http://www.runoob.com/w3cnote/flex-grammar.html Flex 布局是什么:采用Flex布局的元素,称为Flex容器(flex container) ...

  7. css和css3弹性盒模型实现元素宽度（高度）自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. 关于ie中实现弹性盒模型-我的css

    css3中的弹性盒模型大家都不陌生,但是能否在ie6中实现呢?第三方库中涉及到的页少之又少,也有一部分css框架中支持各种布局,下面给出我用的盒模型样式(为了以后copy方便而已): /******* ...

  9. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

随机推荐

  1. spring2.5和struts1.3.8整合

    第一步:导入对应jar文件 第二步: 1.在web容器中实例化spring容器 <!-- 指定spring的配置文件,默认从web根目录寻找配置文件,我们可以通过spring提供的classpa ...

  2. BZOJ_1998_[Hnoi2010]Fsk物品调度_并查集+置换

    BZOJ_1998_[Hnoi2010]Fsk物品调度_并查集+置换 Description 现在找工作不容易,Lostmonkey费了好大劲才得到fsk公司基层流水线操作员的职位.流水线上有n个位置 ...

  3. BZOJ4278 [ONTAK2015]Tasowanie[后缀数组+贪心]

    题目 求两数组归并后的数组最小字典序排列. 嘛,可能本人在贪心这块还是太弱了(或者说什么都弱),如果不知道是字符串题估计也想不起来用sa. 显然看得出归并时字典序小的那个数组先往里面加,这就是要比较两 ...

  4. U盘安装CentOS的坑

    坑一:U盘安装盘配置的路径错误 采用UltraISO制作的CentOS7的安装光盘,但是在实体机安装的时候,发生了一些奇怪的失败,比如 dracut-initqueue timeout等,后来在网上搜 ...

  5. vijos:P1053Easy sssp(spfa判环)

    描述 输入数据给出一个有N(2 <= N <= 1,000)个节点,M(M <= 100,000)条边的带权有向图. 要求你写一个程序, 判断这个有向图中是否存在负权回路. 如果从一 ...

  6. python list列表sort、sorted、reverse排序

    列表排序:sort是修改原列表,sorted提供原列表的一个有序副本 li=[2,1,4,5,0]li.sort() #默认从小到大print li结果:[0, 1, 2, 4, 5] li=[2,1 ...

  7. Advanced R之编程风格

    转载请注明出处,谢谢.   编程风格指导 好的编码风格如同正确使用标点符号一样重要.没有编码规范仍然可以管理代码,但是有代码规范会使代码更易阅读.如同标点样式,编码规范也有不同.下面描述的是我所使用的 ...

  8. JavaScript高级程序设计学习笔记第九章--客户端检测

    1.能力检测:能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力.(我的理解就是识别浏览器能做什么不能做什么) 2.怪癖检测:目标是识别浏览器的特殊行为.但与能力检测确认浏览器支持什么能力不同, ...

  9. CF-835C

    C. Star sky time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...

  10. QTableWidget笔记

    1.QTableWidget继承自QTableView. 2.头文件:QTableWidget 3.简单使用: #include "mainwindow.h" #include & ...