文字居中两边线易用的css3 flex
发布日期: 2017-09-10 00:00:00
点击次数: 1017
点击次数: 1017
大字
小字
From: http://www.6yang.net/myjavascriptlib/flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字居中两边线易用的css3 flex</title>
</head>
<style>
body{
background-color: #f2f2f2
}
.box{
display: flex;
justify-content: space-between;
align-content:flex-start
}
.box .item{
background-color: #ccc;
text-align: center;
flex-grow:1
}
.box .item:nth-child(2n){
background-color: #f30
}
.flex {
display: flex;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
justify-content:center;
align-items:center;
align-content: center;
height: 300px;
border: 1px solid blue;
margin: 20px 0
}
.flex li{
vertical-align: middle;
}
.flex li:nth-child(1) {
flex-grow: 1;
border-bottom: 1px solid #333;
height:1px;
margin-right: 5px;
}
.flex li:nth-child(2) {
background-color: rgba(200,300,3,0.5);
color: #333;
padding: 0 25px;
}
.flex li:nth-child(3) {
flex-grow: 1;
border-bottom: 1px solid #333;
height:1px;
margin-left: 5px;
}
.flex01 {
display: flex;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
align-items:center;
height: 300px;
border: 1px solid pink;
}
.flex01 li{
text-align: center;
background-color: #ccc;
}
.flex01 li:nth-child(2n+1){
flex-grow:1;
background-color: #fff;
}
</style>
<body>
<div class="box">
<div class="item">1</div>
<div class="item" style="width: 100px; flex-grow:2">2</div>
<div class="item">3</div>
</div>
<ul class="flex">
<li></li>
<li>中间的文字内容</li>
<li></li>
</ul>
<ul class="flex01">
<li>a</li>
<li>test</li>
<li>c</li>
</ul>
</body>
</html>