弹性盒子是 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. java 基础 - 反转字符串

    反转字符串 public class Main { public static void main(String[] args) { String newStr= strReverseWithArra ...

  2. L89

    His voice was hoarse after several hours' speech.Attributive adjectives precede the noun.I gave the ...

  3. listen 74

    Genes Link Touch and Hearing Sound and touch may seem completely separate, except possibly when play ...

  4. 集训Day5

    生活还得继续 bzoj3771 题面让我笑了很长时间 给出 n个物品,价值为别为Xi且各不相同,现在可以取1个.2个或3个,问每种价值和有几种情况? *顺序不同算一种 很傻逼的一个母函数+容斥,用A( ...

  5. Codeplus2017 12月赛——可做题1

    题目:https://www.luogu.org/problemnew/show/P4030 可以发现一个矩阵是巧妙矩阵当且仅当其所有二阶子矩阵都是巧妙矩阵: 将不巧妙的二阶矩阵计为1,维护二维前缀和 ...

  6. TextBox的OnTextboxChanged事件里对Text重新赋值带中文， 导致崩溃

    今天遇到一个超级bug, Textbox做了限制, 只能输入数字. 结果在搜狗输入法输入中文时导致崩溃, 出错信息如下: 未处理 System.InvalidOperationException   ...

  7. 前端PHP Session的实例

    登陆例子:(请注意一定要自己敲一遍,不要CV大法) 首先上一下成果图,激起同学们写的欲望,登录页如下:  点击登陆之后如下: 说明哦了,么问题.接下来自己实现一下. 首先数据库信息: 新建一个名为 l ...

  8. 安装pillow

    最近想学Python的图像操作.首要任务就是安装pillow.这个强大的图形处理工具. 但是我遇到了一个问题. Collecting pilow  Could not find a version t ...

  9. 再学IHanlder 类----------------关于Asp.net与iis原理网上看博客收获写一个验证码用一般处理程序记的好长时间前就写过不过现在再看有点不一样的感觉

    建一个web网站 新建一般处理程序直接贴代码: using System;using System.Collections.Generic;using System.Linq;using System ...

  10. Linux命令总结_touch创建文件

    1.touch命令,用来创建文件或者修改文件时间戳 格式:touch [选项]... 文件... 选项 : -a   或--time=atime或--time=access或--time=use  只 ...