flexbox弹性盒子布局
混合划分
demo1,css:
#demo1{
width: 100%;
background: #ccc;
display: -webkit-flex;/*表示使用弹性布局*/
} #demo1 .item{
flex:;/*占容器的比例*/
text-align: center;
background:#00ff00;
color: #000;
padding: 5px;
margin-left: 2px;
} #demo1 .item2{
flex:;/*占容器的比例*/
text-align: center;
background:#0000ff;
color: #000;
padding: 5px;
margin-left: 2px;
} #demo1 .item3{
width:100px;
text-align: center;
background:#ee00ff;
color: #000;
padding: 5px;
margin-left: 2px;
}
demo1,html
<div id="demo1">
<div class="item">
flex:1
</div>
<div class="item">
flex:1
</div>
<div class="item2">
flex:2
</div>
<div class="item3">
我只有100px
</div>
</div>
实践demo1,看看效果。
不定宽高,水平垂直居中
方法1:可实现屏幕的水平垂直居中
demo2,css(1)
#demo2{
position: absolute;
top: 50%;
left:50%;
z-index:;
-webkit-transform: translate(-50%,-50%);
border-radius: 6px;
background:#00ff00;
border:1px solid #000;
}
demo2,html(1)
<div id="demo2">
<p>不定宽高的水平垂直居中</p><br/>方法1
</div>
方法2:似乎不可实现屏幕的水平垂直居中,只能实现某个容器内的水平垂直居中(容器最好是有宽高)
demo2,css(2)
#demo3{
width:100%;
height: 600px;
background:#ccc;
justify-content: center;
align-items: center;
display: -webkit-flex;/*表示使用弹性布局*/
} #demo3 .item{
/*设计item是个圆形*/
width:50px;
height:50px;
border-radius: 50px;
background:#000;
border:1px solid red;
}
demo2,html(2)
<div id="demo3"> <span class="item"></span> </div>
实践demo2,看看效果
!!补充:
兼容性
1,ios可以使用最新flex布局
2,Android4.4以下只能兼容旧版本的flexbox布局
3,Android4.4及以上,可以使用最新的flex布局
所以,建议使用旧版本兼容性的flexbox布局。
属性替换如下:
新flex布局 | 旧flexbox布局 |
display: -webkit-flex; |
display: -webkit-flex-box; |
justify-content: center; |
box-pack: center; |
-webkit-flex:1 | -webkit-flex-box:1 |
align-items: center; |
box-align: center; |
flexbox弹性盒子布局的更多相关文章
- CSS Flexbox 弹性盒子模型
CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...
- CSS:CSS弹性盒子布局 Flexible Box
一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...
- flexbox弹性伸缩布局
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- flexbox 弹性盒子
flexbox 弹性盒子 1.基本知识 container(容器)属性 flex-direction: row | row-reverse | column | column-reverse 属性决定 ...
- css横向 弹性盒子布局的一些属性
<head> <meta charset="utf-8"> <meta name="viewport" content=" ...
- CSS3总结五:弹性盒子(flex)、弹性盒子布局
弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...
- 弹性盒子布局flexbox
弹性盒子display:flexbox一般应用于父元素的容器上,然后对子元素来进行弹性布局 设置了flexbox的父元素不能设置具体的宽度与高度的值,而是通过子元素来设置值,父元素弹性的包裹既可 相关 ...
- flexbox弹性盒子模型
这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...
- flex属性值----弹性盒子布局
里面的属性都 是在有display: flex的情况 下才生效. 兼容性写法: display: -webkit-box; /*老版本语法: Safari, iOS, Android browse ...
随机推荐
- Json(2)-DataContractJsonSerializer
public static void DataContractSerializeDemo() { User user = new User { UserID = 1 ...
- 大陆Azure 改版
好吧主页的又改版了这下终于容易区分大陆与国际版的区别了.2014年12月12日起改版. 主页再次沦落为找不到东西的后果,其实很少进入这个主页,一般也直接使用http://manage.windowsa ...
- Tools for Presention
ZoomIt v4.5 http://technet.microsoft.com/en-us/sysinternals/bb897434.aspx 微软的教师演示工具 主要有放大,画图,倒计时的功能. ...
- Activity的Launch mode详解 singleTask正解
Activity有四种加载模式:standard(默认), singleTop, singleTask和 singleInstance.以下逐一举例说明他们的区别: standard:Activity ...
- Bash 快捷键
生活在 Bash shell 中,熟记以下快捷键,将极大的提高你的命令行操作效率. 编辑命令 Ctrl + a :移到命令行首 Ctrl + e :移到命令行尾 Ctrl + f :按字符前移(右向 ...
- 关于C与C++的struct,union,enum用法差异
对着代码说话: #include <stdio.h> #include <stdlib.h> struct test { int abc; }; enum _enum {A,B ...
- CustomEditor 自定义预览窗
using UnityEngine; using System.Collections; public class MyTextureView : MonoBehaviour { public Tex ...
- thinkphp对数据库操作有哪些内置函数
getModelName() 获取当前Model的名称 getTableName() 获取当前Model的数据表名称 switchModel(type,vars=array()) 动态切换模型 tab ...
- 机器学习(Machine Learning)&深度学习(Deep Learning)资料【转】
转自:机器学习(Machine Learning)&深度学习(Deep Learning)资料 <Brief History of Machine Learning> 介绍:这是一 ...
- UAP如何根据DeviceFamily显示不同的页面
背景 微软推出UAP 推荐使用响应式的UI,但是难免遇到一些特殊情况需要使用不同的Page来在不同的设备显示. 微软目前最新的VS2015在10074上安装后能够支持这个功能特性,只是暂时没有文档介绍 ...