flex (html弹性布局)
flex是什么?
任何容器都可以指定为flex布局:
.box{
display: flex; /* 行内元素可以使用:inline-flex,webket内核浏览器必须 -webkit-flex */
}
设为flex布局后,子元素的float,clear,vertical-align属性都会失效
概念
属性
属性名称 |
属性解释 |
属性值 |
|
容器的属性 |
flex-direction |
决定item排列方向 |
默认row, row-reverse, column, column-reverse |
flex-wrap |
排列不下时,item如何换行 |
默认nowrap, wrap, wrap-reverse |
|
flex-flow |
direction和wrap的简写 |
默认row nowrap |
|
justify-content |
item在主轴上的对齐方式 |
flex-start, flex-end, center, space-between, space-around |
|
align-items |
item在另一轴上的对齐方式 |
flex-start, flex-end ,center baseline, stretch |
|
align-content |
多根轴线的对齐方式 |
flex-start, flex-end, center, space-between, space-around, stretch |
|
项目的属性 |
order |
决定item的排列顺序 |
默认0,整数,越小越靠前 |
flex-grow |
当有多余空间时,item的放大比例 |
默认0,即有多余空间也不放大 |
|
flex-shrink |
当空间不足时,item的缩小比例 |
默认1,即空间不足时缩小 |
|
flex-basis |
项目在主轴上占据的空间 |
默认auto,长度值(例如100px) |
|
flex |
grow、shrink、basis的简写 |
默认 0 1 auto |
|
align-self |
单个item独特的对齐方式 |
同align-items,以align-self优先 |
参考:http://www.runoob.com/w3cnote/flex-grammar.html
;
flex (html弹性布局)的更多相关文章
- Flex box弹性布局 及 响应式前端设计的优化
Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...
- CSS3:布局display属性的flex(弹性布局)
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- Flutter布局----弹性布局 (Flex)
弹性布局(Flex) 弹性布局允许子组件按照一定比例来分配父容器空间.弹性布局的概念在其它UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout等.Flutter中的 ...
- css3弹性布局语法全解
本文介绍css3弹性布局的语法 html布局 <div class="box"> <div class="item">1</div ...
- 移动端弹性布局--flex
目前,Flex布局,可以简便.完整.响应式地实现各种页面布局.而且,它已得到了所有浏览器的支持,这意味着,我们能很安全地使用这项功能. 如果你对弹性网页布局感兴趣,那可别错过flex这么好用的属性哦. ...
- flex弹性布局学习笔记
前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...
- flex弹性布局
Flex 布局教程:语法篇 原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 作者: ...
- Flex弹性布局在移动设备上的应用
引文 首先,我们有表格布局.当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局. 然后是现在大多数人都在使用的浮动布局.我们可以使用任何我们想用的元素,但浮动并不 ...
- 弹性布局-flex
浅谈display:flex display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢? 一.页面行排列布局 像此图左右两个div一排显示 可以用浮动的布局方式 html部 ...
随机推荐
- Node.js模块导出exports 和 module.exports 的区别
原文: https://blog.csdn.net/Pwiling/article/details/51958693 每一个node.js执行文件,都自动创建一个module对象,同时,module对 ...
- 2017.7.18 windows下ELK环境搭建
参考来自:Windows环境下ELK平台的搭建 另一篇博文:2017.7.18 linux下ELK环境搭建 0 版本说明 因为ELK从5.0开始只支持jdk 1.8,但是项目中使用的是JDK 1.7, ...
- Java三大器之拦截器(Interceptor)的实现原理及代码示例
1,拦截器的概念 java里的拦截器是动态拦截Action调用的对象,它提供了一种机制可以使开发者在一个Action执行的前后执行一段代码,也可以在一个Action执行前阻止其执行,同时也提供了 ...
- fiddler实现后端接口 mock(不需要修改开发代码)
转载:http://blog.csdn.net/huazhongkejidaxuezpp/article/details/50435552 步骤 1. 获取 接口 定义(接口返回的json串) ...
- JAVA Eclipse如何设置点击按钮切换图片
右击图片文件夹,新建一个Android XML文件 设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为sele ...
- unordered_map 与 map 的对比(转)
unordered_map和map类似,都是存储的key-value的值,可以通过key快速索引到value.不同的是unordered_map不会根据key的大小进行排序, 存储时是根据key的ha ...
- JS 导出Table为excel的三种可行方法
[html] view plain copy<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- Linux常见服务器——DHCP服务器的搭建
一.基础知识: 1.DHCP简介: DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)通常被应用在大型的局域网络环境中,主要作用是集中的管理.分配IP ...
- php调用python
test_python.php <?php $k = $_REQUEST['k']; if (!empty($k)) { $k = trim($k); //$a 用来捕获输出 // 这里的arr ...
- MVC基础操作
C#-MVC基础操作-数据的展示及增删改.登录页面及状态保持一.数据展示1.View代码: <%@Page Language="C#" Inherits="Syst ...