html代码

<div class='items'>

    <div class='item'></div>

    <div class='item'></div>

    <div class='item'></div>

</div>

css代码

items:{

　　display:flex;

　　flex-direction:column;
　　-webkit-flex-direction:column;
　　-moz-flex-direction:column;
　　-o-flex-direction:column;

}

.item{

　　height:40px;

}

利用flex布局来column分布的更多相关文章

  1. sticky footer 和 flex布局的原理

    Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送. 一.使用f ...

  2. Flex布局摆脱float带来的布局问题

    完整文章地址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 使用浮动(float)的一个比较疑惑 ...

  3. FreeMusic项目优化（一）——flex布局学习记录

    参考博客:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html flex布局是w3c于09年提出的,用于简便,整洁,响应式地解决布局问题的手 ...

  4. flex 布局实现固定头部和底部，中间滚动布局

    关键词:display: flex,flex: 1,  overflow-y: scroll; 实现:head 和footer 固定,中间body多了滚动,少了撑满: head和footer宽度根据内 ...

  5. svg矢量图在flex布局中样式扭曲的问题

    问题机型 小米5 华为nova 其他未知的可能机型 问题描述 利用flex 布局的一行中, 左一样式: -webkit-box-flex: 0; flex: 0 1 auto; 左二样式: -webk ...

  6. 轻松pick移动开发第一篇，flex布局

    一.什么是flex布局 首先提问一个问题,一般童鞋都会让子元素水平居中,那么怎么让子元素垂直居中呢?这里就要用到我们的flex布局了. 1.flex 是 flexible Box 的缩写,意为&quo ...

  7. Flex布局教程及属性速查

    一.Flex布局介绍 伸缩盒模型(flexbox)是一个新的盒子模型,意为"弹性布局",用来为盒状模型提供最大的灵活性,主要优化了UI布局.Flexbox的功能主要包手:简单使用一 ...

  8. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  9. css3弹性伸缩布局(一)—————flex布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...

随机推荐

  1. [Leetcode] Sum root to leaf numbers求根到叶节点的数字之和

    Given a binary tree containing digits from0-9only, each root-to-leaf path could represent a number. ...

  2. AES encryption of files (and strings) in java with randomization of IV (initialization vector)

    http://siberean.livejournal.com/14788.html Java encryption-decryption examples, I've seen so far in ...

  3. spring全局异常处理 自定义返回数据结构

    在写api接口中,正常返回和异常错误返回我们都希望很清楚的将这些信息清楚的返回给用户,出现异常情况下需要清楚的知道是参数异常还是未知异常,而不是返回一个不正确的数据结构. 所以此处只针对写api接口时 ...

  4. Linux系统通过AWS命令行上传文件至S3

    打开你的AWS控制台: 在IAM中创建一个新用户(比如test),创建时它会自动创建一个用户安全凭证,是由“访问密钥ID”和“私有访问密钥”组成的,请记住它并下载该凭证,后面会用到它: 选择你刚创建的 ...

  5. arp协议及简单应用

    1:什么是arp协议 参考文章:http://blog.csdn.net/tigerjibo/article/details/7351992 全称是:Address Resolution Protoc ...

  6. shell脚本--部署应用到tomcat并启动tomcat

    #!/bin/sh #----------------------------------------------------------------------------- #备份 #------ ...

  7. sql 语句 插入数据 返回值问题

    1. 主键ID 自增 ,插入数据后返回这条数据的ID值 insert into tableName() values() select @@identity 2.主键ID 使用GUID类型值 ,插入数 ...

  8. redis 设置外网可访问

    前提是你已经把redis的端口放到了防火墙计划中, /sbin/iptables -I INPUT -p tcp --dport 6379 -j ACCEPT /etc/rc.d/init.d/ipt ...

  9. Sublime Text 3 一些简单使用

    1.注释 选中需要注释的代码,“Ctrl+/”单行注释,“Ctrl+Shift+/”多行注释.同样操作,可以取消注释. 2.查找 “Ctrl+F”,在底部会出现快速搜索框,在搜索框中输入需要搜索的变量 ...

  10. 删除linux上7天前后缀名.sql的文件

    #!/bin/bash#delete the file of 7 days agofind /data/mysqlbackup/ -mtime +7 -name "*.sql" - ...