实现多列等高布局_flex布局
详情参见此篇博客
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布局的更多相关文章
- CSS3_伸缩盒模型_弹性布局_等分布局_flex 布局
伸缩盒模型 CSS3 引入的布局模式 Flexbox 布局 主要思想: 让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间. 特点: display: flex; 只能控制其子元 ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- css设置多列等高布局
初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...
- 【CSS】 布局之多列等高
这两天看了不少文章,对于css布局多了一些理解,现在来总结下. 我们来写一个最普遍的Top.Left.Content.Right.Foot布局. 第一步:自然是写一个坯子 <!DOCTYPE H ...
- 纯css实现div三列等高布局的最简单方法简化版/也可以多列
使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...
- CSS技巧 (2) · 多列等高布局
前言 最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...
- 正padding负margin实现多列等高布局(转)
转自: 巧妙运用CSS中的负值 (http://www.webhek.com/post/2345qwerqwer.html) 代码来自: https://codepen.io/Chokcoco/pen ...
- JQuery插件:动态列和无间隙网格布局Mason.js
来源:GBin1.com 在线演示 JavaScript提供很多强有力的方案,解决动态列的网格布局(例如:Pinterest).这些方案很有效,但是,有时候,会造成网格的间隙或粗糙的边缘. Mason ...
- 移动开发day2_css预处理器_flex布局
css预处理器 一种技术,可以提高编写css代码的技术而已. 有3种预处理器常见 less sass stylues less使用流程 编写符合less语法的less文件 使用工具 将less编译成 ...
随机推荐
- hdu 1113 简单字符处理问题
#include <map> #include <cstdio> #include <iostream> #include <string> #incl ...
- 常用javascript对象——Date对象
创建 Date 对象的语法: new Date(); 1:Date 对象属性 <!DOCTYPE html> <html> <head> <meta char ...
- python 画图像训练结果的loss图
得到每个epoch的loss和predict精度后,就可以愉快地画图直观地看出训练结果和收敛性了. # coding:utf-8 import matplotlib.pyplot as plt dat ...
- django+mysql(1)
报错误:mysqlclient 1.3.13 or newer is required; you have 0.9.3 第一种: django降到2.1.4版本就OK了 第二种(仍使用django 2 ...
- 初学java3 条件判断
三目运算符 条件? 正确结果:错误结果 if判断 单一条件判断 if(条件){ }else{ } 多种条件判断 if(){ }else if(){ } ... else{ } switch判断 swi ...
- LeetCode:178.分数排名
题目链接:https://leetcode-cn.com/problems/rank-scores/ 题目 编写一个 SQL 查询来实现分数排名.如果两个分数相同,则两个分数排名(Rank)相同.请注 ...
- Stanford NLP 课堂笔记之正则表达式
1.[]表达式的用法 正则表达式可以让我们匹配我们想要的字符串形式,增加了效率,在自然语言处理领域有较大的作用. 模式 匹配 [Ww]oodchuck Woodchuck,woodchuck [123 ...
- FastJson学习:JSON格式字符串、JSON对象及JavaBean之间的相互转换
当前台需要传送一系列相似数据到后端时,可以考虑将其组装成json数组对象,然后转化为json形式的字符串传输到后台 例如: nodes = $('#PmPbsSelect_tree').tree('g ...
- 【python】python _、__、__xx__之间的差别
本文来自 yzl11 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/yzl11/article/details/53792416?utm_source=copy 单下 ...
- 遍历二叉树 - 基于队列的BFS
之前学过利用递归实现BFS二叉树搜索(http://www.cnblogs.com/webor2006/p/7262773.html),这次学习利用队列(Queue)来实现,关于什么时BFS这里不多说 ...