弹性布局 - flex对齐
程序员文章站
2023-10-11 14:16:45
flex对齐 flex对齐方式与主轴和交叉轴所在的方向有关,而flex-direction是控制方向的。 主轴 justify-content justify-content对齐方式共有5种对齐方式： flex-start ：主轴起点边缘开始，从左向右。 flex-end ：主轴终点边缘开始，从右向 ......
flex对齐
flex对齐方式与主轴和交叉轴所在的方向有关,而flex-direction是控制方向的。
主轴 justify-content
justify-content对齐方式共有5种对齐方式：
flex-start ：主轴起点边缘开始，从左向右。
flex-end ：主轴终点边缘开始，从右向左。
center ：主轴中间开始，向两端伸缩。
space-between：主轴两端对齐。
space-around ： 与space-between区别就是起始端与结束端间隔相等。
交叉轴： align-content
align-content对齐方式共有6种。除了与justify-content前5种方式一样外，多了一种stretch对齐方式。
stretch：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
align-items
用于单行/单列对齐，沿主轴方向对齐。
flex-start ：主轴起点。
flex-end ：主轴终点。
center：主轴中间。
stretch ： 拉伸。
baseline：基线对齐。
自身对齐方式：align-self
用于单行（或单列），沿交叉轴方向对齐。
flex-start ：交叉轴起点。
flex-end ：交叉轴终点。
center：交叉轴中间。
stretch ： 拉伸。
baseline：基线对齐。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0px;
}
.box{
width: 50px;
height: 50px;
}
.flexbox-row{
margin: 50px auto;
display: flex;
flex-direction: row;
width: 120px;
height: 320px;
border: 1px #ccc solid;
flex-wrap: wrap;
/**
左上角
justify-content: flex-start;
align-content: flex-start;
左下角
justify-content: flex-start;
align-content: flex-end;
右上角
justify-content: flex-end;
align-content: flex-start;
*/
justify-content: flex-end;
align-content: flex-end;
}
</style>
</head>
<body>
<div class="flexbox-row">
<div class="box" style="background-color:coral;">a</div>
<div class="box" style="background-color:lightblue;">b</div>
<div class="box" style="background-color:khaki;">c</div>
<div class="box" style="background-color:pink;align-self: flex-start;">d</div>
<div class="box" style="background-color:lightgrey;">e</div>
<div class="box" style="background-color:lightgreen;">f</div>
</div>
<script>
</script>
</body>
</html>
下一篇： ps怎么给条形背景做球面化?