移动端布局——flex布局下的居中对齐方式-阿里云开发者社区

移动端布局——flex布局下的居中对齐方式

2022-11-07 316

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

题目要求

html代码

<!DOCTYPE html><html><head><title>第三题</title><metacharset="utf-8"><!-- <meta name="___(1)___" content="width=device-width, initial-scale=1,user-scalable=no"/> --><metaname="viewport"content="width=device-width, initial-scale=1,user-scalable=no"/><linkrel="stylesheet"type="text/css"href="css/style.css"></head><body><divclass="wrap"><header><divclass="logol"><imgsrc="img/logol.jpg"></div></header><section><divclass="tabTitle"><divclass="title">注册</div><divclass="title cur">登录</div></div><divclass="form"><!-- <form action="" ___(2)___="post"> --><formaction=""method="post"><ul><!-- <li><input type="text" name="username" __(3)___="请输入用户名"></li><li><input type="text" name="username" __(3)___="请输入密码"></li> --><li><inputtype="text"name="username"placeholder="请输入用户名"></li><li><inputtype="text"name="username"placeholder="请输入密码"></li></ul><div><ahref="">忘记密码</a></div><buttontype="submit">登录</button></form></div></section><sectionclass="otherLogin"><h2><a>第三方登录</a></h2><ul><li><imgsrc="img/icon-img1.jpg"></li><li><imgsrc="img/icon-img2.jpg"></li><li><imgsrc="img/icon-img3.jpg"></li></ul></section><footer><p>登录表示你同意该软件<ahref="">用户服务协议</a>和<ahref="">隐私政策</a></p></footer></div></body></html>

css代码

body,h1,h2,h3,h4,h5,h6,ul,p{
margin: 0;
padding:0;
}
body,html{
/* ____(4)____;设置高度为屏幕的高度 */height: 100%;/*设置高度为屏幕的高度*/}
img{
display: block;
}
ul{
list-style: none;
}
input{
border:none;
}
.wrap{
position: relative;
width: 100%;
max-width: 760px;
margin:0auto;
height: 100%;
}
header,section,footer{
width: 100%;
}
header{
display: flex;
/* _______(5)_____;水平居中对齐 *//* _______(6)_____;垂直居中对齐 */justify-content:center;/*水平居中对齐*/align-items: center;/*垂直居中对齐*/height: 31.8%;
background:url("../img/logol-bottomBj.jpg") no-repeatbottom/100%#7A9AD7;
}
header.logol{
display: flex;
/* _______(5)_____;水平居中对齐 *//* _______(6)_____;垂直居中对齐 */justify-content:center;/*水平居中对齐*/align-items: center;/*垂直居中对齐*/width: 82px;
height: 82px;
/* ____(7)_____: 50%;设置圆角 */border-radius: 50%;/*设置圆角*/border:2pxsolid#B5C5E7;
background-color: #fff;
}
.tabTitle{
margin-top:1em;
display: flex;
text-align: center;
line-height: 40px;
}
.tabTitle.title{
width: 50%;
border-bottom: 1pxsolid#E9E9E9;
}
.tabTitle.title.cur{
border-bottom: 1pxsolid#7C8194;
}
.form{
display: flex;
justify-content:center;/*水平居中对齐*/}
.formform{
width: 80%;
margin-top:1em;
text-align: center;
}
.formulli{
width: 100%;
height: 50px;
line-height: 50px;
display: flex;
align-items: center;;/*垂直居中对齐*/border-bottom:1pxsolid#ABAFB2;
}
.formformdiv{
border-bottom:none;
line-height: 40px;
text-align: right;
}
.formformdiva{
text-decoration: none;
color:#666;
font-size: 12px;
}
.formformbutton{
width: 60%;
height: 50px;
line-height: 50px;
background-color: #7A9AD7;
border-radius: 25px;
border:none;
color: #fff;
}
.otherLoginul{
display: flex;
justify-content:center;/*水平居中对齐*/}
.otherLoginh2{
text-align: center;
font-weight: normal;
font-size: 18px;
line-height: 40px;
margin:1em0;
color: #555;
}
.otherLoginh2:before{
position: relative;
top:23px;
left:50%;
transform: translateX(-50%);
z-index: -1;
content:"";
display: block;
width: 80%;
height:1px;
background-color: #E9E9E9;
}
.otherLoginh2a{
padding:010px;
background-color: #fff;
}
.otherLoginulli{
margin:010px;
}
footerp{
position: absolute;
width: 100%;
height: 30px;
line-height: 30px;
font-size: 12px;
bottom:10px;
text-align: center;
}
footerpa{
text-decoration: none;
color:#506081;
}

题目分析

✅meta标签

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>

✅viewport的conten值

✅input标签的placeholder 属性

✅flex布局下设置居中对齐模式

⏩水平居中

⏩justify-content:设置主轴上的子元素排列方式

⏩垂直居中

⏩align-items:设置交叉轴上的子元素排列方式

实现效果