关于CSS3 flex布局,这样简单做就好了。

41次阅读

共计 3040 个字符,预计需要花费 8 分钟才能阅读完成。

flex 布局在移动端会用得比较广泛,例如导航栏,菜单栏等,以支付宝,淘宝 APP 为例。

看了网上很多关于 flex 布局,有些写得太乱了,也太复杂了。
写一个导航栏,5 个导航,用普通得写法是。
<!DOCTYPE html>
<html>
<head>
<title>Flex 布局 </title>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover”>
<style type=”text/css”>
*{margin:0px;padding: 0px;list-style: none;}
.con{
height: 50px;
text-align: center;
background: #f00;
}

.con li{
width: 20%;
border:1px solid #000;
box-sizing: border-box;
height: 50px;
float: left;
line-height: 50px;
}
</style>
</head>
<body>
<ul class=”con”>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>

就没每个 <li></li> 按照 20% 平均分,左浮动即可。这种方法是可以实现得,但后面再增加 <li></li>,例如 7 个 <li></li>,那么是下面这样的。

很明显父级元素放不下了,只能被挤下去了。
那么,用 flex 布局怎么做呢?有何优点?
<!DOCTYPE html>
<html>
<head>
<title>Flex 布局 </title>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover”>
<style type=”text/css”>
*{margin:0px;padding: 0px;list-style: none;}
.con{
display: flex;
height: 50px;
text-align: center;
background: #f00;
}

.con li{
flex: 1;
text-align: center;
line-height: 50px;
border:1px solid #000;
box-sizing: border-box;
}
</style>
</head>
<body>
<ul class=”con”>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
效果是和上面一样的

但是当我新增 7 -10 个,都不会被挤下去,而是直接在父级元素上面进行排列并重新划分宽度。

如果要加一个 margin-right 呢?这个也容易啊,但是最后一个 <li></li> 不贴边,我们要给最后一个 <li></li> 单独加一个 style。
<!DOCTYPE html>
<html>
<head>
<title>Flex 布局 </title>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover”>
<style type=”text/css”>
*{margin:0px;padding: 0px;list-style: none;}
.con{
display: flex;
height: 50px;
text-align: center;
}

.con li{
flex: 1;
text-align: center;
line-height: 50px;
border:1px solid #000;
box-sizing: border-box;
margin-right: 3px;
background: #f00;
}
</style>
</head>
<body>
<ul class=”con”>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li style=”margin-right: 0;”>9</li>
</ul>
</body>
</html>

下面再说一个不均等的。

如上图,有三个 <li></li>,每个 <li></li> 都是不均等的,在父级元素用普通的方法就是给不同的百分比。那么用 flex 布局,就是这样:
<!DOCTYPE html>
<html>
<head>
<title>Flex 布局 </title>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover”>
<style type=”text/css”>
*{margin:0px;padding: 0px;list-style: none;}
.con{
display: flex;
height: 50px;
text-align: center;
}

.con .li_1{
flex: 1;
text-align: center;
line-height: 50px;
border:1px solid #000;
box-sizing: border-box;
background: #f00;
}

.con .li_2{
flex: 2;
text-align: center;
line-height: 50px;
border:1px solid #000;
box-sizing: border-box;
background: #f00;
}

.con .li_3{
flex: 3;
text-align: center;
line-height: 50px;
border:1px solid #000;
box-sizing: border-box;
background: #f00;
}
</style>
</head>
<body>
<ul class=”con”>
<li class=”li_1″>1</li>
<li class=”li_2″>2</li>
<li class=”li_3″>3</li>
</ul>
</body>
</html>
上面给每个 <li></li> 用 flex 划分,一共分 6 份,li_1 占 1 /6,那就是 flex:1;li_2 占 2 /6,那就是 flex:2; 这个容易理解吧。
下面接着说水平排列方式:
在父级元素使用 justify-content
justify-content:space-around;/* 左右平均分布 */
justify-content:center;/* 居中 */
justify-content:space-between;/* 两端分布 */
justify-content:flex-start;/* 居左 */
justify-content:flex-end;/* 居右 */

Author:TANKINGWeChat:likeyunba520web:http://likeyunba.com

正文完
 0