Blogger Information
Blog 9
fans 0
comment 0
visits 9081
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Flex术语 属性总结
不忘初心
Original
690 people have browsed it

轴线:主轴、交叉轴
方向:起始线、终止线
容器:
flex容器:display:flex
flex项目:直系子元素
剩余空间:flex元素对齐前提

容器属性:
一、flex-direction:决定主轴的方向,即项目排列的方向。
row:主轴为水平方向,项目沿主轴从左至右排列
column:主轴为竖直方向,项目沿主轴从上至下排列
row-reverse:主轴水平,项目从右至左排列,与row反向
column-reverse:主轴竖直,项目从下至上排列,与column反向
二、flex-wrap:换行
nowrap:自动缩小项目,不换行
wrap:换行,且第一行在上方
wrap-reverse:换行,第一行在下面
三、flex-flow:简写:默认值为row nowrap,即横向排列,不换行。
四、justify-content:决定在主轴上的对齐方式。
flex-start:左对齐
flex-end:右对齐
center:居中对齐
space- between:两端对齐
space-around:沿轴线均匀分布
五、align-items:决定了item在交叉轴上的对齐方式。
flex-start:顶端对齐
flex-end:底部对齐
center:竖直方向上居中对齐
baseline:item第一行文字的底部对齐
stretch:当item未设置高度时,item将和容器等高对齐

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:使用markdown语法,以后实际工作也会用得很多,现在提前练练
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post