详情参见此篇博客

http://www.w3cplus.com/css/creaet-equal-height-columns

建议掌握方法四、五

其实,利用最新的flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

对于之前盒子模型基于position+display+float 很难实现的特殊布局,诸如居中对齐(justify content属性,主轴上的对齐方式),等高列(align-items:侧轴上的对齐方式)也提供了简洁的解决方案。

Flex相关语法

flex是flexible box的缩写,意即“弹性布局”

1)display:flex 为容器指定flex布局。

2)下面6个属性设置在容器上

flex-direction:row/row-reverse/column/column-reverse; 该属性决定主轴上的排列方向;

flex-wrap:no-wrap/wrap/wrap-reverse;决定如何换行;

flex-flow:常用,是flex-direction和flex-wrap属性的简写形式,默认是row nowrap;

justify-content:flex-start|flex-end|center|space-between|space_around; 定义了项目在主轴上的对齐方式;

align-items:flex-start|flex-end|center|baseline|stretch;定义了项目在交叉轴上如何对齐;

align-content:flex-start|flex-end|center|space-between|space-around|stretch;定义了多行的对齐方式,如果只有一行,那么该属性不起作用。

3)以下6个属性设置在项目上

order:定义项目的排列顺序,数值越小,排列越靠前,默认为0;

flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

flex-shrink:定义项目的缩小比例,默认为1,即如果空间不够,该项目将缩小。

flex-basis: 定义在分配多余空间以前,项目占据的主轴空间,浏览器根据这个属性,计算主轴是否有多余空间。其默认值为auto,即项目本来大小。

flex:是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto。后两个属性可选

align-self:允许单个项目有与其他项目不同的对齐方式,可覆盖align-items属性。默认为auto,表示继承父元素的align-items属性。

实现多列等高布局_flex布局的更多相关文章

  1. CSS3_伸缩盒模型_弹性布局_等分布局_flex 布局

    伸缩盒模型 CSS3 引入的布局模式 Flexbox 布局 主要思想: 让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间. 特点: display: flex;    只能控制其子元 ...

  2. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  3. css设置多列等高布局

    初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...

  4. 【CSS】 布局之多列等高

    这两天看了不少文章,对于css布局多了一些理解,现在来总结下. 我们来写一个最普遍的Top.Left.Content.Right.Foot布局. 第一步:自然是写一个坯子 <!DOCTYPE H ...

  5. 纯css实现div三列等高布局的最简单方法简化版/也可以多列

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  6. CSS技巧 (2) · 多列等高布局

    前言  最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...

  7. 正padding负margin实现多列等高布局(转)

    转自: 巧妙运用CSS中的负值 (http://www.webhek.com/post/2345qwerqwer.html) 代码来自: https://codepen.io/Chokcoco/pen ...

  8. JQuery插件:动态列和无间隙网格布局Mason.js

    来源:GBin1.com 在线演示 JavaScript提供很多强有力的方案,解决动态列的网格布局(例如:Pinterest).这些方案很有效,但是,有时候,会造成网格的间隙或粗糙的边缘. Mason ...

  9. 移动开发day2_css预处理器_flex布局

    css预处理器 一种技术,可以提高编写css代码的技术而已. 有3种预处理器常见 less sass stylues less使用流程 编写符合less语法的less文件 使用工具 将less编译成 ...

随机推荐

  1. PLSQL PL/SQL Developer Oracle 使用技巧 常用设置 卡顿问题 病毒防范( 附带:配置文件)

    相关工具版本: PL/SQL Developer: 9.0.4.1644 Oracle : Oracle Database 10g Enterprise Edition Release 10.2.0. ...

  2. SpringBoot-JPA入门

    SpringBoot-JPA入门 JPA就是Spring集成了hibernate感觉. 注解,方法仓库(顾名思义的方法,封装好了,还有自定义的方法). 案例: spring: datasource: ...

  3. mysql启动失败“MySQL Daemon failed to start”

    CentOS上,用命令:service mysqld restart 启动mysql报错: # service mysqld restart Stopping mysqld: [ OK ] MySQL ...

  4. 常用Linux文件系统

  5. Centos7虚拟机根分区扩展

    线上的kvm虚拟机,原来只规划了8G,后来发现硬盘动不动就被日志塞满了,需要进行扩容. 扩容步骤如下: 1.先把kvm虚拟机关机 2.在宿主机上进行kvm虚拟机的磁盘扩容 qemu-img resiz ...

  6. 九:MVC主从表数据加载

    EF对关联表数据加载的三种方式: 延迟加载:只有在需要的时候加载数据.EF默认的加载方式. 贪婪加载:一次性组织好数据,全部加载到内存中. 显式加载:需要通过代码手动加载关联表. 延迟加载 virtu ...

  7. Python:出现UnicodeDecodeError: 'utf-8' codec can't decode byte 0xc9 in position 0: invalid continuation byte问题

    我在导入一个csv文件的时候出现了一个问题 报错的内容是这样的: UnicodeDecodeError: 'utf-8' codec can't decode byte 0xc9 in positio ...

  8. 实用:Java基础流计算

    java的流不常用,每次学习完都懂,过了一段时间就全忘了... 记录下一点实用的东西... 需求: 截取文件的前250kb内容 public static void main(String[] arg ...

  9. 使用php实现javascript的escape和unescape函数

    javascript有编码函数escape()和对应的解码函数unescape(),而php中只有个urlencode和urldecode,这个编码和解码函数对encodeURI和encodeURIC ...

  10. python+Appium自动化:toast定位

    Toast简介 Toast是一种简易的消息提示框. 当视图显示给用户,在应用程序中显示为浮动.和Dialog不一样的是,它永远不会获得焦点,无法被点击. 用户将可能是在中间键入别的东西.Toast类的 ...