CSS弹性盒模型flex在布局中的应用
2016-05-24 00:45
811 查看
×
目录
[1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局
【2】在伸缩项目上使用margin:auto
// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d+$/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
目录
[1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局
前面的话
前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法,本文将介绍flex在布局中的应用元素居中
【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items<style> .parent{ display: flex; justify-content: center; align-items: center; } </style>
<div class="parent" style="background-color: lightgrey; height: 100px; width: 200px;"> <div class="in" style="background-color: lightblue;">DEMO</div> </div>
【2】在伸缩项目上使用margin:auto
<style> .parent{ display: flex; } .in{ margin: auto; } </style>
<div class="parent" style="background-color: lightgrey;height: 100px;width: 200px;"> <div class="in" style="background-color: lightblue;">DEMO</div> </div>
两端对齐
<style> .parent{ display: flex; justify-content:space-between } </style>
<div class="parent" style="background-color: lightgrey;height: 100px;width: 200px;"> <div class="in" style="background-color: lightblue;">DEMO</div> <div class="in" style="background-color: lightgreen;">DEMO</div> <div class="in" style="background-color: lightcyan;">DEMO</div> <div class="in" style="background-color: lightseagreen;">DEMO</div> </div>
底端对齐
<style> .parent{ display: flex; align-items: flex-end; } </style>
<div class="parent" style="background-color: lightgrey;height: 100px;width: 200px;"> <div class="in" style="background-color: lightblue; height:20px;">DEMO</div> <div class="in" style="background-color: lightgreen; height:30px;">DEMO</div> <div class="in" style="background-color: lightcyan; height:40px;">DEMO</div> <div class="in" style="background-color: lightseagreen; height:50px;">DEMO</div> </div>
输入框按钮
<style> .inputBox{ display: flex; width: 250px; } .inputBox-ipt{ flex: 1; } </style>
<div class="inputBox"> <input class="inputBox-ipt"> <button class="inputBox-btn">按钮</button> </div>
等分布局
<style> body,p{margin: 0;} .parent{ display: flex; } .child{ flex:1; height: 100px; } .child + .child{ margin-left: 20px; } </style>
<div class="parent" style="background-color: lightgrey;"> <div class="child" style="background-color: lightblue;">1</div> <div class="child" style="background-color: lightgreen;">2</div> <div class="child" style="background-color: lightsalmon;">3</div> <div class="child" style="background-color: pink;">4</div> </div>
多列自适应布局
<style> p{margin: 0;} .parent{display: flex;} .left,.center{margin-right: 20px;} .right{flex: 1;} </style>
<div class="parent" style="background-color: lightgrey;"> <div class="left" style="background-color: lightblue;"> <p>left</p> <p>left</p> </div> <div class="center" style="background-color: pink;"> <p>center</p> <p>center</p> </div> <div class="right" style="background-color: lightgreen;"> <p>right</p> <p>right</p> </div> </div>
悬挂布局
<style> .box{ display: flex; background-color: lightgrey; width: 300px; } .left{ margin-right: 20px; background-color: lightblue; height: 30px; } .main{ flex:1; } </style>
<div class="box"> <div class="left">左侧悬挂</div> <div class="main">主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容</div> </div>
全屏布局
<style> body,p{margin: 0;} body,html,.parent{height: 100%;} .parent{ display: flex; flex-direction: column; } .top,.bottom{ height: 50px; } .middle{ display: flex; flex: 1; } .left{ width: 100px; margin-right: 20px; } .right{ flex: 1; overflow: auto; } .right-in{ height: 1000px; } </style>
<div class="parent" id="parent" style="background-color: lightgrey;"> <div class="top" style="background-color: lightblue;"> <p>top</p> </div> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>left</p> </div> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>right</p> </div> </div> </div> <div class="bottom" style="background-color: lightgreen;"> <p>bottom</p> </div> </div>
// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d+$/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
相关文章推荐
- CSS高效开发实战 4567
- 如何解决CSS伪类hover在IE8中失效的问题?
- 如何在CSS中自定义鼠标样式?
- CSS HACK
- 使用CSS3伪类选择器美化按钮
- css border那点事
- 整理前端css/js/jq常见问题及解决方法(1)
- 一、HTML+CSS基础知识学习笔记
- CSS3文本温故
- html+css 实现文本固定长度,超出显示省略号
- 优化CSS样式
- 样式表
- 样式布局
- css垂直和水平居中显示
- css垂直居中
- DatePicker在studio中样式改变,显示年月,隐藏日的时候同时出现崩溃
- CSS3和HTML问题集锦
- 深入理解 CSS 中的行高与基线
- OOCSS——核心篇
- OOCSS——概念篇