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. js 获取当前标签 jquery1.11.4

    .<input type="checkbox" onchange='allstu(this);return false;' /> 2.<input type=&q ...

  2. [转]MVC Razor模板引擎 @RenderBody、@RenderPage、@RenderSection及Html.RenderPartial、Html.RenderAction

    本文参考自下面文章整理 MVC Razor模板引擎 @RenderBody.@RenderPage.@RenderSection及Html.RenderPartial.Html.RenderActio ...

  3. as3中xml文件的加载和读取

    ---恢复内容开始--- as代码如下: xml如下: 总结: 用URLReuqest对象加载xml的url 创建一个URLLoader对象,将1中的URLRequest指定给他 给URLLoader ...

  4. CSS级联样式表-css选择器

    CSS概念 Cascading Style sheet 级联样式表 表现HTMl或XHTML文件样式的计算机语言 包括对字体,颜色,边距,高度,宽度,背景图片,网页定位等设定 建议:把表示样式的代码从 ...

  5. C# 泛型使用笔记

    泛型的基本概念我就不在这重复了,不了解的同学请自行百度. 我主要写下我在项目中要到的泛型实例.献丑了.....有什么不好或不对的地方大家尽可评论留言. 为什么要用泛型? 通过使用泛型,我们可以极大地提 ...

  6. [转] 如何让代码可测试化(C#)

    让代码可测试化 本篇介绍如何把我们目前最常见的代码转换为可以单元测试的代码,针对业务逻辑层来实现可测试性,我们以银行转账为例,通常代码如下: public class TransferControll ...

  7. 如鹏网学习笔记(八)CSS

    CSS 一.CSS简介 1,CSS (Cascading Style Sheets) 级联样式表 ,是一种计算机语言,用来控制HTML内容的显示效果 2,CSS预先定义了众多的和显示效果有关的样式属性 ...

  8. .NET MVC自定义Html辅助方法

    using System;using System.Web.Mvc;using System.Web.Routing; namespace MvcTest2.Helpers{ public stati ...

  9. [PHP] 通用网关接口CGI 的运行原理

    CGI 的运行原理:1.客户端访问某个 URL 地址之后,通过 GET/POST/PUT 等方式提交数据,并通过 HTTP 协议向 Web 服务器发出请求.2.服务器端的 HTTP Daemon(守护 ...

  10. 一、hbase单机安装

    下文将快速构建并启动单节点hbase,不使用hdfs作为存储,不使用独立的zookeeper hbase官网:http://hbase.apache.org/ 一.JDK环境 hbase需要JDK环境 ...