如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些还好,关键移动端竟然不支持这个属性,移动端支持的还是老版本的display:-webki-box;不过对于学习来说,也不管它支持不支持了,学了再说吧,更何况Chrome已经把flex的前缀去了,说明flex多少还是有些稳定的。

下面列出了关于CSS与flex一起使用的一些属性

    • display 显示方式

    • flex-direction 设置flex模型的方向

    • justify-content 设置水平方向的对齐

    • align-items 设置垂直方向的对齐

    • flex-wrap 是否换行

    • align-content 设置换行后的对齐方式

    • flex-flow 简写flex-direction和flex-wrap

    • order 指定顺序

    • align-self 覆盖容器的对齐项目属性

    • flex 指定长度

注意如果设置了宽度盒子是固定的。

弹性盒模型可以设置成·flex 或 inline-flex

display:flex

注意这个被固定住了,默认情况下,沿水平轴,从左至右

inline-flex和flex的效果是一样的,也没弄个所以然出来。

Flex的方向

  flex-direction:属性指定flex的方向。默认值是row(左到右,顶部到底部)

  其他的值如下:

    •   row-reverse - 从右到左,1在最右边,2倒数第2....
    •   column - 垂直排列
    •   column-reverse - 垂直排列并且逆转

row-reverse

column

  

column-reverse

  

水平对齐 --justify-content

  可能的值如下:

    •   flex-start- 默认值。被定位在容器的开头
    •   flex-end - 被定位在容器的端部
    •   center - 被定位在容器的中心
    •   space-between - 项目定位与线之间的空间
    •   space-around - 项目是前定位成空间之间,并且所述线后

flex-end

  

center

  

space-between

  

space-around

  

垂直对齐--align-items

  可能的值如下:

    •   stretch- 默认值。项目被拉伸以适应父元素
    •   flex-start - 被定位在容器的顶部
    •   flex-end - 被定位在容器的底部
    •   center - 被定位在容器的中心
    •   baseline - 被定位在容器的基线

stretch

  

flex-start

  

flex-end

  

center

  

baseline

  

如果没有足够的空间指定是否换行--flex-wrap

  可能的值如下:

    •   nowrap- 默认值。不换行
    •   wrap - 换行
    •   wrap-reverse - 以相反的顺序换行

nowrap

  

wrap

  

wrap-reverse

  

内容对齐--align-content

需要配合flex-wrap使用

可能的值如下:

    •   stretch- 默认值。线路延伸到占用的剩余空间
    •   flex-start - 线路都挤满朝着柔性容器的开始
    •   flex-end - 线路都挤满朝着柔性容器的结束
    •   center - 线路都挤满朝着柔性容器的中央
    •   space-between - 线条均匀地分布在Flex容器
    •   space-around - 线条均匀地分布在Flex容器,用半角空格的两端

center

  

对这个不是很理解,待研究。

指定项目的顺序--order

给第二个添加 order:-1

  

谁的数大,谁在后面

余量将所有额外的空间被吸收到该元素上--margin-right: auto

  

完美水平垂直居中

  

对每个子项目设置对齐--align-self

flex-start、flex-end、center、baseline、stretch

  

指定项目的范围--flex

2,1,1

  

简写flex-direction 和 flex-wrap --flex-flow

flex-flow: row-reverse wrap;

这些还多少有些不完善,以后还会更新进来。

本文内容翻译自:http://www.w3schools.com/

CSS3伸缩布局Flex学习笔记的更多相关文章

  1. CSS3 伸缩布局盒模型记

    CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...

  2. css3伸缩布局中justify-content详解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 弹性伸缩布局-flex

    弹性伸缩布局-flex 引言:本文主要参照阮一峰的网络日志 .郭锦荣的博客总结完成. 正文: 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性 ...

  4. CSS3(5)---伸缩布局(Flex)

    CSS3(5)---伸缩布局 有关页面布局之前写过三篇相关文章: 1.CSS(5)---盒子模型 2.CSS(6)---浮动(float) 3.CSS(8)---定位(position) 一.什么是F ...

  5. css学习_css3伸缩布局 flex布局

    1.flex布局 案例一: 案例二:   保证不至于缩放得太小或太大 案例三:flex的值不一定要写成几份,可以写成固定值 案例四: 竖着3等分(父容器按照高度3等分) !!案例  -----用fle ...

  6. CSS 小结笔记之伸缩布局 (flex)

    CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...

  7. css3 伸缩布局 display:flex等

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. CSS3 伸缩布局盒模型

    CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间.更重要的 ...

  9. CSS3——伸缩布局及应用

    CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用. 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水 ...

随机推荐

  1. Windows Phone 8.1 新特性 - 控件之列表选择控件

    本篇我们来介绍Windows Phone 8.1 新特性中的列表选择控件. 在Windows Phone 8 时代,大家都会使用 LongListSelector 来实现列表选择控件,对数据进行分组显 ...

  2. awk 学习笔记

    awk的语法有两种形式 awk [options] 'script' var=value file(s) awk [options] -f scriptfile var=value file(s) 选 ...

  3. TP-LINK telnet远程 重启路由器

    突然断网,以前房东的路由器管理页面可以打开,今天突然间就打不开了.ping了下,可以ping通,于是就想起了房东的路由器是TP-LINK的 可以 telnet登陆的.每次,断网,我都会重启房东的路由器 ...

  4. VHDL生成的ngc文件被verilog的工程调用的问题

    1. 问题的提出 工程a是一个soft core,用VHDL写的,综合的时候去掉了"Add I/O buffers" ,并将-iob(Pack I/O Registers into ...

  5. explode,split,preg_split性能比较

      explode,split,preg_split性能比较 分类: php2012-07-12 09:46 1109人阅读 评论(1) 收藏 举报 三个函数都是用来对字符串进行分割,下面分几个实验来 ...

  6. Oracle基本数据字典:v$database、v$instance、v$version、dba_objects

    v$database: 视图结构: SQL> desc v$database; Name                                      Null?    Type - ...

  7. 跨平台开源通讯组件elastic communication

    elastic communication是基于c#开发支持.net和mono的通讯组件(简称EC),EC的主要目的简化mono和.net下的通讯开发难度,通过EC可以非常快速地开发基于mono和.n ...

  8. Sql Server tempdb原理-缓存机制解析实践

    Tempdb就像Sqlserver的临时仓库,各式各样的对象,数据在里面进行频繁计算,操作.大量的操作使得tempdb可能面临很大压力,tempdb中缓存的设计就是为了缓解这些压力.这次就为大家介绍下 ...

  9. Unsafe与CAS

    Unsafe 简单讲一下这个类.Java无法直接访问底层操作系统,而是通过本地(native)方法来访问.不过尽管如此,JVM还是开了一个后门,JDK中有一个类Unsafe,它提供了硬件级别的原子操作 ...

  10. 冲刺阶段 day12

    项目进展 周二我们将专业管理部分又继续做了完善,之前漏掉的几项功能也都在熟能生巧中编写的越来越顺畅,但还差最后一点数据库部分没能实现,我们会尽快完成. 存在问题 还是与数据库的连接上出现问题,部分不能 ...