CSS中的flex布局
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS中的flex布局
flex布局⼀种常⽤的布局⽅式；记住四个样式即可：
display:flex;
flex-direction: column;
justify-content：space-around
align-items：flex-end
外层容器元素：.menu
⼦元素： .item（包含⼀个div和span）
html：
<view class="menu2">
<view class="item">
<image src="/static/image/Ah玥玥.jpg"></image>
<text>玥玥</text>
</view>
<view class="item">
<image src="/static/image/Ah玥玥.jpg"></image>
<text>玥玥</text>
</view>
<view class="item">
<image src="/static/image/Ah玥玥.jpg"></image>
<text>玥玥</text>
</view>
<view class="item">
<image src="/static/image/Ah玥玥.jpg"></image>
<text>玥玥</text>
</view>
</view>
CSS:
.menu{
// width: 750rpx;
// height：1000px;
display:flex;
/*在⽔平或垂直⽅向排列*/
/* row:主轴为⽔平，column：主轴为垂直⽅向 */
flex-direction: column;
/*排列⽅式：space-around 平均居中布局；center 整体居中布局；space-between 左右靠边，平均布局；flex-start 从左边开始布局*/ justify-content：space-around
/*在副轴⽅向如何展⽰：space/center/space-between/flex-start/flex-end */
align-items：flex-end /*flex-end：垂直排列情况下，⽔平靠右展⽰*/
}
.menu .item{
display:flex;
flex-direction:column; /*⼦元素内部标签垂直排列*/
align-items:center /*在主轴垂直排列下，副轴⽔平⽅向居中*/
}。