-
默认情况下,项目都排在一条线(又称“轴线”)上
-
flex-wrap属性定义,flex布局中默认是不换行的
| 属性值 | 解释说明 |
| — | — |
| nowrap | 默认值,不换行 |
| wrap | 换行 |
.box {
display: flex;
...
flex-wrap: wrap;
}
===================================================================================
-
该属性是控制子项在侧轴(默认是y轴)上的排列方式
-
在子项为单项(单行)的时候使用
| 属性值 | 解释说明 |
| — | — |
| flex-start | 默认值,从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中(垂直居中) |
| stretch | 拉伸 |
.box {
display: flex;
...
align-items: center;
}
=====================================================================================
- 设置子项在侧轴上的排列方式,并且只能用于子项出现换行的情况,在单行下是没有效果的
| 属性值 | 解释说明 |
| — | — |
| flex-start | 在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴的中间显示 |
| stretch-around | 子项在侧轴平分剩余空间 |
| stretch-between | 子项在侧轴先分布在两头,在平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
.box {
display: flex;
...
align-content: stretch;
}
-
align-items适用于单行情况下,只有上对齐、下对齐、居中和拉伸
-
align-content适应于换行(多行)的情况下(单行对齐无效),可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
-
总结就是单行找align-items多行找align-content
==========================================================================
- flex-flow属性是flex-direction和flex-wrap属性的复合属性
.box {
display: flex;
...
flex-flow:row nowrap;
}
=====================================================================
-
flex属性定义子项目分配父盒子的剩余空间,用flex来表示占多少份数
-
属性值为数字,数字为1,表示占总份数中的1份,默认值为0
.item {
flex:1;
}
===================================================================================
-
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
-
默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
span:nth-child(2) {
align-self: flex-end;
}
-
数值越小,排列越靠前,默认为0
-
注意:和z-index不一样
.item {
oredr: -1;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zWtqyATB-1604920584915)(])
最后
在面试前我花了三个月时间刷了很多大厂面试题,最近做了一个整理并分类,主要内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
-
HTML5新特性,语义化
-
浏览器的标准模式和怪异模式
-
xhtml和html的区别
-
使用data-的好处
-
meta标签
-
canvas
-
HTML废弃的标签
-
IE6 bug,和一些定位写法
-
css js放置位置和原因
-
什么是渐进式渲染
-
html模板语言
-
meta viewport原理