css弹性盒子学习
css3弹性盒子是一种布局方式，在适应不同的屏幕大小的时候，能够确保元素拥有更恰当的排布行为。它只是视觉呈现上的，即显示顺序适应显示空间，与源代码无关，源代码顺序不受影响。
定义一个弹性盒子：
在css中，设置display：
display：flex；/-webkit-flex;
或者 display：inline-flex;
在弹性容器上无效的属性：
多栏布局模块的 column-*属性；
float与clear对弹性项目无效，使用float使元素的display属性为block;
vertical-align对弹性项目的对齐无效。
例子：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<title>
弹性盒子test
</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body{
width:80%;
margin:0 auto;
font:12px Helvetica;
background:#999999;
}
.box{
margin:0px;
min-height:400px;
display:flex; //创建flex容器，对IE10：display:-ms-flexbox;老版本语法：-webkit-box/-moz-box;
flex-direction:row;
display:-webkit-flex;
-webkit-flex-direction:row;
flex-wrap:nowrap;
justify-content:center;//设置弹性项目与弹性容器主轴的对齐方式。
align-items:center;//侧轴对齐方式。
align-content:center;//堆栈伸缩行
}
.box > div{
margin:5px;
padding:5px;
min-height:60px;
min-height:60px;
border:1px solid red;
border-radius:15px;
background:yellow;
-webkit-flex: 1 6 20%; //项目放大比例、项目缩小比例、在分配多余空间之前，项目占据的主轴空间。
flex:1 6 20%;
}
header,footer{
display:block;
margin:4px;
padding:5px;
min-height:100px;
background:#777777;
}
@media all and (max-width:640px){
.box {
-webkit-flex-flow:column;
flex-flow:column;
}
.box>div{
min-height:50px;
max-height:50px;
}
}
</style>
</head>
<body>
<header>弹性盒子实验</header>
<div class="box">
<div class="a">1弹性盒子实验弹性盒子实验弹性盒子实验弹性盒子实验弹性盒子实验弹性盒子实验</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">4</div>
<div class="e">5</div>
<div class="f">6</div>
</div>
<footer>footer</footer>
</body>
</html>
弹性盒子解决了内容难以控制，源码顺序依赖，内容居中等问题，能够实现更好的布局。
css弹性盒子学习的更多相关文章
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- CSS 弹性盒子模型
CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...
- CSS弹性盒子的基本用法
.container { width: 302px; height: 302px; border: 1px solid; display: flex } .item { width: 100px; h ...
- 快速使用CSS 弹性盒子
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现:2009年,W3C提出了一种新的方案 ...
- CSS：CSS弹性盒子布局 Flexible Box
一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...
- css弹性盒子新旧兼容
前言:本篇随笔是对弹性盒子有了解的人来写的这篇文章,具体属性产生的效果这里不做说明,基础的东西去查文档.这里只是总结. 时至今日,css3的flex弹性盒子在移动端基本上都是支持的,但不排除有些些低版 ...
- css弹性盒子
body元素设置: <body> <div id="wai"> <div class="zi">1</div> ...
- css 弹性盒子--“垂直居中”--兼容写法
使用弹性盒子兼容低端适配有时需要: display:flex 和 display:-webkit-box display: -webkit-box; -webkit-box-align: cent ...
- CSS 弹性盒子布局
学习地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout
随机推荐
- Eureka的故事，专注能让你看到别人看不到的事情
有这么一句古老的箴言: 如果你手里有一把锤子,所有东西看上去都像钉子. 其实这句话已经是老调中的老调重弹了,我们程序员有很多锤子:OO.设计模式.语言(C, C++, Java, Python, Ru ...
- Java基础之一组有用的类——Observable和Observer对象（Horrific）
控制台程序. Obserable类提供了一个有趣的机制,可以把类对象中发生的改变通知给许多其他类对象. 对于可以观察的对象来说,类定义中需要使用java.util.Observable类.只需要简单地 ...
- centos Flash Player插件的安装
关于Flash Player插件的安装,其实Fedora官方Wiki文档已经给出了详细的说明,我这里再把重点提取一下: 1. 首先到Adobe Flash Plugin官方下载页面选择YUM for ...
- 示sudo: cd: command not found
执行sudo cd 时出现 sudo: cd: command not found 原因shell shell是一个命令解析器 所谓shell是一个交互式的应用程序. shell执行外部命令的 时候, ...
- Swift游戏实战-跑酷熊猫 03 熊猫跑动动画
这节内容,我们一起来利用SKAction的来为熊猫创建动画,我们将学会通过纹理组产生动画,使用永远循环的SKAction让熊猫不停的跑动. 要点: 枚举的使用:用来记录熊猫的动作状态 enum Sta ...
- PostgreSQL Configuration – managing scary settings
When it comes to highly available database servers and configuration, a very important aspect is whe ...
- 【Origin】 破阵子-未可留 征人调
几朝岁月,悠悠,容颜改,两鬓衰,可恨荣光不留! 一生事,忧心畔,可怜惶惶,不拿年岁当缠头: 只把扑朔往往,人生几回首: 等闲识得料峭处,一腔泪流: 曾记否,三十功名尘与土,不可解忧愁: 青春换得明日花 ...
- 【Origin】时迁念昔
-清明,未曾归,恰大门来沪,晨起准备,车道劳顿,隔五年而见一面,感时事变迁,物各两异,小道旁之争艳花木,觉道长且阻,叹而留记. 清明时节雨纷纷, 不辞跋涉见故人; 红花绿叶皆失色, 握手言欢语无伦. ...
- HDU 1402 A * B Problem Plus（FFT）
Problem Description Calculate A * B. Input Each line will contain two integers A and B. Process to ...
- HDU 3681 Prison Break（BFS+二分+状态压缩DP）
Problem Description Rompire is a robot kingdom and a lot of robots live there peacefully. But one da ...