前端应知应会:flex布局详解
flex布局可以说是当下前端开发必须学会的一个基本技能,它在面试中的出场率也很高,有必要专门讲解一下。
flex布局全称flexible box布局模型,是一种比较高效的css3布局方案
通过设置元素的display属性,改成flex属性
.box{
display:flex;
}
来指定对应容器为flex布局。然后它的所有子元素自动成为了容器元素,不脱离文档流的情况下按照flex item的默认布局规则排列。
首先看下容器的属性:
1、flex-direction
决定主轴的方向,
默认值是row即横向从左往右的顺序进行排列。
其他选项值还有row-reverse、column、column-reverse
2、flex-wrap
它决定了如果轴线排列不下去的话,如何进行换行
默认是不进行换行,继续沿着主轴方向放置。
其它选项还有:wrap(换行)、wrap-reverse(换行、但是位置跟wrap相反)
3、flex-flow
它是flex-firection和flex-wrap的简写
4、justify-content
该属性定义了item在主轴上的对齐方式
默认值是:flex-start即顺着主轴方向排列对齐
其他还有flex-end:逆着主轴方向并从最远处往主轴起点排列
center:居中
space-between:两端对齐,项目之间间隔相等
space-around:每个项目两侧留白距离相等
5、align-items
该属性定义了项目在交叉轴上如何对齐
毕竟,每个item的高度不一定完全一样。
它的默认值是stretch:即如果item没有设置高度或者是auto,则会占据整个容器的高度
其他还有flex-start、flex-end、center、baseline
6、align-content
它跟align-items的区别就是,该属性定义的是多跟轴线的对齐方式
该参数有六个可选项:
flex-start、flex-end、center、space-between、space-around、stretch
这里面要记得的是处于不同轴线上的item不会遮挡,即如果某个轴线上有两个不同高度的item,那么下一个轴线的位置会按照上一条轴线上高度最高的item进行计算。
1、order决定了项目的排列顺序,可以通过设置该属性将对应的item往前排列
2、flex-grow,决定了item的放大比例,默认为0不进行放大。
3、flex-shrink,定义了item的缩小比例,默认为1,如果空间不够的话所有轴线上的item将进行同比缩小,如果为0则该item不进行缩小
4、flex-basis,定义item在轴线上占据的宽度,如果没设置的话,就按item自身的宽度进行分配
5、align-self。定义item在轴线纵向的排列方式,可以替换掉对应flex容器的align-items属性,为该item设置专门的对齐方式
下面再举个例子
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="item1">1111111</div>
<div class="item" style="height:50px;">22</div>
<div class="item3">333</div>
<div class="item">44</div>
<div class="item5">
555
</div>
6
</div>
<script>
</script>
</body>
<style>
.container {
display: flex;
width: 60px;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
}
.item {
background-color: brown;
}
.item5 {
position: absolute;
top: 30px;
left: 20px;
}
.item3 {
align-self: flex-end;
height: 20px;
}
</style>
</html>
- 点赞
- 收藏
- 关注作者
评论(0)