新版弹性盒

兼容到IE10及以上

flex小游戏

display: flex;

设置为弹性盒(父元素添加)

flex-direction

用来来确定主轴的方向,从而确定基本的项目排列方向。

参数 说明
row (默认值)主轴为⽔平⽅向,起点在左端
row-reverse 主轴为水平方向,起点在右端
column 主轴为垂直方向,起点在上沿
column-reverse 主轴为垂直方向,起点在下沿(反转纵向排列,从下往上排,最后一项排在最上面)

justify-content(主轴对齐方式)

内容对齐,应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐

参数 说明
flex-start (默认值)左对齐
flex-end 右对齐
center 居中对齐
space-between 两端对齐,中间自动分配
space-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍

align-items(侧轴对齐方式)

侧轴对齐方式

参数 说明
flex-start 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界
flex-end 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界
center 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)
baseline 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐

flex-wrap

默认情况下,项目都排在一条线上(又称“轴线”)上。 flex-wrap 属性定义,如果以条轴线排不下, 如何换行。
该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

参数 说明
nowrap flex容器为单行。该情况下flex子项可能会溢出容器
wrap flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行
wrap-reverse 反转 wrap 排列

align-content(行与行之间对齐方式)

当伸缩容器的侧轴还有多余空间时,本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式,这与调准伸缩项目在主轴上对齐方式的 <' justify-content'> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。(属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用)

参数 说明
stretch (默认值)轴线占满整个交叉轴
flex-start 没有行间距
flex-end 底对齐没有行间距
center 居中没有行间距
space-between 两端对齐,中间自动分配
space-around 自动分配距离

align-self

属性规定灵活容器内被选中项目的对齐方式。
属性可重写灵活容器的 align-items 属性

参数 说明
auto (默认值)元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"
stretch 元素被拉伸以适应容器
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
center 元素位于容器的中心

order

number排序优先级,数字越大越往后排,默认为0,支持负数。

flex

复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。

缩写「flex: 1」, 则其计算值为「1 1 0%」

缩写「flex: auto」, 则其计算值为「1 1 auto」

flex: none」, 则其计算值为「0 0 auto」

flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」,即「flex」初始值

flex三个属性值介绍

参数 说明
flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量
flex-shrink 一个数字,规定项目将相对于其他灵活的项目进行收缩的量
flex-basis 项目的长度

CSS3 -- 弹性盒的更多相关文章

  1. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  2. css3基础教程:CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  3. CSS3弹性盒模型,Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

  4. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  5. css3弹性盒模型flex快速入门与上手(align-content与align-items)

    接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...

  6. css和css3弹性盒模型实现元素宽度(高度)自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. CSS3弹性盒布局方式

    一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的 ...

  8. (转)详解css3弹性盒模型(Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  9. css3弹性盒模型

    一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...

  10. 深入理解 CSS3 弹性盒布局模型

    Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最 ...

随机推荐

  1. mysql常用引擎

    经常用MySQL数据库,但是,你在用的时候注意过没有,数据库的存储引擎,可能有注意但是并不清楚什么意思,可能根本没注意过这个问题,使用了默认的数据库引擎,当然我之前属于后者,后来成了前者,然后就有了这 ...

  2. Linux中 cmake-3.x 编译安装以及man page添加

    首先回顾一下 cmake-2.x 的编译安装. ================ cmake-2.x编译安装说明 ================编译安装的命令: ./bootstrap --pref ...

  3. <cctype>的用法

    #include<cctype> 1.isalnum() 检查字符c是十进制数还是大写还是小写字母.如果是,则返回true:如果不是,则返回false. 2.isalpha() 检查字符c ...

  4. 《C程序设计语言》学习笔记

    1. 在C程序中,如果字符串过长而需要跨行时,要在换行时加上“\”. printf("Hello, world"); // error printf("Hello, wo ...

  5. javaSE总结(一)-java数据类型和运算符

    一.注释 (1)单行注释: // (2)多行注释:/*  */  (3)文档注释:/**  */ 二.标识符和关键字 (1)分隔符:分号; 花括号{} 方括号[] 圆括号() 空格 圆点(.)     ...

  6. (九)springMvc 的 post 提交乱码

    #post 提交乱码 在 web.xml 配置下 过滤器 : <!--解决 post 乱码问题,--> <filter> <filter-name>characte ...

  7. 剑指offer38:输入一棵二叉树,求该树的深度

    1 题目描述 输入一棵二叉树,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度. 2 思路和方法 深度优先搜索,每次得到左右子树当前最大路径,选择 ...

  8. 第6章:使用Python监控Linux系统

    1.Python编写的监控工具 1).多功能系统资源统计工具dstat dstat是一个用Python编写的多功能系统资源统计工具,用来取代Linux下的vmstat,iostat,netstat和i ...

  9. StoneTab标签页CAD插件 3.1.0

    //////////////////////////////////////////////////////////////////////////////////////////////////// ...

  10. OPENGL 显示BMP图片+旋转

    VS2010/Windows 7/ 1. 需包含头文件 stdio.h, glaux.h, glut.h.需要对应的lib,并添加包含路径 2. 窗口显示用glut库的函数 3. bmp图片从本地读取 ...