css——flex弹性布局之竖向布局和横向布局

竖向布局

代码




    
    Title
    


1
2
3

效果图
css——flex弹性布局之竖向布局和横向布局_第1张图片

注意1:html,boby高度一定100%,不然高度不会充满整个屏幕

html,body没有设置100%效果图
css——flex弹性布局之竖向布局和横向布局_第2张图片

注意2 flex: 1 1 auto;在子元素中一定要加上
没有加 flex: 1 1 auto;的效果图
css——flex弹性布局之竖向布局和横向布局_第3张图片

横向布局

代码




    
    Title
    


你好
你好
你好

效果图
css——flex弹性布局之竖向布局和横向布局_第4张图片
其实横向和纵向布局就是一个 flex-direction值的不同。除了所有不固定高度外,你还可以上下固定高度,中间自适应
代码




    
    Title
    


你好
你好
你好

效果图
css——flex弹性布局之竖向布局和横向布局_第5张图片

你可能感兴趣的:(css,flex弹性布局)