css3-flex(下)
来源:互联网 发布:java url连接 编辑:程序博客网 时间:2024/06/05 01:04
css3-flex(下)
条目(flex item)的属性以下6个属性设置在条目(flex item)上。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
(1)order 默认是0 小的排在前面 大的排列在后面
<div class="container"> <div class="item01">item01</div> <div class="item02">item02</div> <div class="item03">item03</div> <div class="item04">item04</div></div><style> .container{ width: 600px; height:200px; background-color: #ccc; display: flex; display: -webkit-flex; flex-direction:row; } .container div{ width: 80px; height: 80px; color: white; } .item01{ background-color: red; order: 3; } .item02{ background-color: green; order:2; } .item03{ background-color: skyblue; } .item04{ background-color: gold; }</style>效果如下:(2)flex-grow属性
flex-grow
属性定义条目(flex item)的放大比例,默认为0
,即如果存在剩余空间,也不放大。
.container{ width: 600px; height:200px; background-color: #ccc; display: flex; display: -webkit-flex; flex-direction:row;}.container div{ width: 80px; height: 80px; color: white;}.item01{ background-color: red; flex-grow:1; -webkit-flex-grow: 1;}.item02{ background-color: green; flex-grow:2; -webkit-flex-grow: 2;}.item03{ background-color: skyblue; flex-grow:3; -webkit-flex-grow: 3;}有点类似android 布局中的权重 weight如果所有条目的
flex-grow
属性都为1,则它们将等分剩余空间(如果有的话)。如果一个条目的flex-grow
属性为2,其他条目都为1,则前者占据的剩余空间将比其他项多一倍。(3)flex-shrink属性
如果所有项目的
flex-shrink
属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink
属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。
(4) flex-basis属性
flex-basis
属性定义了在分配多余空间之前,条目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即条目的本来大小。flex-basis: <length> | auto; /* default auto */
width: 600px; height:200px; background-color: #ccc; display: flex; display: -webkit-flex; flex-direction:row;}.container div{ width: 80px; height: 80px; color: white;}.item01{ background-color: red; flex-basis: 100px; -webkit-flex-basis: 100px;}.item02{ background-color: green; flex-basis: 200px; -webkit-flex-basis: 200px;}.item03{ background-color: skyblue; flex-basis: 100px; -webkit-flex-basis: 100px;}它可以设为跟
width
或height
属性一样的值(比如350px),则条目将占据固定空间。(5) flex属性(一种简写方式)
.container{ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}
flex
属性是flex-grow(权重)
,flex-shrink
和flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。该属性有两个快捷值:
auto
(1 1 auto
) 和 none (0 0 auto
)。建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
(6)align-self属性
align-self
属性允许单个条目有与其他条目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。.container{ width: 400px; height: 300px; background-color: #ccc; display: flex; display: -webkit-flex; align-items: flex-start;}.container div{ width: 100px; height: 100px; color: white; }.item01{ background-color: skyblue;}.item02{ background-color: purple; align-self: flex-end;}.item03{ background-color: gold;}flex item的介绍就到这里,瞬间感觉so easy!
阅读全文
1 0
- css3-flex(下)
- css3 flex
- css3 flex
- 【css3】flex
- css3--flex
- css3-box-flex布局
- CSS3属性box-flex
- css3--display:flex;
- CSS3 弹性布局Flex
- 浅撸 css3 flex 布局
- css3中的flex布局
- CSS3 box-flex 属性
- CSS3 Flex计算逻辑
- CSS3 box-flex 属性
- css3-flex-ONE
- css3-flex-two
- Css3的Flex属性
- css3 flex兼容性
- basic setting on Pycharm
- Java Collection 与 Collections的区别
- web开发第八课model
- 免费申请Firefly-RK3288开源板
- 现在做淘客晚了吗?自媒体淘客告诉你答案
- css3-flex(下)
- Laravel框架一:原理机制篇
- 干货 | Active Learning: 一个降低深度学习时间_空间_经济成本的解决方案
- 关于自定义的data-*属性有时候取不到值的问题
- 数据结构与算法(8)---Java语言实现:插入排序
- 二叉树的序列化和反序列化
- Do not mount Vue to <html> or <body>
- Linux常用查询指令
- SQL查询的艺术学习笔记--聚合函数的应用