Flexible 弹性盒子模型之CSS flex-basis 属性

实例

设置第二个弹性盒元素的初始长度为 80 像素:

  1. div:nth-of-type(2){flex-basis:80px;}

效果预览


浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性          
flex-basis 29.0
21.0 -webkit-
11.0
10.0 -ms-
28.0
18.0 -moz-
9.0
6.1 -webkit-
17.0

定义和用法

flex-basis 属性用于设置或检索弹性盒伸缩基准值。。

注意:如果元素不是弹性盒对象的元素,则 flex-basis 属性不起作用。

默认值: auto
继承:
可动画化: 是。请参阅 SS3动画属性CSS3动画实例。 效果预览
版本: CSS3
JavaScript 语法: object.style.flexBasis="200px" 效果预览

CSS 语法

flex-basis: number|auto|initial|inherit;

属性值

描述
number 一个长度单位或者一个百分比,规定灵活项目的初始长度。
auto 默认值。长度等于灵活项目的长度。如果该项目未指定长度,则长度将根据内容决定。
initial 设置该属性为它的默认值。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit
时间: 2024-10-09 02:14:13

Flexible 弹性盒子模型之CSS flex-basis 属性的相关文章

Flexible 弹性盒子模型之CSS justify-content 属性

实例 在弹性盒对象的 <div> 元素中的各项周围留有空白: div { display: flex; justify-content: space-around; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本. 属性           justify-content 29.021.0 -webkit- 11.0 28.018.0 -moz- 9.06.1 -we

Flexible 弹性盒子模型之CSS flex-flow

实例 让弹性盒的元素以相反的顺序显示,且在必要的时候进行拆行: display:flex; flex-flow:row-reverse wrap; 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本. 属性           flex-flow 29.021.0 -webkit- 11.010.0 -ms- 28.018.0 -moz- 9.06.1 -webkit- 17.0 定

Flexible 弹性盒子模型之CSS flex-shrink 属性

实例 让第二个元素收缩到其他元素的三分之一: 效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本. 属性           flex-shrink 29.021.0 -webkit- 11.010.0 -ms- 28.018.0 -moz- 9.06.1 -webkit- 17.0 定义和用法 flex-shri

Flexible 弹性盒子模型之CSS flex-grow 属性

实例 让第二个元素的宽度为其他元素的三倍: div:nth-of-type(1){flex-grow:1;} div:nth-of-type(2){flex-grow:3;} div:nth-of-type(3){flex-grow:1;} 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本. 定义和用法 flex-grow 属性用于设置或检索弹性盒的扩展比率.. 注意:如果元

Flexible 弹性盒子模型之flex

实例 让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容: #main div { flex:1; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本. 定义和用法 flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间. flex 属性是 flex-grow.flex-shrink 和 flex-basis 属性的简写属性. 注意:如果元素不是弹性盒模

flex-direction css3属性设定弹性盒子模型子元素反向排列

设定弹性盒子模型(display:flex)让子元素反向排列 示例说明:display: flex; 声明了盒子为flex弹性盒子布局,flex: 1; 声明了子元素占1份, flex-direction: row-reverse; /*这个属性就是在水平方向上反转*/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>设定

CSS弹性盒子模型

<!-- # 用于学习css弹性盒子模型 - 是一种一维的布局模型.给flexbox的子元素之间提供了强大的空间分布和对齐能力 - display:flex 设置为弹性盒子 - flexbox内flex元素的默认属性 - 元素排列为一行 (flex-direction 属性的初始值是 row). - 元素从主轴的起始线开始. - 元素不会在主维度方向拉伸,但是可以缩小. - 元素被拉伸来填充交叉轴大小. - flex-basis 属性为 auto. - flex-wrap 属性为 nowrap.

[ css 弹性盒子模型 box-flex 及相关属性 ] box-flex属性弹性盒子模型讲解及实例演示

box-flex属性(和谐版) 有道桌面词典显示,”flex”一词中文有“收缩”之意.不过,从此属性实际上产生的效果来看,无论怎样用“收缩”一词解释都显得很牵强.所以,这里,直接抛开字面意思,我们可以将”box-flex”理解为”房子-分配”.box为“盒子”的意思,我们可以理解为当下价格巨高的“房子”,”flex”指兄弟几个“分配房子”. 举个更实际点的例子:马林大叔省吃俭用一辈子,终于在上海郊外买了间150平米的商品房.后来,马林大叔想回老家养老,决定把房子分配给他的三个儿子.ok,先暂停下

CSS box-flex属性,然后弹性盒子模型简介

一.here we go 看到大神写的关于box-flex的介绍,忍不住收了,大神介绍的很详细,新技能get! 二.box-flex属性(和谐版) 有道桌面词典显示,"flex"一词中文有"收缩"之意.不过,从此属性实际上产生的效果来看,无论怎样用"收缩"一词解释都显得很牵强.所以,这 里,直接抛开字面意思,我们可以将"box-flex"理解为"房子-分配".box为"盒子"的意思,我们