【css】弹性盒模型
弹性盒模型flexBox
弹性盒模型是c3的一种新的布局模式
它是指一种当页面需要适应不同屏幕大小以及设备类型时，确保元素有恰当行为的布局方式。
引入弹性盒模型布局的目的是提供一种更有效的方法来对一个容器中的子元素进行排列、对齐和分配空白空间。
兼容性
IE11
弹性盒模型内容
弹性盒模型由弹性容器（flex container）和弹性子 元素（flex item）组成
将父容器设置display:flex转换为弹性容器
介绍几个常用方法：
flex-direction:
row:横向从左到右排列，默认
row-reverse:横向从右到左排列（最后一项在最前面）
column:纵向排列
column-reverse:反转纵向排列（最后一项排在最上面）
justify-content:
flex-start:起始点对齐（左对齐）
flex-end:终止点对齐（右对齐）
center:居中对齐
space-around:四周环绕
space-between:两端对齐
让盒子水平垂直居中的方法：
1 使用弹性盒模型 display:flex + justify-content:center + align-items:center
<style>
.box{
width: 400px;
height: 300px;
display: flex; 让盒子变成弹性盒模型
justify-content: center; 居中
align-items: center; 居中
background-color: pink;
} .child{
width: 150px;
height: 150px;
background-color: skyblue;
} </style>
</head>
<body> <div class="box">
<div class="child"></div>
</div>
2 使用position:absolute + transform:translate
.box{
width: 400px;
height: 300px;
position: relative;
background-color: pink;
}
.child{
width: 150px;
height: 150px;
background-color: skyblue;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%)
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
【css】弹性盒模型的更多相关文章
- 深入理解CSS弹性盒模型flex
× 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...
- CSS弹性盒模型(flex box)
本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...
- CSS——弹性盒模型
弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 这东 ...
- CSS弹性盒模型flex概念
盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模型. 先说CSS的伸缩盒模型:flex模型是CSS3引入的新的布局模型,是flexible box的缩写,一般称之为弹性盒模型.和CSS ...
- CSS弹性盒模型flex在布局中的应用
× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...
- CSS弹性盒模型 box-flex
目前没有浏览器支持boc-flex属性. Firefox支持代替的-moz-box-flex属性 Safari.Opera以及Chrome支持替代的-webkit-box-flex属性 box-fle ...
- css 弹性盒模型Flex 布局
参考文章:http://www.runoob.com/w3cnote/flex-grammar.html Flex 布局是什么:采用Flex布局的元素,称为Flex容器(flex container) ...
- css和css3弹性盒模型实现元素宽度（高度）自适应
一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...
- 关于ie中实现弹性盒模型-我的css
css3中的弹性盒模型大家都不陌生,但是能否在ie6中实现呢?第三方库中涉及到的页少之又少,也有一部分css框架中支持各种布局,下面给出我用的盒模型样式(为了以后copy方便而已): /******* ...
- 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
随机推荐
- 20145324王嘉澜《网络对抗技术》web安全基础实践
实验内容 •使用webgoat进行XSS攻击.CSRF攻击.SQL注入 实验问答 •SQL注入攻击原理,如何防御 ①SQL注入攻击是攻击者在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL ...
- 函数引用参数加const
Fun(const Type& type); 在引用传递的时候,在函数内部改变参数,会改变参数实际值. 加上了const就不能被修改.
- ubuntu下交叉编译mono
环境:ubuntu16.04 wget download.mono-project.com/sources/mono/mono-4.8.1.0.tar.bz2 配置: CC=arm-linux-you ...
- 蚂蚁感冒|2014年蓝桥杯B组题解析第八题-fishers
蚂蚁感冒 长100厘米的细长直杆子上有n只蚂蚁.它们的头有的朝左,有的朝右. 每只蚂蚁都只能沿着杆子向前爬,速度是1厘米/秒. 当两只蚂蚁碰面时,它们会同时掉头往相反的方向爬行. 这些蚂蚁中,有1只蚂 ...
- 51nod 1073约瑟夫环
思路传送门 :http://blog.csdn.net/kk303/article/details/9629329 n里面挑选m个 可以递推从n-1里面挑m个 然后n-1里面的x 可以转换成 n里面的 ...
- 使用Android-studio开发移动app与weex结合开发详细步骤
详细步骤如下: 首先,确保机器已经安装了node.js,并且把npm更新到最新版本 下载完毕后,我们可以看到全局目录下的node_modules下面多出一个weex-toolkit 同时,我们留意 ...
- Unity3D学习笔记（十三）：委托、考试复习
委托:比较什么时候用委托好 下课案例:不用下课铃 1.ClassManager需要拿到所有教室的引用,课堂管理者应该只负责计时并告知每间教室 2.每间教室应该是由当班老师负责是否需要下课,而课堂管 ...
- 项目梳理7——Nuget包管理
1.添加Nuget源 nuget包管理.生成自己的nuget包.向 NuGet 添加更多程序包源 nuget的所有使用介绍 打包示例 .nuspec文件声明的是对应NuGet包的以下内容: 包更新命令 ...
- 【TCP/IP详解 卷一：协议】第二章：链路层
2.1 引言 链路层的三个目的: (1)为IP模块发送和接收IP数据报. (2)为ARP模块发送ARP请求和接收ARP应答.地址解析协议:ARP. (3)为RARP模块发送RARP请求和接收RARP应 ...
- InChat版，仅仅两个接口实现自己的IM系统（可兼容）
InChat 一个IM通讯框架 一个轻量级.高效率的支持多端(应用与硬件Iot)的异步网络应用通讯框架.(核心底层Netty) 版本目标:完成基本的消息通讯(仅支持文本消息),离线消息存储,历史消息查 ...