目录:
一)inline:
1、类似于span标签,不会独占一行,元素排满外部容器之后就会自动换行。
2、不可以设置宽度和高度,设置均无效。
3、设置内外边距时,只有水平方向生效,垂直方向边距设置不生效。
4、两个inline属性的元素,只要该行未排满仍然不会换行。span默认就是inline布局,所以最终显示的是”我是我你是你“没有换行效果。
<span>我是我</span>
<span>你是你</span>
二)block
1、类似于div标签,所以与inline最大的区别就是每个block布局的元素会独占一行。
2、block布局的元素可以设置高度和宽度。尽管两个block的宽度都是容器的50%还是会有换行效果。
3、block布局支持内外边距的所有设置。
4、block布局的宽度默认会将容器填满
block布局很好的用于换行操作,省去写flex操作
三)inline-block
1、是inline和block的综合版。具有inline的不换行效果。
2、具有block的可以设置宽度高度的属性。
3、可以设置边距属性。
4、由于不换行性,就允许了再inline-block布局的左右添加元素,
例:在文字的左边添加小红点:
<!--HTML部分 -->
<view class="notify-content">您有{{ message }}条未读消息</view>
/*css代码*/
.notify-content{
font-size: 30rpx;
color: @font-color;
&:before{
display: inline-block;
content: '';//内容
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background-color: red;
}
}
总之,inline-block就是保留了inline的不换行性,又增加了block的可设置高度性。
补充:
vertical-align属性:
设置垂直上的偏差,实现垂直居中,这样就省去用flex再垂直轴居中
四)flex布局详解:
1、flex布局的引用就是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。
2、Flex容器会使子项目(伸缩项目)扩展来填满可用空间,或缩小他们以防止溢出容器(若设置了一行的子元素宽度,但是随着一行元素的增多,且属性为不换行,此时flex就会采用压缩的方式使元素强制在一行)。
0、flex布局分为主轴和辅轴,取决于flex-direction属性的设置,默认为横轴row为主轴。
1、flex-direction属性:
row、row-reverse、column、column-reverse
2、flex-wrap属性:
nowrap(默认,不换行)、wrap(换行,首行在上方)、wrap-reverse(换行,首在下方)
3、justify-content:控制主轴元素的对齐方式。
1、flex-start:向主轴的起始位置对齐。
2、flex-end:向主轴结束位置对齐。
3、center: 居中
4、space-between:主轴的起始位置各一个,其余元素间距平均分配。
5、space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
4、align-items:辅助轴的对齐方式。
1、flex-start:交叉轴的起点对齐。
2、flex-end:交叉轴的终点对齐。
3、center:居中对齐。
4、baseline: 项目的第一行文字的基线对齐。
5、stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。