flex 的属性及其作用
flex-direction:用于指定 Flex 容器内子元素的主轴方向。
flex-direction: column; 主轴方向为垂直方向,起点在上沿;
flex-direction: column-reverse; 主轴方向为垂直方向,起点在下沿
flex-direction: row; 主轴为水平方向,起点在左端。
flex-direction: row-reverse; 主轴为水平方向,起点在右端。
justify-content: 用于控制 Flex 容器内子元素在主轴上的对齐方式。
align-items: 用于控制 Flex 容器内子元素在交叉轴上的对齐方式。
flex-wrap:用于控制子元素是否换行
align-content:用于控制多行子元素在交叉轴上的对齐方式
flex-grow:指定 Flex 项目的放大比例,决定了子元素在剩余空间中分配的比例。
flex-shrink:指定 Flex 项目的缩小比例,决定了子元素在空间不足时收缩的比例
flex-basis:设置 Flex 项目在分配多余空间之前的基础大小
order: number:用于指定 Flex 项目的排列顺序,数值越小越靠前,默认为 0
align-self: 是用于在 Flex 布局中控制单个 Flex 项目(子元素)在交叉轴上的对齐方式的 CSS 属性。
flex:用于设置弹性盒子容器中的子元素如何分配剩余空间。
一点布局
原理就是将单个子元素垂直水平居中
- 父盒子开启flex,并设置主轴居中,侧轴居中
<style>
.box {
width: 400px;
height: 400px;
border: 2px solid #ccc;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.box>div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #666;
}
</style>
<div class="box">
<div></div>
</div>
- 父盒子开启flex,子盒子设置margin:auto
<style>
.box {
width: 400px;
height: 400px;
border: 2px solid #ccc;
border-radius: 10px;
display: flex;
}
.box>div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #666;
margin: auto;
}
</style>
<div class="box">
<div></div>
</div>
- 子绝父相,子盒子设置top和left值为50%,利用transform基于自身回去-50%
<style>
.box {
width: 400px;
height: 400px;
border: 2px solid #ccc;
border-radius: 10px;
position: relative;
}
.box>div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #666;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="box">
<div></div>
</div>
- 子绝父相,子盒子设置上下左右均为0,在设置margin:auto也可以
<style>
.box {
width: 400px;
height: 400px;
border: 2px solid #ccc;
border-radius: 10px;
position: relative;
}
.box>div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #666;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
<div class="box">
<div></div>
</div>
两点布局
<style>
.box {
width: 400px;
height: 400px;
border: 2px solid #ccc;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.box>div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #666;
}
</style>
<div class="box">
<div></div>
<div></div>
</div>
三点布局
<style>
.box {
width: 400px;
height: 400px;
border: 2px solid #ccc;
border-radius: 10px;
display: flex;
justify-content: space-between;
padding: 30px;
}
.box>div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #666;
}
.box>div:nth-child(2) {
align-self: center;
}
.box>div:nth-child(3) {
align-self: flex-end;
}
</style>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
三点布局需要三个子元素,在这里的第一个子元素不需要设置排列方式,默认为 align-self: flex-start
justify-content: space-between; 的作用是使子元素能够在水平方向上两边产生间隔并平均分布空间
align-self: flex-start(默认)/center/flex-end; 该属性作用在父元素设置了display:flex的子元素上,可以调整子元素自身的位置
四点布局
<style>
.box {
width: 400px;
height: 400px;
border: 2px solid #ccc;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
}
.box>div {
width: 100px;
height: 100px;
margin: 50px;
border-radius: 50%;
background-color: #666;
}
</style>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
五点布局
<style>
.box {
width: 450px;
height: 450px;
border: 2px solid #ccc;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box>div {
width: 100px;
height: 100px;
margin: 25px;
border-radius: 50%;
background-color: #666;
}
.box>div:nth-child(2) {
margin-top: 50%;
transform: translateY(-50%);
}
.box>div:nth-child(4) {
transform: translateY(-50%);
}
.box>div:nth-child(5) {
transform: translateY(-50%);
}
</style>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
六点布局
<style>
.box {
width: 450px;
height: 450px;
border: 2px solid #ccc;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
align-content: space-evenly;
}
.box>div {
width: 100px;
height: 100px;
margin: 25px;
border-radius: 50%;
background-color: #666;
}
</style>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>