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

wangnantjobj

2017-01-05

实例

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

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
object.style.flexBasis="200px" 效果预览

CSS 语法

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

属性值

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

line-height 弹性盒子 border vertical-align font-family css

wangnantjobj

0 关注 0 粉丝 0 动态

相关推荐

css中元素垂直居中的n种方法

本文章收集了多种实现居中布局的方法，并且按照实现的时间线，从css2到css3的各种解决方案，从代码量有少到多的排序来一一说明每种布局方法的实现方式，通过阅读此文章能够让你解决平时的开发中遇到的各种布局问题。line-height：用于设置多行元素的空间量

冰蝶 2020-06-05

Ubuntu 安装Docker

Unbutu系统上安装Docker服务，为保证docker服务的运行未定，需要使用与之相匹配的docker版本，使用命令。若看到上述信息，表明docker安装成功！默认情况下，docker从hub上下载需要安装的进行，囿于这些hub位于国外，下载速度缓慢，

pigsmall 2020-11-19

jackson gson

private static final ObjectMapper objectMapper = new ObjectMapper();

SXIAOYI 2020-09-16

linux下安装与卸载JDK1.6

Sun Microsystems, Inc. Binary Code License Agreement for theJAVATM 2 SOFTWARE DEVELOPMENT KIT , STANDARDEDITION, VERSION 1.4.2_X

linuxprobe0 2013-04-01

centos 内网校时

定时较准时间：# crontab -e //打开linux定时计划任务0 23 * * * /usr/sbin/ntpdate 210.72.145.44 //时间格式如下：如果23改为0-23/2 就表示每隔2小时执行一次* * * * * *| |

83560193 2013-06-25

Linux查看目录大小及文件数量命令

[[email protected]]# find /www/xker.com -type f |wc -l. [[email protected]]# find /www/xker.com -type d |wc -l

kidneybeans 2013-06-17

lfs 编译错误总结

不知道如何解释，另外在之前的binutils编译过程中make结果中出现诸如Nothing to be done for "...." 虽然没有显示error，但是总感觉有点问题，到后面的话是会出现问题，有些人说只要不报错就继续，我实在

加菲猫园 2013-06-16

Solr入门之SolrServer实例化方式

随着solr版本的不断升级, 差异越来越大, 从以前的 solr1.2 到现在的 solr4.3, 无论是类还是功能都有很大的变换, 为了能及时跟上新版本的步伐, 在此将新版本的使用做一个简单的入门说明:. SolrServer实例化类型有httpClie

年轻就要对味 2014-07-11

Nginx+Tomcat+Terracotta的Web服务器集群实做

-- //Host2就写为"test Host1" 以示区分 --></head><body><% out.println("Session Id:"+requ

稻草人的高粱地 2014-07-02

window下Nginx怎么安装启动

运行之后，怎么关闭呢，Nginx -s stop，即可。还有其他选项供选择：。Nginx -s quit 平稳关闭Nginx，保存相关信息，有安排的结束web服务。Nginx -s reload 因改变了Nginx相关配置，需要

smilebestSun 2014-06-12

关于分布式系统的数据一致性问题

数据更新的消息是通过一台中心的MQ进行转发。先把问题简单化处理，假设A增加一条记录Message_A，发送到M，B增加一条记录 MESSAGE_B发送到M，都是通过MQ服务器进行转发，那么M系统接收到条消息，增加两条数据，那么M在把增加的消息群发给A，B，

xusong 2014-05-17

Js中对外部js文件的引用顺序直接影响到未定义的问题

　　每个脚本定义的全局变量和函数，都可以被后面执行的脚本所调用。　　变量的调用，必须是前面已经声明，否则获取的变量值是undefined。[CDATA[　　 aa(); //浏览器报错　　 //]]></script>　　 <scr

zfszhangyuan 2013-09-12

freemarker中整数格式定义

exists><#setting number_format="#">2.怎么遍历输出1）在Action里把ArrayList放到值栈里private ArrayList<PostBean> postLis

80183053 2013-09-12

log4j配置日志文件log4j.appender.R.File相对路径方法

方法二、可以使用服务器环境变量log4j的配置文件支持服务器的vm的环境变量，格式类似${catalina.home}log4j.appender.R=org.apache.log4j.RollingFileAppenderlog4j.appender.R

gaozhlzh 2013-09-11

web页面重构怎么操作？

页面重构就是根据原有页面内容和结构的基础上，通过div+css写出符合web标准的页面结构。

yyNet0 2014-01-09

javaScript的性能优化

而现在Ajax则是最为流行的一种方式。而事实上，如何使用这两个循环，则有很大讲究。如果要与数组的长度作比较，应该事先把数组的length属性放入一个局部变量中，减少查询次数。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变

87453169 2014-01-17

Android 众多的布局属性详解

Android功能强大，界面华丽，但是众多的布局属性就害苦了开发者，下面这篇文章结合了网上不少资料，花费本人一个下午搞出来的，希望对其他人有用。EditText的android:hint 设置EditText为空时输入框内的提示信息。** 要注意一点，Dr

Tom天天 2013-07-12

20个CSS快速提升技巧

本文涵盖了20个css技巧，可以解决许多工作中常见的问题。css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来

Ladyseven 2020-07-25

spring cloud 知识点

spring cloud 是一系列框架的有序集合。它利用 spring boot 的开发便利性巧妙地简化了分布式系统基础设施的开发，如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等，都可以用 spring boot 的开发风格做到一键启动和

whileinsist 2020-06-24

HTML中怎么使文字各种居中对齐？（代码示例）

本篇文章主要介绍了如何去写关于html文字居中代码。希望对有需要的朋友有所帮助。前端10K面试准备，最完整面试真题分享（含答案）！text-align 属性规定元素中的文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 just

gufudhn 2020-06-12

wangnantjobj

W3CSchool教程: HTML 教程; CSS 教程; Bootstrap 教程; Javascript 教程; jQuery 教程

后端教程: C 教程; Java 教程; PHP 教程; Python 教程; Go 教程

移动开发: Android 教程; Swift 教程; Kotlin 教程; jQuery Mobile 教程; ionic 教程

关于我们: 新闻动态; 联系方式; 招聘英才; 安科实验室; 帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号京公网安备11010802014868号