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. 一个Redis实例适合存储不同应用程序的数据吗?

    Redis支持多个数据库,并且每个数据库的数据是隔离的不能共享,并且基于单机才有,如果是集群就没有数据库的概念. Redis是一个字典结构的存储服务器,而实际上一个Redis实例提供了多个用来存储数据 ...

  2. openresty开发系列29--openresty中发起http请求

    openresty开发系列29--openresty中发起http请求 有些场景是需要nginx在进行请求转发 用户浏览器请求url访问到nginx服务器,但此请求业务需要再次请求其他业务:如用户请求 ...

  3. js 跳转到 百度指定地址定位点

    js 跳转到 百度指定地址定位点 http://api.map.baidu.com/geocoder?address=北京市海淀区上地信息路9号奎科科技大厦&output=html&s ...

  4. 判断本网段有多少可用的ip地址

    为了提高效率,使用多线程方式同时ping. 但是如果开启255个线程,又会因为网络端口太拥挤,会被判定为无法ping通.所以本例使用java自带线程池,线程池的连接数还不能太大,启动了15个线程. 等 ...

  5. html中的<pre>标签

    定义和用法 pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre> 标签的一个常见应用就是用来表示计算机的源代码. ...

  6. Python web-Http

    web应用 Web应用程序一般指浏览器端/服务器端应用程序,这类应用程序一般借助谷歌,火狐等浏览器来运行.在网络编程的意义下,浏览器是一个socket客户端,服务器是一个socket服务端 impor ...

  7. Vue学习笔记十二:vue-resource的基本使用

    目录 HTML 浏览器效果 Vue不提倡使用操作DOM,所以Jquery不使用了,ajax也不使用了.所以,Vue给我们提供了一种和ajax差不多功能的指令,vue-resource HTML < ...

  8. PLSQL集合类型的使用总结

    PLSQL集合类型的使用总结 在pl sql 中,集合(collection) 是一组有序的元素组成的对象,这些元素的类型必须一致. pl sql 将collection 分成3 类,分别为Assoc ...

  9. Underscore.js 的模板功能

    Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能. 无论你写一段小的js代码,还是写一 ...

  10. 02点睛Spring4.1-Java Config

    转载:https://www.iteye.com/blog/wiselyman-2210376 2.1 java config spring的java config主要使用@Configuration ...