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库来记录 入职新公司前对移动 ...
随机推荐
- 当Vue可视化工具创建不了项目时的解决办法！
当Vue可视化工具创建不了项目时的解决办法! 当你尝试用可视化工具创建一个Vue的项目的时候,报错, 出现什么indexOf什么什么的错误! 我的解决办法是把可视化工具删除掉,重新下载! 如果你是 n ...
- 🙈 如何隐藏你的热更新 bundle 文件？
如果你喜欢我写的文章,可以把我的公众号设为星标 ,这样每次有更新就可以及时推送给你啦. 前段时间我们公司的一个大佬从一些渠道得知了一些小道消息,某国民级 APP 因为 Apple App Store ...
- Simple decorator that intercepts connection errors and ignores these if settings specify this.
django-redis/cache.py at master · jazzband/django-redis https://github.com/jazzband/django-redis/blo ...
- : cannot validate certificate for 127.0.0.1 because it doesn't contain any IP SANs
: cannot validate certificate for 127.0.0.1 because it doesn't contain any IP SANs
- C# 防止程序多开（重复开启）
Mutex(mutual exclusion,互斥)是 .Net Framework 中提供跨多个线程同步访问的一个类.它非常类似了 Monitor 类,因为他们都只有一个线程能拥有锁定.而操作系统能 ...
- httpd反向代理实践（二）
div.example { background-color: rgba(229, 236, 243, 1); color: rgba(0, 0, 0, 1); padding: 0.5em; mar ...
- Redis 常见问题总结
1. 简单介绍一下 Redis 呗! 简单来说 Redis 就是一个使用 C 语言开发的数据库,不过与传统数据库不同的是 Redis 的数据是存在内存中的 ,也就是它是内存数据库,所以读写速度非常快, ...
- springboot配置rabbitmq
一.消息生成者 1.1消息生成者配置 1.2 消息发送端代码 1.3 创建交换机,队列,并建立关系 二.消费者 2.1消费者 三.限流配置 3.1配置文件 #在单个请求中处理的消息个数,他应该大于等于 ...
- Flash图解线程池 | 阿里巴巴面试官希望问的线程池到底是什么？
前言 前几天小强去阿里巴巴面试Java岗,止步于二面. 他和我诉苦自己被虐的多惨多惨,特别是深挖线程和线程池的时候,居然被问到不知道如何作答. 对于他的遭遇,结合他过了一面的那个嘚瑟样,我深表同情(加 ...
- Luogu T10025 排列名次
题目链接 题目描述 给定一个长度为n的排列,要求输出该排列的字典序名次(1,2,3,...,n的名次为1). 输入输出格式 输入格式: 第一行一个数n,表示排列长度. 第二行n个数,用空格分隔,表示一 ...