一,新型布局方式:
使用细节:
弹性布局,默认一行显示,无法换行。
换行需要自行开启弹性布局的换行功能。
变为多行以后及无法使用align-items 进行位置设置。
只能用align-content 在多行的时候 设置的属性跟justify-content一模一样。
flex-wrap:wrap;
①display: flex;
②/* 调整主轴方向 */
flex-direction:column;
/* 设置主轴的排布 */
justify-content:flex-end;
/* 设置主轴的排布 */
align-items:center;
align-self:center;
<style>
ul{
list-style: none;
padding: 0;
height: 300px;
border: 1px solid gray;
/* 使用弹性布局需要在父盒子中开启弹性布局。
弹性布局开启以后 元素默认分为两个轴排布。
主轴:默认是x方向
副轴:默认是y方向。 */
display: flex;
/* 弹性布局可以方便的调整内部盒子的位置。
调整元素在主轴上的排布方式。
flex-end是到主轴的末尾。
flex-start默认值
center居中
space-between 左右靠边 中间间隙相等排布。
space-arround 左右间隙相等。
*/
justify-content:flex-end;
/* 设置副轴的对齐方式。 */
align-items:center;
}
li{
width: 100px;
height: 100px;
margin: 5px;
border: 1px solid gray;
text-align: center;
font-size: 30px;
font-weight: 900;
}
/* 设置子元素
设置第二个li标签 居中 */
li:nth-child(2){
/* 单独设置元素 在副轴上的对齐方式 会覆盖父元素的align-items */
align-self:center;
}
/* 设置第三个li标签 顶部 */
li:nth-child(3){
/* 单独设置元素 在副轴上的对齐方式 会覆盖父元素的align-items */
align-self: flex-start;
/* 调整主轴方向 */
flex-direction:column;
/* 设置主轴的排布 */
justify-content:flex-end;
/* 设置主轴的排布 */
align-items:center;
}
</style>
二,