<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap-3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="./css/api.css" />
<style type="text/css">
html,body{

}
header{
position: relative;
}
header .center{
position: relative;
width: 100px;
height: 50px;
background: url(../image/***.png);
background-size: 74px 19px;
background-repeat: no-repeat;
background-position:center center;
}
/* 横向 弹性盒子布局 */
nav{
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient:horizontal;
-webkit-flex-flow:row;
flex-flow:row;
position: relative;
width: 100%;
height: 40px;
background-color: #e1017e;
}
nav .menu{
-webkit-box-flex:1;
-webkit-flex: 1;
flex: 1;
width:100%;
height: 40px;
line-height: 40px;
font-size:13px;color:#fff; text-align: center;
}
</style>
</head>
<body>
<header>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</header>
<nav>
<div class="menu">水果</div>
<div class="menu">零食</div>
<div class="menu">食材</div>
<div class="menu">牛奶</div>
<div class="menu">蔬菜</div>
</nav>
<div></div>
</body>

css横向 弹性盒子布局的一些属性的更多相关文章

  1. CSS：CSS弹性盒子布局 Flexible Box

    一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...

  2. CSS3总结五：弹性盒子(flex)、弹性盒子布局

    弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...

  3. css position弹性盒子测试

    总结: 1.利用样式height:100%设置div高度为全屏时候必须设置所有的父元素,但是父元素那么多,不可控,所以此法不可行: 2.设置父框架的padding为100px,div进行float,p ...

  4. CSS Flexbox 弹性盒子模型

    CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...

  5. flex属性值----弹性盒子布局

    里面的属性都 是在有display: flex的情况 下才生效. 兼容性写法:   display: -webkit-box; /*老版本语法: Safari, iOS, Android browse ...

  6. flex弹性盒子布局

    一.在需要使用弹性盒子的容器上添加属性:display:flex 或者 display:inline-flex; 二.在父容器上添加flex-direction设置子元素主轴方向: 不写默认值是X轴从 ...

  7. 弹性盒子布局flexbox

    弹性盒子display:flexbox一般应用于父元素的容器上,然后对子元素来进行弹性布局 设置了flexbox的父元素不能设置具体的宽度与高度的值,而是通过子元素来设置值,父元素弹性的包裹既可 相关 ...

  8. css FlexBox 弹性盒子常用方法总结

    总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...

  9. CSS 弹性盒子布局

    学习地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

随机推荐

  1. 算法笔记_161:算法提高 十进制数转八进制数(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 编写函数,其功能为把一个十进制数转换为其对应的八进制数.程序读入一个十进制数,调用该函数实现数制转换后,输出对应的八进制数. 样例输入 9274 样 ...

  2. 【Statistics】均值

    均值 均值(mean)是全部数据的算术平均值,也称为算术平均.在统计学中具有重要的地位,是集中趋势的主要测量值.均值分为:简单均值.加权均值. 简单均值 设代表均值,代表样本各变量值,n代表变量个数, ...

  3. Struts2的国际化入门

    Struts2的国际化入门 Struts2国际化是建立在Java国际化的基础上的,一样是通过提供不同国家/语言环境的消息资源,然后通过ResourceBundle加载指定Locale对应的资源文件,再 ...

  4. Sphinx-安装和配置

    本例是在Linux下, 环境 CentOS6.5 + PHP5.6.8 + MySQL5.6.13 + Sphinx2.3.1-beta 到官网下载对应环境的安装包, 按照官方文档指定步骤进行安装 第 ...

  5. 在项目中增加自定义icon图标

    以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...

  6. 转：C#操作摄像头

    转自: http://blog.csdn.NET/chenhongwu666/article/details/40594365 如有雷同,不胜荣幸,若转载,请注明 最近做项目需要操作摄像头,在网上百度 ...

  7. SqlServer报错：System.Data.SqlClient.SqlException

    在将Asp.Net MVC4项目部署到新机器上进行调试的时候,出现了如下错误: System.Data.SqlClient.SqlException 具体的内容如下: System.Data.SqlC ...

  8. XMind--用他来理清自己的思路

    背景 一图胜千言,多年以前阅读了<图谋职场>后,深刻体会了这一点.工作学习,有效利用各种图,事半功倍. 简介 XMIND不仅可以绘制思维导图,还能绘制鱼骨图.二维图.树形图.逻辑图.组织结 ...

  9. 查询MySql数据库架构信息：数据库，表，表字段

    /*1.查询所有数据库*/ show databases;  /*2.查询所有数据表*/ select * from information_schema.tables where table_sch ...

  10. scut协议配置工具初始化的一些问题

    1.如果点击协议配置工具左上角的项目按钮没反应,说明数据库没有正确配置. 2.数据库创建脚本运行如果乱码,把utf-8改成ansi 3.如果ContractDB不存在就自行创建数据库. 4.使用sql ...