flex: 1;的妙用

首先  flex 是 flex-growflex-shrinkflex-basis的缩写。

当 flex 取值为一个非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%,如下两个是等同的:

.item{flex: 1;}

.item{

flex-grow: 1;

flex-shrink: 1;

flex-basis: 1;}

用途:

例如在表头有三个div被被应用到同一行后。但需要把第一个和第二个div排在最左边,第三个div需要排在最右边。可以直接给只给第二个div应用flex :1;(即把此行所有的剩余空间都给第二个div,第三个div自然就被挤到最右边了)

CSS ,flex: 1的用处的更多相关文章

  1. CSS Flex

    关于flex 请看这里  https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 太详细啦!!!  还通俗易懂!!! 没啥好说的 不过上面那篇文 ...

  2. 【css flex】将多个<div>放在同一行

    使用style里的flex属性 默认情况下,一个div独占一行 使用css选择器给外层div加上以下flex属性,则该div的子div可以在同一行中显示, .runs-paginator-flex-c ...

  3. css flex兼容性

    我测试了一下css flex的兼容性 已经可以兼容到IE10了呀 为啥MDN上面的IE兼容性还是兼容到IE11 有点更新不及时的感觉

  4. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  5. 【转载】CSS flex属性深入理解

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu.com/wordpress/2019/12/css-f ...

  6. CSS flex waterfall layout

    CSS flex waterfall layout https://github.com/YoneChen/waterfall-flexbox https://css-tricks.com/snipp ...

  7. CSS Flex布局完全指南 #flight.Archives002

    Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...

  8. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  9. css flex方法标题左右两边平衡线

    <html> <div class="title"> <div class="line"></div> < ...

随机推荐

  1. Dart自定义库、系统库和第三方库

    /* 前面介绍Dart基础知识的时候基本上都是在一个文件里面编写Dart代码的,但实际开发中不可能这么写,模块化很重要,所以这就需要使用到库的概念. 在Dart中,库的使用时通过import关键字引入 ...

  2. 算法习题---4-7RAID技术(UV509)

    一:题目 (一)基础知识补充(RAID和奇偶校验) 磁盘管理—磁盘阵列(RAID)实例详解(本题目常用RAID 5技术实现) 奇偶校验(同行数据中同位上的1的个数,偶校验时:1的个数为偶数则校验结果为 ...

  3. 如何发布自定义的UI 组件库到 npmjs.com 并且编写 UI组件说明文档

    记录基于 antd 封装业务组件并发布到npm 上的过程:(TS + React + Sass) 初始化项目: 1.yarn create react-app winyhui --typescript ...

  4. HDU3853 LOOPS 期望DP基础题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3853 题目大意(只是大意,名字什么的可能和原题描述不一样~): 爱丽丝与华容道 题目描述 爱丽丝是一个 ...

  5. SQL Server判断对象是否存在

    1 判断数据库是否存在 if exists (select * from sys.databases where name = ’数据库名’) drop database [数据库名] if exis ...

  6. Linux配置Docker镜像加速器

    Docker默认镜像为官方镜像,可以配置成国内加速器提高速度 登录阿里云控制台,搜索容器镜像服务获取到镜像加速服务地址 新建配置文件 /etc/docker/daemon.json 输入以下内容 { ...

  7. TestCase--网站创建新用户管理模块

    对于web测试,用户权限管理模块是必测的一个点,所以今天就来总结一下创建新用户管理模块的测试用例 参考图如下: 测试用例设计如下: 一.功能测试 1.  什么都不输入,单击“立即提交”,页面是否有提示 ...

  8. 微信API V3 RESTFUL

    {"code":"SIGN_ERROR","message":"商户未设置加密的密钥,请登录商户平台操作!请参考http://kf ...

  9. 如何解决mac brew遇到无法下载的依赖?

    使用brew安装软件时,需要下载依赖包,但是如果依赖包特别大的时候,就很容易失败:brew本身不支持断点续传:但是可以使用wget -c的方式断点续传的下载依赖:下载完如何给brew安装使用呢?参考: ...

  10. k8s调度器之亲和性和反亲和性/节点选择器

    容器在节点(物理机)上是如何部署的 是由调度器scheduler进行调度的 调度策略 随机 通过节点选择器选择某些节点 通过节点亲和性和pod的亲和性及反亲和性实现更细粒度的控制 参考 https:/ ...