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. [原]Arcgis arcmap修改图元配色

    感谢南师大的“深爱”提供的帮助 1.选择识别工具,点击海洋,确定海洋色块的color index为255 2.右键tif选择属性 3.选择分页栏中的符号化(Symbology) 4.找到对应的Labe ...

  2. 004-行为型-10-中介者模式(Mediator)

    一.概述 在Mediator模式中,类之间的交互行为被统一放在Mediator的对象中,对象通过Mediator对象同其他对象交互,Mediator对象起着控制器的作用. 用一个中介对象来封装一系列的 ...

  3. 译文:A Robust and Modular Multi-Sensor Fusion ApproachApplied to MAV Navigation

    A Robust and Modular Multi-Sensor Fusion ApproachApplied to MAV Navigation 众所周知,将来自多个传感器的信息融合用于机器人导航 ...

  4. 【Linux】采用nginx反向代理让websocket 支持 wss

    背景:玩swoole 服务 使用Nginx反向代理解决wss问题. 即客户端通过wss协议连接 Nginx 然后 Nginx 通过ws协议和server通讯. 也就是说Nginx负责通讯加解密,Ngi ...

  5. Qt编写气体安全管理系统15-网络转发

    一.前言 在本系统中网络转发是个什么功能含义呢,其实就是将本地采集设备的所有数据打包发送到指定的网络地址,默认采用UDP的形式,无连接开销小,我也是看到很多的组态软件有这个功能,其实现有的很多的气体探 ...

  6. java.net.NoRouteToHostException: Cannot assign requested address 问题分析(端口被用完的解决方法)

    问题: 错误原因: 由于liunx 分配的客户端连接端口用尽,无法建立socket连接所致,虽然socket正常关闭,但是端口不是立即释放,而是处于 TIME_WAIT 状态,默认等待60s后释放.查 ...

  7. GWAS: 网页版的基因型填充(genotype imputation)

    在全基因组关联分析中,处理芯片数据时,必须走的一个流程就是基因型数据填充(imputation). 当然,如果你拿到的是全测序的数据,请忽略这一步. 下面直奔主题,怎么在网页版进行基因型填充. 1 进 ...

  8. **209. Minimum Size Subarray Sum 长度最小的子数组

    1. 题目描述 给定一个含有 n 个正整数的数组和一个正整数 s ,找出该数组中满足其和 ≥ s 的长度最小的连续子数组.如果不存在符合条件的连续子数组,返回 0. 示例: 输入: s = 7, nu ...

  9. 123457123456#0#----com.tym.ErTongFanPai20--前拼后广--儿童FanPai_tym

    com.tym.ErTongFanPai20--前拼后广--儿童FanPai_tym

  10. SpringCloud学习成长之十四 服务注册(consul)

    这篇文章主要介绍 spring cloud consul 组件,它是一个提供服务发现和配置的工具.consul具有分布式.高可用.高扩展性. 一.consul 简介 consul 具有以下性质: 服务 ...