flex: 1；的妙用

首先  flex 是 flex-grow、flex-shrink、flex-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. MyBatis原理总结(前期准备)

    1.不同框架解决不用问题,框架封装了很多细节,开发者可以使用简单的方式实现功能. 2.三层架构: 1.表现层  2.业务层  3.持久层  都有相应的处理框架. 3.持久层的技术解决方案: JDBC技 ...

  2. (转载)文献可视化--vosviewer入门

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_42613298/artic ...

  3. （十）进度条媒体对象和 Well 组件

    一．Well 组件 有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstrap </div> 二．进度条组件 ...

  4. laravel redis sentinel 和 redis cluster 配置

    laravel redis sentinel配置: 'redis' => [ 'cluster' => false, 'options' => [ 'replication' =&g ...

  5. 【Tools】三款笔记本电脑硬件检测工具-官网下载

    一.CPU-Z 下载地址: https://www.cpuid.com/softwares/cpu-z.html 描述: CPU-Z已经是大名鼎鼎了.这里就不多说了.  二.Cinebench   下 ...

  6. git和GitHub初级

    使用方式: 一种是本地创建一个文档, 然后在github上创建一个仓库, 在上传上去 一种是从仓库下载代码, 然后在本地编辑, 然后在上传上去 第一种: 首先在linux上创建一个文档, mkdir ...

  7. mysql查看正在运行的语句

    mysql查看正在运行的语句 并且查看运行最多的mysql语句 MySQL 打开 general log 后,所有的查询语句都会记录在 general log 文件,文件为只读方式,但这样genera ...

  8. 【作业】Mental Rotation （模拟）

    题目链接:https://vjudge.net/contest/345791#problem/L [问题描述] Mental rotation is a difficult thing to mast ...

  9. 用pytorch1.0搭建简单的神经网络：进行回归分析

    搭建简单的神经网络:进行回归分析 import torch import torch.nn.functional as F # 包含激励函数 import matplotlib.pyplot as p ...

  10. Python类和实例调用

    self指向的是实例对象,作为第一个参数,使用时不需要传入此参数. class Student(object): #定义一个Student类, def __init__(self, name, sco ...