移动端布局要适配各种客户端,稳定的布局就显得比较重要。
本文介绍几种常见的采用flex布局简单且稳定的达到预期效果的例子。
flex容器有4个比较常用属性:
flex-direction
flex-wrap
justify-content
align-items
1.图片文字对齐,类似以下:
左边图片与右边文字水平居中对齐,且自适应。右边文字垂直居中对齐,文字间距离可使用行高调整且稳定居中。
html如下:
<div class="box">
<div class="img">image</div>
<div class="content">
<span class="title">标题</span>
<span class="article">内容内容内容内容内容内容内容内容</span>
</div>
</div>
css如下:
.box {
width: 500px;
/* 使盒子成为伸缩盒,所有直系子元素float,position, vertical-align失效*/
display: flex;
/* 所有子元素按各自中线对齐 */
align-items: center;
border: 1px solid #000;
padding: 10px;
background-color: #ddd;
}
.img {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
margin-right: 20px;
text-align: center;
line-height: 100px;
}
.content{
display: flex;
/* 设置对齐方向为竖直方向,默认为水平 */
flex-direction: column;
}
.title {
font-size: 18px;
}
align-items总共有五个属性:
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
flex-direction有四个属性:
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。2.图片文字九宫格
html布局:
<div class="box">
<!-- 其中一个项目 -->
<div class="wrapper">
<div class="img"></div>
<div class="content">
<span class="title">标题</span>
<span class="article">内容内容内容内容内容内容</span>
</div>
</div>
<!-- ...你还可以放任意多个 -->
</div>
css:
.box {
box-sizing: border-box;
padding: 10px 0;
width: 30%;
margin: 0 auto;
border: 1px solid #000;
background-color: #ccc;
/* 设置伸缩盒 */
display: flex;
/* 所有子元素两端对齐,中间间隔相等 */
justify-content: space-between;
/* 换行 */
flex-wrap: wrap;
}
.wrapper {
width: 30%;
display: flex;
flex-direction: column;
}
.img {
width: 100%;
height: 100px;
background-color: red;
}
.content {
display: flex;
flex-direction: column;
}
.title {
color: orangered;
font-size: 20px;
}
1个:
4个:
6个:
若子元素设置百分比会自动适应父盒子的大小。
flex-wrap有3个属性:
nowrap:(默认)不换行。
wrap:换行。
wrap-reserve:换行,并且子元素垂直排列方向反向。以上四个子元素若设置wrap-reserve则如下所示。
justify-content有5个属性:
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
更多内容可以参考w3school,推荐阅读阮一峰老师文章:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html