flex item default All In One
flex item default All In One
flex item default 初始值 ===
flex: 0 1 auto;
https://drafts.csswg.org/css-flexbox-1/#propdef-flex-grow
https://drafts.csswg.org/css-flexbox-1/#propdef-flex-shrink
https://drafts.csswg.org/css-flexbox-1/#propdef-flex-basis
flex-grow
Initial: 0
omitted： 1
flex-shrink
Initial: 1
omitted： 1
flex-basis
Initial: auto
omitted： 0
https://drafts.csswg.org/css-flexbox-1/#propdef-flex
/* flex container */
.flex-container {
background: #ccc;
border: 1px solid orange;
width: 80vw;
height: 100px;
margin: 10px auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
/* flex-item */
.flex-item {
background: #fff;
width: 200px;
height: 80px;
margin-top: 10px;
border: 1px solid red;
text-align: center;
}
.default {
/* flex: 0 1 auto; */
}
.test {
/* flex: 0 1 auto; */
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
MDN
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
/* 关键字值 */
flex: auto;
flex: initial;
flex: none;
/* 一个值, 无单位数字: flex-grow */
flex: 2;
/* 一个值, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;
/* 两个值: flex-grow | flex-basis */
flex: 1 30px;
/* 两个值: flex-grow | flex-shrink */
flex: 2 2;
/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;
W3C
https://www.w3.org/TR/css-flexbox-1/
https://drafts.csswg.org/css-flexbox-1/#flex-property
https://drafts.csswg.org/css-flexbox-1/#propdef-flex
flex item default 初始值 ===
flex: 0 1 auto;
https://drafts.csswg.org/css-flexbox-1/#propdef-flex-grow
https://drafts.csswg.org/css-flexbox-1/#propdef-flex-shrink
https://drafts.csswg.org/css-flexbox-1/#propdef-flex-basis
refs
https://css-tricks.com/almanac/properties/f/flex/
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
flex item default All In One的更多相关文章
- 微信小程序开发之搞懂flex布局3——Flex Item
Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...
- flex item的width VS flex-basis
flexbox的子元素flex item的宽度,按照以下规则计算: content>width>flex-basis(limited by max/min-width) flex-basi ...
- Flex 布局教程：语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- 【转】Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- flex布局
一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...
- Flex 布局
Flex 布局 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非 ...
- Flex布局窥探（一）
一.Flex布局是神马? Flex是Flexible Box的缩写,意为‘弹性布局’,用来为盒模型提供最大的灵活性. 任何容器都能被指定为Flex布局: .box{ display: flex; } ...
- Flex 布局教程：语法篇[转]
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- flex弹性布局学习笔记
前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...
随机推荐
- 超详细oracle 11g安装步骤 win版本
1. 打开网址: https://edelivery.oracle.com 使用oracle 任意账号登录 账号:2696671285@qq.com 密码:Oracle123 感谢来自某位好心大佬的共 ...
- unstable sort
$sort (aggregation) - MongoDB Manual https://docs.mongodb.com/manual/reference/operator/aggregation/ ...
- hive 时间相关的函数
yyyy-MM-dd与yyyyMMdd000000转换的三种方法 方法一:date_format(只支持yyyy-MM-dd -> yyyyMMdd000000) select date_for ...
- BI学习向导文章
BI的学习笔记: BIWORK的博客:http://www.cnblogs.com/biwork/p/3328879.html 邀月工作室博客 :http://www.cnblogs.com/down ...
- Java——方法
Java 方法 Systom.out.println():其中,println()是一个方法(Method),而System是系统类(Class),out是标准输出对象(Object).这句话的意思是 ...
- linux 系统磁盘管理（主分区和逻辑分区）
摘要:linux系统磁盘管理主分区和逻辑分区 1.linux系统分区应了解的常识 硬盘分区实质上是对硬盘的一种格式化,然后才能使用硬盘保存各种信息,在创建分区时,就已经设置好了硬盘的各项物理参数,指定 ...
- 【Azure 事件中心】在微软云中国区 (Mooncake) 上实验以Apache Kafka协议方式发送/接受Event Hubs消息 (Java版)
问题描述 事件中心提供 Kafka 终结点,现有的基于 Kafka 的应用程序可将该终结点用作运行你自己的 Kafka 群集的替代方案. 事件中心可与许多现有 Kafka 应用程序配合使用.在Azur ...
- 负载均衡之LVS与Nginx对比
今天总结一下负载均衡中LVS与Nginx的区别,好几篇博文一开始就说LVS是单向的,Nginx是双向的,我个人认为这是不准确的,LVS三种模式中,虽然DR模式以及TUN模式只有请求的报文经过Direc ...
- 【noi 2.6_9280】&【bzoj 1089】严格n元树（DP+高精度+重载运算符）
题意:定义一棵树的所有非叶节点都恰好有n个儿子为严格n元树.问深度为d的严格n元树数目. 解法:f[i]表示深度为<=i的严格n元树数目.f[i]-f[i-1]表示深度为i的严格n元树数目.f[ ...
- Gym 100796K Profact
Alice is bored out of her mind by her math classes. She craves for something much more exciting. Tha ...