css属性之flex属性
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.
- none: 元素会根据自身宽高来设置尺寸。它是完全非弹性的,既不会缩短,也不会伸长来适应flex容器。相当于将属性设置为"
flex: 0 0 auto
"。 - auto:元素会根据自身的宽度与高度来确定尺寸,但是会自行伸长以吸收flex容器中额外的自由空间,也会缩短至自身最小尺寸以适应容器。这相当于将属性设置为 "
flex: 1 1 auto
". - 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属性的更多相关文章
- CSS布局学习(二) - flex属性
flex属性 定义 flex布局包括最外层的容器和内部的元素,flex属性是内部元素属性.flex属性是flex-grow, flex-shrink, flex-basis三个属性的简写 flex-g ...
- Flex 项目属性:flex 布局示例
flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有两个快捷值:auto (1 1 auto ...
- flex属性
一.flex属性的归纳 flex-direction flex-wrap flex-flow justify-content align-items align-content 1.1 flex-di ...
- 【转载】CSS flex属性深入理解
文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu.com/wordpress/2019/12/css-f ...
- CSS 弹性盒子 flex的三个属性:grow、shrink、basis
flex-grow 首先介绍flex-grow属性,flex-grow会在容器太大时(图片A.B的宽度和 < 父容器宽度)对元素作出调整. 如果图片A的flex-grow属性的值为 1,图片B的 ...
- css 13-CSS3属性:Flex布局图文详解
13-CSS3属性:Flex布局图文详解 #前言 CSS3中的 flex 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强.其强大的伸缩性和自适应性,在网页 ...
- CSS3动画属性和flex弹性布局各个属性
[CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...
- 【分享】谈CSS3中display属性的flex布局
最近在学习微信小程序(重新学习微信小程序),在设计首页布局的时候,新认识了一种布局方式display:flex .guide-top{ height: 36%; display: flex; /*fl ...
- css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
最近在研究css3的flex.遇到的flex:1;这一块,很是很纠结,flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了.网上大部分解释 ...
随机推荐
- js 获取当前标签 jquery1.11.4
.<input type="checkbox" onchange='allstu(this);return false;' /> 2.<input type=&q ...
- [转]MVC Razor模板引擎 @RenderBody、@RenderPage、@RenderSection及Html.RenderPartial、Html.RenderAction
本文参考自下面文章整理 MVC Razor模板引擎 @RenderBody.@RenderPage.@RenderSection及Html.RenderPartial.Html.RenderActio ...
- as3中xml文件的加载和读取
---恢复内容开始--- as代码如下: xml如下: 总结: 用URLReuqest对象加载xml的url 创建一个URLLoader对象,将1中的URLRequest指定给他 给URLLoader ...
- CSS级联样式表-css选择器
CSS概念 Cascading Style sheet 级联样式表 表现HTMl或XHTML文件样式的计算机语言 包括对字体,颜色,边距,高度,宽度,背景图片,网页定位等设定 建议:把表示样式的代码从 ...
- C# 泛型使用笔记
泛型的基本概念我就不在这重复了,不了解的同学请自行百度. 我主要写下我在项目中要到的泛型实例.献丑了.....有什么不好或不对的地方大家尽可评论留言. 为什么要用泛型? 通过使用泛型,我们可以极大地提 ...
- [转] 如何让代码可测试化(C#)
让代码可测试化 本篇介绍如何把我们目前最常见的代码转换为可以单元测试的代码,针对业务逻辑层来实现可测试性,我们以银行转账为例,通常代码如下: public class TransferControll ...
- 如鹏网学习笔记(八)CSS
CSS 一.CSS简介 1,CSS (Cascading Style Sheets) 级联样式表 ,是一种计算机语言,用来控制HTML内容的显示效果 2,CSS预先定义了众多的和显示效果有关的样式属性 ...
- .NET MVC自定义Html辅助方法
using System;using System.Web.Mvc;using System.Web.Routing; namespace MvcTest2.Helpers{ public stati ...
- [PHP] 通用网关接口CGI 的运行原理
CGI 的运行原理:1.客户端访问某个 URL 地址之后,通过 GET/POST/PUT 等方式提交数据,并通过 HTTP 协议向 Web 服务器发出请求.2.服务器端的 HTTP Daemon(守护 ...
- 一、hbase单机安装
下文将快速构建并启动单节点hbase,不使用hdfs作为存储,不使用独立的zookeeper hbase官网:http://hbase.apache.org/ 一.JDK环境 hbase需要JDK环境 ...