fiex弹性布局justify-content
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fiex弹性布局justify-content</title>
<style type="text/css">
.box1{
width: 400px;
height: 100px;
border: 2px solid #f4a5a5;
background-color: #ffc9c9;
border-radius: 20px;
display: flex;
/*justify-content: flex-start;左对齐可以省略*/
align-items: center;/*居中*/
}
.s1{
width: 100px;
height: 20px;
border: 2px solid #b2f2bb;
background-color: #9ac190;
border-radius: 10px;
}
.s2{
width: 50px;
height: 20px;
border: 2px solid #b2f2bb;
background-color: #9ac190;
border-radius: 10px;
}
.s3{
width: 100px;
height: 20px;
border: 2px solid #b2f2bb;
background-color: #9ac190;
border-radius: 10px;
}
.box2{
width: 400px;
height: 100px;
border: 2px solid #f4a5a5;
background-color: #ffc9c9;
border-radius: 20px;
}
div[class^=s]{
width: 100px;
height: 20px;
border: 2px solid #b2f2bb;
background-color: #9ac190;
border-radius: 10px;
}
.box5{
justify-content:space-around;
align-items:center;
}
</style>
</head>
<body>
<h1>fiex-</h1>
<div class="box1">
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
</div>
<h1>fiex-end</h1>
<div class="box2">
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
</div>
</body>
</html>
利用border-radius制作圆
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用border-radius制作圆</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
border-top-left-radius: 48px;
border-top-right-radius: 48px;
border-bottom-left-radius: 48px;
border-bottom-right-radius: 48px;
/*border-radius: 50%; 圆角半径 */
text-align: center;
line-height: 200px;
font-size: 48px;
}
</style>
</head>
<body>
<div class="box1">
1
</div>
</body>
</html>
横排列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>横排列</title>
<style type="text/css">
.container{
height: 48px;
display: flex;
}
div[class^=item]{
flex: 1;
}
.num{
width: 24px;
height: 24px;
color: #000;
background-color: #fff;
border-radius: 50%;
text-align: center;
margin: 12px auto;
}
.item1{background-color:#E7000A;}
.item2{background-color:#F29900;}
.item3{background-color:#FDF100;}
.item4{background-color:#029A43;}
.item5{background-color:#0268BC;}
.item6{background-color:#601289;}
</style>
</style>
</head>
<body>
<div class="container">
<div class="item1"><div class="num">1</div></div>
<div class="item2"><div class="num">2</div></div>
<div class="item3"><div class="num">3</div></div>
<div class="item4"><div class="num">4</div></div>
<div class="item5"><div class="num">5</div></div>
<div class="item6"><div class="num">6</div></div>
</div>
</body>
</html>
利用border-radius制作花样图形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用border-radius制作花样图形</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="box1">
1
</div>
</body>
</html>
css样式
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
border-top-right-radius: 50%; /*圆角半径*/
border-bottom-left-radius: 50%;
text-align: center;
line-height: 200px;
font-size: 48px ;
}
代码语言：css
.box {
align-items:flex-start flex-end center baseline stretch;
}
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
●flex-start：交叉轴的起点对齐。
·flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
·baseline:项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
浙公网安备 33010602011771号