flex布局
@[TOC](文章目录)参考博客
各个方位的布局
单元素
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
display: -webkit-flex; Webkit 内核的浏览器,必须加上-webkit前缀。
min-height: 100vh; /*使用纵轴的时候应该指定上一级元素的高度*/
justify-content: flex-start; 1、横轴居左
justify-content: center; 2、横轴居中
justify-content: flex-end; 3、横轴居右
align-items: flex-start; 1、纵轴居上(同一)
align-items: center; 4、纵轴居中
align-items: center; 5、纵轴居中
justify-content: center;
align-items: center; 6、横轴居右、纵轴居中
justify-content: flex-end;
align-items: flex-end; 7、纵轴居下
align-items: flex-end; 8、纵轴居下,横轴居中
justify-content: center;
align-items: flex-end; 9、纵轴居下,横轴居右
justify-content: right;
}
.item {
background-color: #22ffe9;
width: 200px;
height: 200px;
}
</style>
<div class="box">
<span class="item">1</span>
</div>
多元素
1、
2、
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: -webkit-flex;
display: flex;
justify-content:space-between; 1、横轴两端对齐
justify-content:space-around; 2、横轴每个元素间隔相等
******未完待续
}
.item {
background-color: #22ffe9;
width: 200px;
height: 200px;
}
</style>
<div class="box">
<span class="item"> </span>
<span class="item"> </span>
<span class="item"> </span>
<span class="item"> </span>
</div>
网格布局
基本网格布局
| 最简单的网格布局,就是平均分布。在容器里面平均分配空间
* {
margin: 0;
padding: 0;
}
.box {
display: -webkit-flex;
display: flex;
}
.item {
flex: 1;//各元素平分父元素
margin: 0 20px 0 20px;
width: 200px;
height: 200px;
}
</style>
<div class="box">
<span class="item" style="background-color: #00d9ff"> </span>
<span class="item" style="background-color: #0022ff"> </span>
</div>
百分比网络布局
* {
margin: 0;
padding: 0;
}
.box {
display: -webkit-flex;
display: flex;
}
.item {
flex: 1;
width: 200px;
height: 200px;
}
.item.left{
flex: 0 0 50%;
}
.item.right{
flex: 0 0 30%;
}
</style>
<div class="box">
<span class="item left" style="background-color: #00d9ff"> </span>
<span class="item right" style="background-color: #0022ff"> </span>
</div>
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body class="scream">
<style>
*{
margin: 0;
padding: 0;
}
.scream{
display: flex;
min-height: 100vh;
flex-direction: column;
}
.header,.footer{
flex: 1;
}
.content{
display:flex;
flex: 1;
}
.main{
background-color: #8c939d;
height: 650px;
flex: 1;
}
.nav,.aside{
/* 两侧设置成12em*/
flex: 0 0 12em;
}
.nav{
/*导航栏放到左边*/
order: -1;
}
/*小屏幕自适应*/
@media (max-width: 768px) {
.content {
flex-direction: column;
flex: 1;
}
.nav,
.aside,
.main {
flex: auto;
}
}
</style>
<header class="header" style="background-color: #ff271a;">头部</header>
<div class="content">
<main class="main" style="background-color: white">main</main>
<nav class="nav" style="background-color: #85ce61;">nav</nav>
<aside class="aside" style="background-color: #0034ba;">aside</aside>
</div>
<footer class="footer" style="background-color: #a8c9ff">脚部</footer>
</body>
</html>
如果有什么不对的地方欢迎各位大神指正!!!