flex基础语法介绍
来源:互联网 发布:防小偷报警软件 编辑:程序博客网 时间:2024/06/05 20:17
flex基础语法介绍
《轴线与网格》里主要讲述了grid
与flex
中,网格与轴线的基本概念,了解了这些基本概念之后,我们可以更轻松地对布局方式进行研究,这一篇文章主要描述flex
布局中,定义在容器与项目的相关属性。
本篇文章是依据我个人的所学所知,且部分参考国内外优秀的flex布局
的相关文献总结而得。
定义在容器的属性
disaplay
display
属性定义了一个弹性盒子容器,容器是展现为行内或块状由所给定的值而决定,此时,他的所有子元素进入flex文档流,称为伸缩项目。
.box { display: flex;}
定义行内容器的flex布局:
.box { display:inline-flex;}
对于safiri浏览器,需要加上webkit
前缀(以前遇到过,深坑啊!)
.box { display:webkit-flex; display:flex;}
此外,请注意以下两点:
- CSS的columns在伸缩容器上没有效果。
- float、clear和vertical-align在伸缩项目上没有效果。
flex-direction
flex-direction
定义主轴的方向。因主轴是二维空间的矢量,因此flex-direction
有四个值,分别代表了x轴与y轴的正方向与反方向。.box { flex-direction: row | row-reverse | column | column-reverse;}
row
为默认值,代表主轴为水平轴,方向为从左到右。row-reverse
代表主轴为水平轴,方向为从右到左。column
代表主轴为垂直轴,方向为从上到下。column-reverse
代表主轴为垂直轴,方向为从下到上。
flex-wrap
flex-wrap
定义flex项目
是否换行显示。默认情况下,flex项目
会尽可能地显示在一行当中,即默认值为nowarp
。
.box { flex-wrap: nowrap | wrap | wrap-reverse;}
nowrap
为默认值,代表不换行。wrap
代表换行,但默认为第一行在上方。wrap-reverse
代表换行,但默认为第一行在下方。
flex-flow
flex-flow
是flex-direction
和flex-wrap
的合并写法,它同时定义了主轴方向
与容器内项目的换行方式
,其默认值为row nowarp
.box { flex-flow: <‘flex-direction’> || <‘flex-wrap’>;}
justify-content
justify-content
定义了项目在主轴上的对齐方式,但请注意:justify-content
只会在主轴项目仍具有剩余空间时才会起作用。
利用此API,我们便能很容易地实现:等分宽高
了。
.box { justify-content: flex-start | flex-end | center | space-between | space-around;}
flex-start
为默认值,代表项目在主轴上向起始方向对齐。flex-end
代表项目在主轴上向结束方向对齐。center
代表项目在主轴上居中对齐。space-between
代表项目在主轴上两端对齐,但第一个项目在主轴的起始位置,最后一个项目在主轴的结束位置。space-around
代表项目在主轴上等分间距,但第一个项目与最后一个项目距离主轴的两端保持一定的距离,这个距离为项目之间间距的1/2。
align-items
align-items
定义了项目在交叉轴上的对齐方式。可以把它想像成交叉轴的justify-content
。
.box { align-items: flex-start | flex-end | center | baseline | stretch;}
flex-start
代表项目在交叉轴上向起始方向对齐。flex-end
代表项目在交叉轴上向结束方向对齐。center
代表项目在交叉轴上居中对齐。baseline
代表项目在交叉轴上向项目的第一行文字的基线对齐。stretch
代表项目在交叉轴上拉伸对齐。
align-content
当我们把容器的flex-warp
的值设置为warp
或者warp-reverse
时,若项目不能在一根主轴上显示,容器便会出现多根主轴。
此时便需要一个值来定义多根平行轴线的对齐方式,这个值便是align-content
。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
flex-start
代表多条平行的主轴在交叉轴的起始位置对齐。flex-end
代表多条平行的主轴在交叉轴的结束位置对齐。center
代表多条平行的主轴在交叉轴上居中对齐。space-between
代表多条平行的主轴在交叉轴上两端对齐,但第一条主轴在交叉轴的起始位置,最后一条主轴在交叉轴的结束位置。space-around
代表多条平行的主轴在交叉轴上等分间距,但第一条主轴与最后一条主轴距离主轴的两端保持一定的距离,这个距离为其它主轴之间间距的1/2。stretch
为默认值,代表多条平行的主轴拉伸对齐。
定义在项目上的属性
order
order
定义项目在主轴上的排列顺序。数值越小,排列越靠前,默认值为0。
在默认情况下,项目在主轴上的排列顺序是依据它们在HTML文档
中出现的先后顺序排列的。因我们可以通过控制文档流的先后顺序,故此API的使用情况不太普遍。
.item { order: <integer>;}
flex-grow
flex-grow
定义了项目的放大比例。如果所有伸缩项目的flex-grow
设置了1
,那么每个伸缩项目将设置为一个大小相等的剩余空间。如果你给其中一个伸缩项目设置了flex-grow
值为2
,那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍
。
注意:负值对该属性无效。
.item { flex-grow: <number>; /* default 0 */}
flex-shrink
类似于flex-grow
,flex-shrink
定义了项目的缩小比例。其默认值为1
。
如果所有项目的flex-shrink
都为1
,当空间不足时,都将等比例缩小。
如果所有项目都为1
,但其中一个项目的flex-shrink
为0
,即代表空间不足时,该项目缩小0倍,即为不缩小。
注意:负值对该属性不起作用。
flex-basis
flex-basis
定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即项目的本来大小。
.item { flex-basis: <length> | auto; /* default auto */}
利用flex-basis
,我们可以很容易实现页面布局中的常见问题:两栏/三栏布局。
<div class="box"> <div class="left">left</div> <div class="main">main</div></div>
.box { display: flex; height: 200px;}.left { background-color: yellow; flex-basis: 200px; /* flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 */ flex-grow: 0; /* flex-grow定义该项目不分配剩余空间 */}.main { background-color: green; flex-grow: 1; /* flex-grow定义main占满剩余空间 */}
flex
flex
是flex-grow
、flex-shrink
和flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}
align-self
align-self
定义了单个项目上在交叉轴的对齐方式。 其默认值为继承容器的align-items
属性。
具体的属性值参阅align-items
的属性值。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}
参考资料:
- A Complete Guide to Flexbox
- flexbox-CSS3弹性盒模型flexbox完整版教程
- w3cplus:一个完整的Flexbox指南
- Flex 布局教程:语法篇
- flex基础语法介绍
- flex基础,语法
- Flex 布局基础语法篇
- Makefile语法基础介绍
- Swift基础语法介绍
- Jade基础语法介绍
- C#基础语法介绍
- JAVAScript基础语法介绍
- JavaScript基础语法介绍
- Flex数据绑定基础介绍
- Flex数据绑定基础介绍
- J2SE简单介绍+基础语法
- CSS基础-介绍及语法
- CSS学习之Flex弹性布局语法介绍
- XML-基础(介绍、语法、dtd约束)
- [Java教程]-Java基础语法介绍
- JAVA基础二基本语法介绍
- CSS基础-1介绍及语法
- PostgreSQL配置文件--AUTOVACUUM参数
- GIt
- 如和将本地的项目保存到github
- RDMA与传统网络通信(Socket)的区别
- 汽车模拟游戏源码下载Rigs of Rods(C/C++)
- flex基础语法介绍
- java使用itext,制作pdf文件
- 随机装箱算法(Random Binning Features)
- Fragment XXXXXX{xxxxxxxxx} not attached to Activity
- java-构造方法-super关键字
- OB10 解决表被锁定
- python爬虫项目- 爬取厦门航空官网机票价格 selenium 多进程爬取
- Greenplum merge insert 用法与性能 (insert on conflict)
- FreeBASIC学习笔记——4.1 选择语句