【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 ...
随机推荐
- python脚本监控获取当前Linux操作系统[内存]/[cpu]/[硬盘]/[登录用户]
此脚本应用在linux, 前提是需要有python和python的psutil模块 脚本 #!/usr/bin/env python # coding=utf-8 import sys import ...
- 20165211 2017-2018-2 《Java程序设计》第5周学习总结
20165211 2017-2018-2 <Java程序设计>第5周学习总结 教材学习内容总结 本周,我学习了书本上第五.六两章的内容,以下是我整理的主要知识. 第五章 内部类与异常类 内 ...
- C++ 项目中直接使用JsonCpp源码文件
之前在网上看到使用JsonCpp都是以库的形式使用(编译源码为静态库或者动态库),这样引用很方便,但有时候报错调试看不到错误的地方,所以就想直接把源文件添加到项目中,方便调试 这是用到源码文件: 创建 ...
- 【转】各种消息下wParam及lParam值的含义
转载自:http://bbs.fishc.com/forum.php?mod=viewthread&tid=52668#lastpost 01.WM_PAINT消息 LOWORD(lParam ...
- 【前端】javascript实现带有子菜单和控件的轮播图slider
实现效果: 实现原理: // 步骤 // 1. 获取事件源以及相关元素 // 2. 复制第一张图片所在的li,添加到ul的最后面 // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮 // ...
- thinkphp中的Ueditor的使用, 以及如何传递编辑器内容到后台?
在线编辑器有很多很多, 而且大多是开源的. uediotr基于mit协议, 开源, 可以用于商业和非商业的 任意使用和修改都可以 如果两个相连接的 相邻的 元素之间 因为边框重叠 而显得中间的边框线很 ...
- POJ1251 Jungle Roads （最小生成树&Kruskal&Prim）题解
题意: 输入n,然后接下来有n-1行表示边的加边的权值情况.如A 2 B 12 I 25 表示A有两个邻点,B和I,A-B权值是12,A-I权值是25.求连接这棵树的最小权值. 思路: 一开始是在做莫 ...
- 第十一章 非对称加密算法--DH
注意:本节内容主要参考自<Java加密与解密的艺术(第2版)>第8章“高等加密算法--非对称加密算法” 11.1.非对称加密算法 特点: 发送方和接收方均有一个密钥对(公钥+私钥),其中公 ...
- LOJ#2632. 「BalticOI 2011 Day1」打开灯泡 Switch the Lamp On
题目描述 译自 BalticOI 2011 Day1 T3「Switch the Lamp On」有一种正方形的电路元件,在它的两组相对顶点中,有一组会用导线连接起来,另一组则不会.有 N×M 个这样 ...
- C++ 清空队列(queue)的几种方法
C++中的queue自身是不支持clear操作的,但是双端队列deque是支持clear操作的. 方法一 直接用空的队列对象赋值 queue<int> q1; // process // ...