最近项目中更多的用到了flex布局,以前不太会用,记录一下尝试过程和心得。
定义方法与简单使用
display: flex;(块标签)/display:inline-flex;(行内标签)
给某一标签添加上述样式后,即可将此标签设置为flex布局(弹性布局),任何一个容器都可以被指定为flex 布局;
常用的弹性布局分两大种,第一种是横向弹性布局(row),另一种是竖向弹性布局(column),使用的方法是给标签添加如下样式:
flex-direction: row/column;
注意:如果是webkit内核的浏览器,必需加上-webkit前缀
display: -webkit-flex;
视图
根据图示理解:
- 主轴(main axis)
- 交叉轴(cross axis)
容器(被设置flex的标签)中所有的项目(子标签)都沿着主轴排列。
属性
容器的属性
flex-direction
flex-direction决定的是主轴的方向(即项目排列的方向)。
值有row(水平主轴左端为起点)、row-reverse(水平主轴右端为起点)、column(垂直主轴上端为起点)、column-reverse(垂直主轴下端为起点),排列方式如下图:
lex-wrap flex-flow justify-content align-items align-content
暂时还没用到,以后再补充
项目的属性
flex
最常用的flex属性,有三个值,0,1,auto
当你有一个容器,容器中有三个项目,你希望三个项目平分容器的宽度(高度)时:
给每一个项目设置——flex: 1
当容器中有两个项目,其中一个定高,你希望第二个项目的高度自动填充剩下的容器的高时:
给第二个项目设置——flex: 1
原文地址:https://www.cnblogs.com/lzb1234/p/11993495.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。