Flexbox是一个CSS3的盒子模型(box model),顾名思义它就是一个灵活的盒子(Flexible Box)。
Flexbox模型概念
第一步要来看Flexbox的盒子模型,根据W3C文章所描述,flex的盒子模型如下图所呈现,与一般的盒子模型不同的地方,在于Flexbox的盒子模型具有水平的起点与终点(main start、main end),垂直的起点与终点(cross start、cross end),水平轴与垂直轴(main axis、cross axis),然后元素具有水平尺寸与垂直尺寸(main size、cross size),这些都是相当重要的布局概念。
![b6d1fc5b2d64392815ad547b10c720f8.png](https://i-blog.csdnimg.cn/blog_migrate/1cdc1c5d1a2bf36ec7819591fdf94351.jpeg)
Flexbox属性介绍
再来我们先看看Flexbox有哪些属性:
- display
- flex-direction
- justify-content
- align-items
- align-self
- align-content
- flex-wrap
- order
- flex
display
display是我们熟知的CSS属性,对于Flexbox来说,多了有两种方式可以设定,预设为“flex”,其布局方式与block几乎类似,都会强迫换行,但设定display:flex的子元素却具备了更多弹性的设定,此外另外一种方式则是“inline-flex”,和inline-block也是几乎雷同,意义上都是一个display:flex的元素外面包覆display:inline的属性,在后方的元素不会换行。
CSS:
学习Q-q-u-n: ⑦⑧④-⑦⑧③-零①②,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划).flex,.inline-flex{ width:100px; height:50px; border:1px solid #000;}.flex{ display:flex;}.inline-flex{ display:inline-flex;}
![5aba902868910e1903d71f91c9be46fb.png](https://i-blog.csdnimg.cn/blog_migrate/94a3a37a5dbb15c1014952d0782264b7.jpeg)
flex-direction
flex-direction表示Flexbox内容元素的“排列方向”,分别有下列四种。
- row:预设值,由左到右,从上到下
- row-reverse:与row相反
- column:从上到下,再由左到右
- column-reverse:与column相反
CSS:
.flex-row{ flex-direction:row;}.flex-row-reverse{ flex-direction:row-reverse;}.flex-column{ flex-direction:column;}.flex-column-reverse{ flex-direction:column-reverse;}
![57d948da10ae95bc77bcb82610d91f97.png](https://i-blog.csdnimg.cn/blog_migrate/e1ab24e2df3de9db2657a1006b99f28d.jpeg)
justify-content
justify-content决定了内容元素与整个Flexbox的“水平对齐”位置,回想一下最上面讲的Flexbox盒子模型,具有main start与main end左右两个端点,justify-content就是按照这个方式做设定,而其中的设定值总共有下列五个。
- flex-start:预设值,对齐最左边的main start
- flex-end:对齐最左边的main end
- center:水平居中
- space-between:平均分配内容元素,左右元素将会与main start和main end贴齐
- space-around:平均分配内容元素,间距也是平均分配
CSS:
.flex-start{ justify-content:flex-start;}.flex-end{ justify-content:flex-end;}.center{ justify-content:center;}.space-between{ justify-content:space-between;}.space-around{ justify-content:space-around;}
![4d1dea46443c98e7a8d43c6b92e63776.png](https://i-blog.csdnimg.cn/blog_migrate/183a6e51b629202fdd73a75ecb7f4c47.jpeg)
align-items
align-items刚好和justify-content相反,align-items决定了内容元素与整个Flexbox的“垂直对齐”位置,再回想一下最上面讲的Flexbox盒子模型,具有cross start与cross end左右两个端点,align-items与align-self就是按照这个方式做设定,设定值总共有下列五个。
- flex-start:对齐最上面的cross start
- flex-end:对齐最下面的cross end
- center:垂直居中
- stretch:预设值,将内容元素全部撑开至Flexbox的高度
- baseline:以所有内容元素的基线作为对齐标准
CSS:
学习Q-q-u-n:⑦⑧④-⑦⑧③-零①②,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划).flex-start{ align-items:flex-start;}.flex-end{ align-items:flex-end;}.center{ align-items:center;}.stretch{ align-items:stretch;}.baseline{ align-items:baseline;}.flex-item{ width:60px; text-align:center;}.item1{ font-size:20px; line-height: 60px; background:#c00;}.item2{ line-height: 30px; background:#095;}.item3{ font-size:30px; line-height: 100px; background:#059;}
![842a487252c378eb9a8dab8d549edd80.png](https://i-blog.csdnimg.cn/blog_migrate/238da5800d124125f46ff8bdac3b4cb9.jpeg)
align-self
align-self的设定与align-items相同,但目的不同,align-self的作用在于覆盖已经套用align-items的属性,如果照我们以前所写,因为align-items是针对所有子元素,所以必须要用align-self来进行覆盖,我们直接用上一个示例来修改就很清楚了。
CSS:
.item2{ align-self:baseline; line-height: 30px; background:#095;}
![62caf8d93ca490f40db2227f6eb6db11.png](https://i-blog.csdnimg.cn/blog_migrate/cddeb89acec829505cd166ae65d763d4.jpeg)
align-content
刚刚谈到的align-items是针对内容为单行的元素进行处理,如果遇到多行的元素,就要使用align-content这个属性,这个属性总共有六个设定值。
- flex-start:对齐最上面的cross start
- flex-end:对齐最下面的cross end
- center:垂直居中
- space-between:将第一行与最后一行分别对齐最上方与最下方
- space-around:每行平均分配间距
- stretch:预设值,内容元素全部撑开
CSS:
.flex-start,.flex-end,.center,.space-between, .space-around, .stretch{ display:inline-flex; flex-wrap:wrap; width:180px; height:160px; margin:5px 5px 40px; border:1px solid #000; vertical-align: top;}.flex-start{ align-content:flex-start;}.flex-end{ align-content:flex-end;}.center{ align-content:center;}.space-between{ align-content:space-between;}.space-around{ align-content:space-around;}.stretch{ align-content:stretch;}.align-content>div{ padding:15px; margin:2px; background:#666;}
![a4233ca59cb5112808f153d62e72e103.png](https://i-blog.csdnimg.cn/blog_migrate/7f86e7a71466dcfee4bfc191bc0f4784.jpeg)
flex-wrap
在刚刚的示例看到一个flex-wrap的属性,这个属性负责的是让内容的元素换行,因为当我们把父元素的display设定为flex或inline-flex的时候,子元素就是以单行的方式,弹性撑满父元素,所以就要利用flex-wrap来换行,共有三个设定值。
- nowrap:预设值,单行
- wrap:多行
- wrap-reverse:多行,但内容元素反转
CSS:
.nowrap,.wrap,.wrap-reverse{ display:inline-flex; flex-wrap:wrap; width:180px; height:80px; margin:5px 5px 40px; border:1px solid #000; vertical-align: top;}.column{ flex-direction:column; width:120px; height:180px;}.nowrap{ flex-wrap:nowrap;}.wrap{ flex-wrap:wrap;}.wrap-reverse{ flex-wrap:wrap-reverse;}.align-content div{ width:30px; height:30px; margin:5px; background:#069;}.column div{ background:#f50;}
![2854f9c4e18a1731f75082f089db16ed.png](https://i-blog.csdnimg.cn/blog_migrate/cb35d869f6df0f753fc437fc0b30879a.jpeg)
order
刚刚在flex-wrap的属性里头看到了可以把元素反转,order这个属性更是可以直接指定一个数字,就可以由小到大的排列顺序。
.item{ width:50px; height:60px; text-align: center; line-height: 50px; } .order1{ order:1; background:#c00; } .order2{ order:2; background:#069; } .order3{ order:3; background:#095; } .order4{ order:4; background:#f50; } .order5{ order:5; background:#777; } .order6{ order:6; background:#077; }
![d006ce5b277f7aac5b76d217f9141cf0.png](https://i-blog.csdnimg.cn/blog_migrate/e74b5ae4ba4ab39c895f50b7d2d5f30a.jpeg)
flex
好酒沉瓮底,有耐心看到下面的才会看到重点喔哈哈!flex应该是Flexbox里头最重要的属性了,而flex其实是由三个属性组合而成,依照先后顺序分别是“flex-grow”、“flex-shrink”和“flex-basis”,如果flex只填了一个数值(无单位),那么预设就是以flex-grow的方式呈现,至于三个属性的解释如下:
- flex-grow:数字,无单位,当子元素的flex-basis长度“小”于它自己在父元素分配到的长度,按照数字做相对应的“伸展”比例分配,预设值为0,不会进行弹性变化,不可为负值,设为1则会进行弹性变化。
- flex-shrink:数字,无单位,当子元素的flex-basis长度“大”于它自己在父元素分配到的长度,按照数字做相对应的“压缩”比例分配,预设值为1,设为0的话不会进行弹性变化,不可为负值。
- flex-basis:子元素的基本大小,作为父元素的大小比较基准,预设值为0,也因为预设值为0,所以没有设定此属性的时候,会以直接采用flex-grow属性,flex-basis也可以设为auto,如果设为auto,就表示子元素以自己的基本大小为单位。
三个属性可以分开设定,也可以合在一起用一个flex统一设定,下面的例子展现出同一个Flexbox,在不同的宽度,子元素会有不同大小的呈现。
HTML:
1
2
1
2
CSS:
学习Q-q-u-n: ⑦⑧④-⑦⑧③-零①②,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划).flex{ display:inline-flex; height:60px; margin:5px 5px 40px; border:1px solid #000; vertical-align: top;}.flex-300{ width:300px;}.flex-150{ width:80px;}.item{ height:60px; text-align: center; line-height: 50px;}.item1{ flex:1 2 200px; background:#c00;}.item2{ flex:2 1 100px; background:#069;}
![fcf2f903b941436cdf2ef78dc52b02ef.png](https://i-blog.csdnimg.cn/blog_migrate/8ad36d1cba825fa8eee6504baf9f9d19.jpeg)
如果用动画来表现,可以看出拉长的时候红色会变得比蓝色长,但压缩的时候却是蓝色变得比红色长,如此一来就更能体会flex在响应式设计里头的关键角色。
以上就是Flexbox的完整介绍,因为有了这个属性,让在做layout的布局又更加弹性了!