flex布局
奄奄一息的一条咸鱼
这个作者很懒,什么都没留下…
展开
-
Flex:flex布局的使用和语法规范
flex也称弹性布局,是浏览器提倡的一种布局模型,专本用来做布局的,而且能避免脱标的问题。flex中有两个轴,主轴和侧轴,默认水平是主轴,垂直是侧轴。如何变成flex布局?给父级的盒子(亲爹)添加:display:flex;属性即可,父级下的子级就会变成弹性盒子,针对行内元素的弹性盒子,即便不转换成块元素,直接设置宽高也会生效,这是弹性布局的一个特点。// less写法.box { .father { display:flex; // 即便没有把a链接display:block; 设置宽原创 2021-12-23 14:39:45 · 246 阅读 · 0 评论 -
flex布局:常用的子元素属性设置及使用方式
flex属性:flex属性定义子项目分配剩余的空间,用flex来表示占多少份数。语法:flex:1;表示在剩余空间中,占1份。flex:2;表示在剩余空间中,占2份。占的份数越大,元素的大小就越大。.father span:nth-child(2) {/*在剩余空间中占2份*/ flex: 2; background-color: tomato;}.father span:nth-child(3) {/*在剩余空间中占3份 所以这个span占的份数大于第二个span*/原创 2021-01-19 13:19:07 · 2472 阅读 · 0 评论 -
flex布局:常用的父元素属性设置及使用方式
首先想要使用flex布局,需要给父盒子添加display:flex;属性,该属性对块级元素、行内块元素、行内元素都是一视同仁的,不存在块级元素和行内元素的关系。即便是span行内元素,当添加了display:flex属性后,也会有宽和高。.box { display: flex; width: 600px; height: 300px; background-color: yellowgreen;}.box span { width: 150px;原创 2021-01-17 23:06:07 · 3775 阅读 · 0 评论