布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
2009年,W3C提出了一种新的方案——Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
flex容器有6个属性:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
详见:https://www.runoob.com/w3cnote/flex-grammar.html
1、block、inline与inline-block
块级元素(block),即一个元素独占一行,小程序里的view组件类似于html里的div标签,是块级元素;
行内元素(inline)在一行内依次排列,但是不能设置高宽;
行内块元素(inline-block)具有行内元素特性,同时可以设置高宽。
例如,
.xml:
<view class='chunk color1'/>
<view class='chunk color2'/>
<view class='chunk color3'/>
.wxss:
.chunk{
width:100px;
height:100px;
}
.color1{
background-color:brown;
}
.color2{
background-color:aqua;
}
.color3{
background-color:blue;
}
将chunk属性设置为行内块,
.chunk{
display: inline-block;
width:100px;
height:100px;
}
以上是网页中使三个色块水平排布的方式,在小程序中用flex就可以做到。
2、flex container和flex item
flex元素(flex item)外必须有flex容器(flex container)包裹:
.wxml:
<view class='container'>
<view class='chunk color1' />
<view class='chunk color2' />
<view class='chunk color3' />
</view>
.wxss:
.chunk{
/* display: inline-block; */
width:100px;
height:100px;
}
.container{
display: flex;
}
flex容器里的元素的块级元素的特性将被消除。
3、主轴与交叉轴
容器默认存在两根轴:主轴(main axis)和交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
4、flex-direction
flex-direction属性决定主轴的方向(即项目的排列方向)。
它可能有4个值。
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
.container{
display: flex;
flex-direction: column;
}
5、主轴对齐方式justify-content
justify-content属性定义了项目在主轴上的对齐方式。
它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
例如:
.container{
height: 400px;
display: flex;
justify-content: space-between;
flex-direction: column;
background-color: #999;
}
6、交叉轴对齐方式align-items
align-items属性定义项目在交叉轴上如何对齐。
它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
例如:
.container{
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #999;
}
关于stretch
如果项目未设置高度或设为auto,将占满整个容器的高度。
.chunk{
/* display: inline-block; */
width:100px;
/* height:100px; */
}
.container{
height: 400px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
background-color: #999;
}
7、换行方式flex-wrap
如果不设置换行方式,当一行相同的元素超过屏幕宽度时,元素不会换行,每个元素宽度等于屏幕宽度除以元素个数。
当设置flex-wrap后元素才会换行。
.chunk{
width:150px;
height:100px;
}
.container{
height: 400px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
background-color: #999;
}
上图中,为了消除第三个元素与前两个元素之间上下的间距,应当把flex容器的高度设为两个色块的高度。
.container{
height: 200px;
}
8、flex和inline-flex的区别
作者:_花 链接:https://www.jianshu.com/p/4d596708f61b 来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
flex: 将对象作为弹性伸缩盒显示
inline-flex:将对象作为内联块级弹性伸缩盒显示
flex
.main{
background-color: #0f0;
display: flex;/*父div设置该属性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid black;
}
此时没有为父元素main设置宽度,默认为100%;
inline-flex
//样式
.main{
background-color: #0f0;
display: inline-flex;/*父div设置该属性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid black;
}
此处虽然木有给父元素设置宽度,但是父元素默认会根据子元素的宽高去自适应