css中flex-basis属性的方法

　　介绍

这篇文章主要介绍了css中flex-basis属性的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

css flex-basis属性用于设置或检索弹性盒伸缩基准值,css语法是flex-basis:初始| |汽车|继承;如果元素不是弹性盒对象的元素,则flex-basis属性不起作用。

<强> css flex-basis属性怎么用?

<强>定义和用法

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

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

默认值:汽车

继承:否

可动画化:是。

版本:css3

<强> JavaScript语法:

object.style.flexBasis=?00 px"

<强> css语法

flex-basis:初始| |汽车|继承;

<强>属性值

数量一个长度单位或者一个百分比,规定灵活项目的初始长度。

汽车默认值。长度等于灵活项目的长度。如果该项目未指定长度,则长度将根据内容决定。

初始设置该属性为它的默认值。

继承从父元素继承该属性。

<>强实例

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

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=皍tf-8"祝辞 　　& lt; title> & lt;/title> 　　& lt; style> 　　#{主要 　　宽度:350 px; 　　身高:100 px; 　　边界:1 px固体# c3c3c3; 　　显示:-webkit-flex;/* Safari */显示:flex; 　　} 　　 　　#主要div { 　　-webkit-flex-grow: 0;/* Safari 6.1 + */-webkit-flex-shrink: 0;/* Safari 6.1 + */-webkit-flex-basis: 40像素;/* Safari 6.1 + */flex-grow: 0; 　　flex-shrink: 0; 　　flex-basis: 40像素; 　　} 　　 　　#主要div: nth-of-type (2) { 　　-webkit-flex-basis: 80 px;/* Safari 6.1 + */flex-basis: 80 px; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body>

效果:

css中flex-basis属性的方法

感谢你能够认真阅读完这篇文章,希望小编分享css中flex-basis属性的方法内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!

css中flex-basis属性的方法