flex属性

规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。是一个简写属性,可以同时设置flex-grow, flex-shrink, flex-basis三个子属性。

/* Basic values */
flex: auto; 相当于flex: auto;
flex: initial; 相当于flex: auto;
flex: none; 相当于flex: auto;
flex: ; /* One value, unitless number: flex-grow */
flex: ; /* One value, width/height: flex-basis */
flex: 10em;
flex: 30px; /* Two values: flex-grow | flex-basis */
flex: 30px; /* Two values: flex-grow | flex-shrink */
flex: ; /* Three values: flex-grow | flex-shrink | flex-basis */
flex: %; /* Global values */
flex: inherit;
flex: initial;
flex: unset;

语法

flex属性可以指定1个,2个或三个值。

单值语法: 值必须为以下其中之一:

  • 一个无单位数(<number>):它会被当作<flex-grow>的值。
  • 一个有效的宽度(width)的值:它会被当作<flex-basis>的值。
  • 关键字none, auto, 或initial.
  1. none: 元素会根据自身宽高来设置尺寸。它是完全非弹性的,既不会缩短,也不会伸长来适应flex容器。相当于将属性设置为"flex: 0 0 auto"。
  2. auto:元素会根据自身的宽度与高度来确定尺寸,但是会自行伸长以吸收flex容器中额外的自由空间,也会缩短至自身最小尺寸以适应容器。这相当于将属性设置为 "flex: 1 1 auto".
  3. initial:属性默认值, 元素会根据自身宽高设置尺寸。它会缩短自身以适应容器,但不会伸长并吸收flex容器中的额外自由空间来适应容器 。相当于将属性设置为"flex: 0 1 auto"。

双值语法:第一个值必须为一个无单位数,并且它会被当作<flex-grow>的值。第二个值必须为以下之一:

  • 一个无单位数:它会被当作<flex-shrink>的值。
  • 一个有效的宽度值: 它会被当作<flex-basis>的值。

三值语法:

  • 第一个值必须为一个无单位数,它会被当作<flex-grow>的值,默认值为1。
  • 第二个值必须为一个无单位数,它会被当作<flex-shrink>的值,默认值为1。
  • 第三个值必须为一个有效的宽度值,它会被当作<flex-basis>的值,初始值:auto。

默认情况下,元素不会缩短至小于内容框尺寸,若想改变这一状况,请设置元素的min-width与 min-height属性。

flex-grow

定义弹性盒子项(flex item)的拉伸因子。初始值0,负值无效

flex-shrink

指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值

初始值为1,负值无效

flex-basis

指定了flex元素在主轴方向上的初始大小。如果不使用box-sizing来改变盒模型的话,那么这个属性就决定了flex元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。默认值0%

; 是否是继承属性: 否;值类型:a length, 百分比 或calc()

取值

<'width'>: width值可以使一个数字后面跟着绝对单位例如px, mm, pt; 该值也可以使一个百分数,那么这个百分数就是相对于其父弹性盒容器的宽或者高(取决于主轴方向),负值是不被允许的。

content:基于flex的元素自动调整大小。

/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto; /* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content; /* Automatically size based on the flex item’s content */
flex-basis: content; /* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

css属性之flex属性的更多相关文章

  1. CSS布局学习(二) - flex属性

    flex属性 定义 flex布局包括最外层的容器和内部的元素,flex属性是内部元素属性.flex属性是flex-grow, flex-shrink, flex-basis三个属性的简写 flex-g ...

  2. Flex 项目属性:flex 布局示例

    flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有两个快捷值:auto (1 1 auto ...

  3. flex属性

    一.flex属性的归纳 flex-direction flex-wrap flex-flow justify-content align-items align-content 1.1 flex-di ...

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

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

  5. CSS 弹性盒子 flex的三个属性:grow、shrink、basis

    flex-grow 首先介绍flex-grow属性,flex-grow会在容器太大时(图片A.B的宽度和 < 父容器宽度)对元素作出调整. 如果图片A的flex-grow属性的值为 1,图片B的 ...

  6. css 13-CSS3属性:Flex布局图文详解

    13-CSS3属性:Flex布局图文详解 #前言 CSS3中的 flex 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强.其强大的伸缩性和自适应性,在网页 ...

  7. CSS3动画属性和flex弹性布局各个属性

    [CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...

  8. 【分享】谈CSS3中display属性的flex布局

    最近在学习微信小程序(重新学习微信小程序),在设计首页布局的时候,新认识了一种布局方式display:flex .guide-top{ height: 36%; display: flex; /*fl ...

  9. css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记

    最近在研究css3的flex.遇到的flex:1;这一块,很是很纠结,flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了.网上大部分解释 ...

随机推荐

  1. developer.android.google.cn

    Android Studio官方 Android IDE https://developer.android.google.cn/studio/index.html 探索 Android Studio ...

  2. WebUtility(提供在处理 Web 请求时用于编码和解码 URL 的方法。)

    public static string UrlEncode( string str ) UrlEncode(String) 方法可用来编码整个 URL,包括查询字符串值. 如果没有编码情况下,如空格 ...

  3. angular1的 伪MVC

    以下的代码是自己对angular1的一些理解.如果非要按照mvc的这种模式开发..可以用以下的这种方式理解. //userFactorys.js 这是服务方法 return 的方法取得json数据里的 ...

  4. 数据适配:DataAdapter对象概述

    DataAdapter对象可用于执行数据库的命令操作,含有四个不同的操作命令,分别如下:   SelectCommand:用来选取数据源中的记录: InsertCommand:用来向数据源中新插入一条 ...

  5. 11、Map、可变参数、Collections

    Map接口 Map集合概述 *A:Map集合概述: 我们通过查看Map接口描述,发现Map接口下的集合与Collection接口下的集合,它们存储数据的形式不同 a:Collection中的集合,元素 ...

  6. 读写csv文件——考虑各种异常场景,源码

    CSV是以逗号间隔的文本文件,其文件以纯文本形式存储表格数据(数字和文本).在JAVA中可以通过输出文件流的方式将数据写入CSV文件,通过BufferedReader类去读该路径中的文件,使用read ...

  7. 设计模式入门,策略模式,c++代码实现

    // test01.cpp : Defines the entry point for the console application.////第一章,设计模式入门,策略模式#include &quo ...

  8. CodeForces 616A(水题)

    while(t--) 最后结果t=-1 #include <iostream> #include <string> #include <cstring> #incl ...

  9. python 实现websocket

    python中websocket需要我们自己实现握手代码,流程是这样:服务端启动websocket服务,并监听.当客户端连接过来时,(需要我们自己实现)服务端就接收客户端的请求数据,拿到请求头,根据请 ...

  10. Java 类 ThreadLocal 本地线程变量

    前言:工作中将要使用ThreadLocal,先学习总结一波.有不对的地方欢迎评论指出. 定义 ThreadLocal并不是一个Thread,而是Thread的局部变量.这些变量不同于它们的普通对应物, ...