flexbox(上)
flexbox是什么
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
抛开浏览器兼容性,对于移动端h5开发,简直是布局的神兵利器
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
属性列表
关于flex布局,有12个属性, 其中6个设置在容器上,6个设置在项目上。
设置在容器上的属性
- justify-content – 将flex元素和主轴对齐
- flex-direction – 定义主轴方向
- flex-wrap – flex元素必须单行或者自动换行
- flex-flow – flex-direction和flex-wrap的缩写
- align-items – 将flex元素在交叉轴上对齐
- align-content – 当交叉轴有多余空间时,对齐容器内的轴线
设置在项目上的属性
- order – 决定flex元素的顺序
- align-self – 自身对齐交叉轴,覆盖父元素设置的align-items
- flex-grow –定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
- flex-shrink –定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
- flex-basis –在分配多余空间之前,项目占据的主轴空间
- flex –flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
属性值
12个属性中,除去一些融合缩写属性,属性值可谓五花八门,而且组合使用的话,还有很多注意点,建议大家可以玩下这个flexbox小青蛙的游戏,游戏几乎包含了所有的常用属性和属性值,形象且容易记忆。
容器上主轴方向相关属性
属性比较多,我们使用设置容器和项目上、主轴和交叉轴四种来分类相关属性,好记不容易搞混
一 容器-主轴: justify-content
将flex元素和主轴对齐
共有以下5个属性
- flex-start: 元素和容器的左端对齐。
- flex-end: 元素和容器的右端对齐。
- center: 元素在容器里居中。
- space-between:元素之间保持相等的距离。
- space-around:元素周围保持相等的距离。
前三个属性意思简单明了,下面介绍后面的两个属性:
space-between
between这个单词强调“之间”,也就是说元素之间的空间保持相等。如下图青蛙之间的距离保持相等,注意两边的青蛙仍紧挨容器
space-around
around这个单词强调“周围”, 也就是说元素周围的空间保持相等。如下图青蛙周围的距离保持一致,注意B区域的宽度是A区域的两倍, 换句话说元素之间的距离会“叠加”而不是“重叠”
二 容器-主轴:flex-direction
定义元素在主轴上的摆放方向
-row: 元素摆放的方向和文字方向一致。
-row-reverse: 元素摆放的方向和文字方向相反。
-column: 元素从上放到下。
-column-reverse: 元素从下放到上。
这个属性和属性值组合实属意料之中,横向正反和竖向正反,没什么好特别介绍的
三 容器-主轴:flex-wrap
元素必须单行或者换行
- nowrap: 所有的元素都在一行。
- wrap: 元素自动换成多行。
- wrap-reverse: 元素自动换成逆序的多行
对于wrap是不是非常眼熟?white-space:nowrap word-wrap:break-word这些css属性经常被用来强制语句或者单词是否换行,所以这里的wrap也一样。根据字面意思即可判定,不作过多解释。
四 容器-主轴: flex-flow
flex-direction和flex-wrap两个属性经常会一起使用,所以有缩写属性flex-flow。这个缩写属性接受两个属性的值,两个值中间以空格隔开。
flex-flow: 《flex-direction》《flex-wrap》
五 容器-交叉轴:align-items
纵向对齐元素。
- flex-start: 元素与容器的顶部对齐。
- flex-end: 元素与容器的底部对齐。
- center: 元素纵向居中。
- baseline: 元素在容器的基线位置显示。
- stretch: 元素被拉伸以填满整个容器。
与justify-content:center并列flex中最常用的属性,终于有了简单易用的垂直居中属性了(T-T)!
前三个属性值简单明了,主要介绍剩下的两个属性值,baseline和stretch。一图概括:
至于什么是baseline?
具体可以参考张鑫旭的博客
六 容器-交叉轴:align-content
对齐容器内的轴线(行)。
- flex-start: 多行都集中在顶部。
- flex-end: 多行都集中在底部。
- center: 多行居中。
- space-between: 行与行之间保持相等距离。
- space-around: 每行的周围保持相等距离。
- stretch: 每一行都被拉伸以填满容器。
乍一看长的和align-items差不多,连属性值都有几分相似,所以我们得区分一下两者到底有什么区别:
align-items 用于容器内部每一个单行元素在主轴上垂直方向的对齐方式
align-content 重点就是多行 只适用于多行的flex容器,并且当侧轴上有多余空间使flex容器内的flex线对齐。
两者也可以配合使用,深挖实在篇幅太多,我想另起一篇博客来深入描述两者的区别和联系。
结尾
flex布局涉及到的属性和属性值实在太多,单文逐一描述篇幅太长不易阅读且查找麻烦,所以,本文只描述设置在容器上的属性和属性值,下一篇会介绍设置在容器中的项目上的属性属性值。