Flexbox弹性布局
Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性。最新版本兼容IE11+、firefox、safari、chrome、opera及移动端,但移动端ios7.1-8.4需要添加前缀-webkit-。
1.引入
通过对伸缩容器定义两个属性,justify-content定义伸缩项目沿着主轴线的对齐方式为center, align-items定义伸缩项目在侧轴(垂直于主轴)的对齐方式为center,具体如下:
<style>
.parent{
width: 600px;
height: 400px;
border: 1px solid #000;
display: flex; //需要将display值定为flex
justify-content:center;
align-items:center;
}
.child{
width: 200px; //宽度可以为任意
height: 100px; //高度可以为任意
border: 1px solid #000;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
从第一个子节点可以看到Flexbox由Flex容器和Flex项目组成,容器即父元素,项目即子元素。他们之间的一些关系可以这样来表示:
2 伸缩容器
display:flex
当我们使用flexbox布局时候,需要先给父容器的display值定位flex(块级)或者inline-flex(行内级)。当使用了这个值以后,伸缩容器会为内容建立新的伸缩格式化上下文(FFC flex formatting context普通流的一种)
主要表现在以下几点:
[1]float、clear和vertical-align属性在伸缩项目上没有效果
[2]伸缩容器的margin与其内容的margin不会重叠
[3]text-align属性在伸缩容器上没有效果,因为其只可应用于块级block容器
[4]另外,conlumns属性伸缩容器上没有效果
弹性盒模型的两种容器块级伸缩容器和内联伸缩容器的区别类似于block和inline-block的区别,一个独占一行,另一个非独占一行
以下6个属性作用在伸缩容器上
- 伸缩流方向 flex-direction
- 伸缩流换行 flex-wrap
- 伸缩流(包括方向与换行) flex-flow
- 主轴对齐 justify-content
- 侧轴对齐 align-items
- 堆栈伸缩行 align-content
3 伸缩项目
以下6个属性作用在伸缩容器上
- 自身侧轴对齐方式 align-self
- 伸缩基准值 flex-basis
- 扩展比率 flex-grow
- 收缩比率 flex-shrink
- 伸缩性 flex
- 显示顺序 order
具体每个属性的取值以及作用,在这里就不一一解释了,上传一个含有详细内容的文档,供想要了解的人参考。
http://files.cnblogs.com/files/clearsky/flex.zip
Flexbox弹性布局的更多相关文章
- CSS3中的Flexbox弹性布局(一)
CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...
- 【RN - 基础】之FlexBox弹性布局
前言 弹性盒模型(The Flexible Box Module),又叫FlexBox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同的屏幕,为盒装模型提供最大的灵活 ...
- css3 FlexBox 弹性布局
Flex 弹性布局 这个是css3中新添加的内容,现在已经支持所有的浏览器,利用Flex布局,可以简便.完整.响应式地实现各种页面布局. 注意:在设置 flex 后,子元素的flaot ,clear, ...
- CSS3中的Flexbox弹性布局(二)
flexbox详解 flexbox的出现是为了解决复杂的web布局,因为这种布局方式很灵活.容器的子元素可以任意方向进行排列.此属性目前处于非正式标准. flex布局模型不同于块和内联模型布局,块和内 ...
- css flexbox 弹性布局
flexbox 即css flexible box layout. ie9及以下不支持flexbox. flex详细规范(https://www.w3.org/TR/css-flexbox/) 为什么 ...
- Flexbox弹性布局,更优雅的布局
Flexbox,更优雅的布局 Flex 布局教程:语法篇 Flex 布局教程:实例篇 2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得 ...
- CSS3 flexbox弹性布局实例
常用例子 1.居中对齐 <!DOCTYPE html> <head> <meta charset="utf-8"> <style type ...
- React Native 弹性布局FlexBox
React Native采用一中全新的布局方式:FlexBox(弹性布局).可以很方便的实现各种复杂布局,是全新的针对web和移动开发布局的一种实现方式. 何为FlexBox? 完整名称为:the f ...
- 弹性布局--flex方向
flex方向 flex方向由flex-direction特性决定,用于定义弹性布局模式.flex-direction共有4种模式:从左向右.从右向左.从上往下.从下往上. 主轴 主轴的起点与终点定义了 ...
随机推荐
- ueditor编辑器多图上传为什么顺序打乱了
我上一个版本用的是ueditor1.3.6,自从1.4.2版以后,“前端上传模块统一改用webuploader”,ueditor在多图上传一直考虑漏掉了图片顺序的问题. 我的网站在用户上传图片文章的时 ...
- 位运算-出现k次与出现一次
题目:数组中arr只有一个数出现了1次,其他的数都出现了k次,请输出这个只出现了一次的数. 思路:这道题目要求使用位运算实现,如果采用数据结构Map就会简单很多.解此题前先了解不进位加法的思想,比如两 ...
- 十几分钟让你学会MySQL布尔和延迟盲注手工操作
作者:Max老白Gān丶链接:http://www.lofter.com/lpost/1fefbc76_12d25dc31来源:LOFTER 注入常用到的几个函数 1 mid(str,1,3) 字 ...
- Java编程题: 写一个Singleton出来
Singleton模式主要作用是保证在Java应用程序中,一个类Class只有一个实例存在. 一般Singleton模式通常有几种种形式: 第一种形式: 定义一个类,它的构造函数为private的, ...
- [Swift]LeetCode202. 快乐数 | Happy Number
Write an algorithm to determine if a number is "happy". A happy number is a number defined ...
- [Swift]LeetCode668. 乘法表中第k小的数 | Kth Smallest Number in Multiplication Table
Nearly every one have used the Multiplication Table. But could you find out the k-th smallest number ...
- sequelize问题集锦
查询: 查询在指定时间范围内的所有数据 options.where.crawl_time = { $lt: new Date('2017-04-08 00:00:00'), $gt: new Date ...
- 如何优雅的利用Windows服务来部署ASP.NET Core程序
上一篇文章中我给大家讲述了五种部署ASP.NET Core网站的方法,其中有一种方式是通过Windows服务来进行部署,这样既可以做到开启自启动,又不会因为iis的反向代理而损失部分性能.但是美中不足 ...
- 说一说MVC的CustomHandlerErrorAttribute(五)
九月第一篇,呵呵 前言:最近刚入职了一家公司,上司让我维护一个项目,我接手了看了一下项目,try catch 严重影响我的视觉,我直接通过vs插件将其try catch全部替换掉占位符,呵呵. 所以我 ...
- qt实现头像上传功能
想必大家都使用过qt的自定义头像功能吧,那么图1应该不会陌生,本片文章我就是要模拟一个这样的功能,虽然没有这么强大的效果,但是能够满足一定的需求. 图1 qq上传图片 首先在讲解功能之前,我先给出一片 ...