Flex布局-项目的属性
Flex项目有以下6个属性:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
dom结构如下:
<div class="flexBox box">
<div style="order:1">1</div>
<div style="order:0">0</div>
<div style="order:2">2</div>
<div style="order:4">4</div>
<div style="order:3">3</div>
<div style="order:-1">-1</div>
</div>
效果如下:
flex-grow
属性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大。
css代码如下:
.box{width: 760px;height: 100px;border:1px solid #888;margin-bottom: 10px;}
.flexBox{
display: flex;
display: -webkit-flex;
}
.box div{width: 100px;height: 30px;border:1px solid #09c;text-align: center;box-sizing:border-box;}
dom结构如下:
<div class="flexBox box">
<div style="flex-grow:1">1</div>
<div style="flex-grow:0">0</div>
<div style="flex-grow:-1">-1</div>
<div style="flex-grow:2">2</div>
</div>
效果如下:
可见当 flex-grow 的值为 0 或者 负数 的时候,即使容器有空余空间,项目也不会放大。当 flex-grow 的值>0并且容器有空余空间的时候,项目会按值的比例放大。而放大原则为:项目首先会有设置的宽度,而容器剩余的空间项目会按 flex-grow 的值的比例划分剩余空间并与原有宽度相加。
上面的例子中:
首先每个项目的宽度为100px,此时容器剩余空间为360px,由第一个项目和第四个项目划分,则第一个分得1/3,即120px,第四个项目分得2/3,即240px,与原有宽度相加后第一个项目的宽度为220px,第四个项目的宽度为340px。
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
css代码如下:
.box{width: 400px;height: 100px;border:1px solid #888;margin-bottom: 10px;}
.flexBox{
display: flex;
display: -webkit-flex;
}
.box div{width: 100px;height: 30px;border:1px solid #09c;text-align: center;box-sizing:border-box;}
dom结构如下:
<div class="flexBox box">
<div style="flex-shrink:1">1</div>
<div style="flex-shrink:0">0</div>
<div style="flex-shrink:1">1</div>
<div style="flex-shrink:2">2</div>
<div style="flex-shrink:2">2</div>
</div>
效果如下:
flex-shrink 的值不能为负数,只识别大于等于0的数,可以是小数,当容器空间不够时,项目会按 flex-shrink 的值进行缩小,值为0的项目不会缩小,缩小的规则为按 flex-shrink 的值划分缺少空间,然后在项目设置宽/高的基础上减去响应空间。
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(即如果项目纵向排列,设置的是项目的高度,如果项目横向排列,设置的是项目的宽度)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
css代码如下:
.box{width: 600px;height: 100px;border:1px solid #888;margin-bottom: 10px;}
.flexBox{
display: flex;
display: -webkit-flex;
}
.box div{width: 100px;height: 30px;border:1px solid #09c;text-align: center;box-sizing:border-box;}
dom结构如下:
<div class="flexBox box">
<div style="flex-basis:200px">00px</div>
<div style="flex-basis:1px">1px</div>
<div style="flex-basis:50px">50px</div>
<div style="flex-basis:150px">50px</div>
<div style="flex-basis:auto">auto</div>
</div>
效果如下:
flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。
该属性有两个快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素没有设置align-items属性,则等同于stretch。
css代码如下:
.box{width: 600px;height: 100px;border:1px solid #888;margin-bottom: 10px;}
.flexBox{
display: flex;
display: -webkit-flex;
align-items:center;
}
.box div{width: 100px;height: 30px;border:1px solid #09c;text-align: center;box-sizing:border-box;}
dom结构如下:
<div class="flexBox box">
<div>1</div>
<div>2</div>
<div style="align-self:flex-end;">3</div>
<div>4</div>
<div>5</div>
</div>
效果如下:
如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。
Flex布局-项目的属性的更多相关文章
- Flex布局教程及属性速查
一.Flex布局介绍 伸缩盒模型(flexbox)是一个新的盒子模型,意为"弹性布局",用来为盒状模型提供最大的灵活性,主要优化了UI布局.Flexbox的功能主要包手:简单使用一 ...
- Flex布局-容器的属性
本文部分内容参考阮一峰大神博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex布局即弹性布局,使用起来十分方便灵活 ...
- Flex 布局的各属性取值解释
Flex布局是一种弹性布局.布局样式比较灵活,大多数情况下可以替代float,而且不会脱离文档里流. Flex中定义了两个轴线,一个主轴一个副轴,这个概念你可以想想屏幕坐标系(X轴向右,Y轴向下),F ...
- flex布局以及相关属性
容器的属性: 父元素设置display:flex:子元素即可使用flex布局. flex-direction 决定项目排列方向: .box { flex-direction: row | row-re ...
- flex布局以及常用属性。
(1)flex布局排列 会消除块状属性,所有与块状相关的属性将失效,比如块状元素会独占一行,如图2,设置flex后会在一行排列
- flex布局解说和属性
1. flex-direction 规定当前DIV下面的子元素是横向布局还是纵向布局 row 默认值,横向布局相当于float:left column 纵向,相当于DIV默认的垂直方向 2.justi ...
- flex布局中父容器属性部分演示效果
如图可见flex的属性分为父容器和子容器的属性共12个.关于这些属性具体代表什么意思,网上有很多教程的文章,自觉不能写得比别人更好,所以这里主要写了一些例子关于父容器属性效果的演示,希望可以帮助大家理 ...
- CSS3弹性伸缩布局(二)——flex布局
上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...
- 谈一谈flex布局使用中碰到的一些问题
起因 工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的问题,以及一些有意思的特性,在此写篇博客记录一下. flex三个值的含义 众所周知,flex布局所有的属性有两种:一种作用在弹性容器(F ...
随机推荐
- 剑指offer(4)重建二叉树
题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7, ...
- [CodeForces 471A] MUH and Sticks
题目链接:http://codeforces.com/problemset/problem/471/A 题目数据规模1 - 9,可以用一个数组进行计数,减掉出现四次的数,看看还有几个是非零数,有一个就 ...
- 浅谈String中的==和对象中引用对象类型的==
@Test public void test02() { StringBuffer sb = new StringBuffer(); sb.append('a'); sb.append(11); Sy ...
- C# wnform 请求http ( get , post 两种方式 )
1.Get请求 string strURL = "http://localhost/WinformSubmit.php?tel=11111&name=张三";System. ...
- JavaScript的DOM对象
HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过 ...
- stylus笔记(二)
1.方法 函数 Stylus强大之处就在于其内置的语言函数定义.其定义与混入(mixins)一致:却可以返回值. 默认参数 可选参数往往有个默认的给定表达.在Stylus中,我们甚至可以超越默认参数 ...
- tensorflow和keras混用
在tensorflow中可以调用keras,有时候让模型的建立更加简单.如下这种是官方写法: import tensorflow as tf from keras import backend as ...
- C#Windows窗体中添加了AxWindowsMediaPlayer的详细用法影响键盘操作的问题
最近在写一个飞机大战游戏,但在为游戏背景添加声音的时候,发现添加了AxWindowsMediaPlayer的详细用法音乐控件不能再通过键盘控制飞机的移动了,在网上查了许久,没找到原因,差点就想去找老师 ...
- liunx 安装mysql数据库
yum 安装rz/sz yum install -y lrzsz 卸载Mariadb数据库 查询所安装的MariaDB组件: [root@localhost logs]# rpm -qa | gr ...
- .NET实现IoC
.NET里简易实现IoC 前言 在前面的篇幅中对依赖倒置原则和IoC框架的使用只是做了个简单的介绍,并没有很详细的去演示,可能有的朋友还是区分不了依赖倒置.依赖注入.控制反转这几个名词,或许知道的也只 ...