flexbox 弹性盒子

1.基本知识

container(容器)属性

flex-direction:

    row | row-reverse | column | column-reverse

    属性决定主轴的方向

 justify-content:

    flex-start | flex-end | center | space-between | space-around | space-evenly

    属性定义了项目在主轴上的对齐方式

 align-items:

    flex-start | flex-end | center | baseline | stretch

    属性定义项目在交叉轴上对齐方式

flex-wrap:

    nowrap | wrap | wrap-reverse

    属性定义如何换行

 flex-flow

    'flex-directionz'|| 'flex-wrap', column-reverse wrap;

    属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

 align-content

    flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

    属性定义了容器在交叉轴(侧轴)上的对齐方式,该属性对单行弹性盒子模型无效。

  与align-items区别,align-items 行中元素的对齐方式,align-content是多行的时候行本身的对齐方式。如下图:

                              

元素属性

order 属性定义项目的排列顺序。

flex-grow属性定义项目的放大比例,默认是0,不放大。

flex-shrink属性定义了项目的缩小比例,默认是1,空间不足会缩小比例。

flex-basis属性定义了项目默认占据的主轴空间。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写;none 表示(0,0,auto);auto表示(1,1,auto)

align-self定义单个项目在交叉轴上的对齐方式,可覆盖align-items属性

注意:

flex-shrink not work
容器的属性flex-wrap:wrap 会影响 flex-shrink
元素flex-basis 设置 默认宽度。

2.例子

有一个很经典的例子就是

flexbox 弹性盒子的更多相关文章

  1. CSS Flexbox 弹性盒子模型

    CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...

  2. flexbox弹性盒子模型

    这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...

  3. css FlexBox 弹性盒子常用方法总结

    总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...

  4. CSS3 -- FlexBox(弹性盒子)

    盒子模型 CSS中有一种基础设计模式叫盒模型,盒模型定义了Web页面中的元素如何来解析. 在盒模型中主要包括width.height.border.background.padding和margin这 ...

  5. flexbox弹性盒子布局

    混合划分 demo1,css: #demo1{ width: 100%; background: #ccc; display: -webkit-flex;/*表示使用弹性布局*/ } #demo1 . ...

  6. 理解Flexbox弹性盒子

    http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html参考文档 1:要开始使用Flexbo ...

  7. 弹性盒子布局flexbox

    弹性盒子display:flexbox一般应用于父元素的容器上,然后对子元素来进行弹性布局 设置了flexbox的父元素不能设置具体的宽度与高度的值,而是通过子元素来设置值,父元素弹性的包裹既可 相关 ...

  8. Flexbox(弹性盒子)

    CSS3属性:这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. 属性介绍: 创建Flex容器 .container ...

  9. 弹性盒子FlexBox简介(二)

    弹性盒子属性 一.align-content属性 属性作用:用于修改flex-wrap属性行为.类似于justify-content,但它不是设置弹性子元素的对齐,而是设置各个行的对齐. 属性值: f ...

随机推荐

  1. DotNetCore跨平台~为Lind.DotNetCore框架添加单元测试的意义

    回到目录 单元测试大叔认为有几下两个必要的作用,也是为什么要上单元测试的原因 组件,框架在修改和BUG解决后,进行正确性的测试,然后才能打包 业务模块,主要提现在进行业务规则的模拟上面,保证了业务逻辑 ...

  2. Ubuntu系统怎么切换多用户命令界面

    ctrl+alt+F2~F6 切换窗口 返回桌面 Ctrl+Alt+F7

  3. HTML5 高级系列:web Storage

    前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. 这两种方式都是通过键值对保存数据,存取方便,不影响网站性能.他们的用法相同, ...

  4. iOS 应用中加载文档pdf/word/txt

    一.加载PDF文档:应用内打开文档.手机中其他应用打开文档 Demo 首先拖入一个文档pdf.word.txt,打开不同的文档知识 文件名字.类型修改即可 #import "ReadView ...

  5. nginx php上传配置

    .file_uploads 设为On,允许通过HTTP上传文件 2.upload_tmp_dir 文件上传至服务器时用于临时存储的目录,如果没指定,系统会使用默认的临时文件夹(我的机器是/tmp). ...

  6. ES6 let和const命令(3)

    const 用来声明常量.一旦声明,就不能改变. const在声明必须初始化,只声明不赋值会出错 const的作用域与let一样,只在声明的块级作用域有效. const命令声明的常量也不提升,同样存在 ...

  7. tee 命令详解

    作用:将数据重定向到文件,另一方面还可以提供一份重定向数据的副本作为后续命令的stdin . 简单的说就是把数据重定向给文件和屏幕上. 注意:存在缓存机制,每1024 字节输出一次, 若从管道接受数据 ...

  8. 学习Object.assign()

    Object.assign()用于将所有可枚举的值从一个或多个源对象复制到目标对象.它将返回目标对象. 语法 Object.assign(target, ...source); var obj = { ...

  9. Python连接webstocker获取消息

    简介(脚本都是根据网上资料改写) 此脚本主要是客户觉得webstcket不稳定,所以编辑一个脚本,不停的请求web服务器,当发生错误时,脚本自动退出(). 脚本内容 脚本一 # -*- coding: ...

  10. pc端常用导航

    应为经常要写网站,导航部分基本一样,没必要每次都写一遍,下次直接来复制: HTML: <nav> <div class="clearfix container"& ...