flex: 1 的理解

flex

flex基本语法

参考MDN: [https://developer.mozilla.org...]

需要注意的点

flex-basis是对于主轴来说,主轴可以是x轴,也可以是y轴,为了方便行文,默认主轴为x轴

  • flex-basis的优先级比width高
  • item的宽度等于basic设置或者width设置的值加上剩余空间被平分后自己占据那部分的值

比如

容器宽度等于700px

item1 flex-grow=2 flex-basic或者宽度=100px

item2 flex-grow=1 flex-basic或者宽度=200px

item3 flex-basic或者宽度=100px(flex-grow默认等于0)

item1最终宽度 =(700 - 100 - 200 - 100)/ ( 1 + 2) * 2 + 100 = 300

item1最终宽度 =(700 - 100 - 200 - 100)/ ( 1 + 2) * 1 + 200 = 300

item1最终宽度 = 100  
  • 设置flex属性,不管是用单值语法还是双值语法,会改变flex-grow flex-shrink flex-basis 的默认属性

比如

flex: 1;

这个是单值语法:1代表的是flex-grow的值,其他两个值会被省略,被省略的时候,会有默认值

flex-grow: 省略时默认值为 1。 (原本默认值为 0)
flex-shrink: 省略时默认值为 1。 (原本默认值为 1)
flex-grow: 省略时默认值为 0。 (原本默认值为 auto)

所以flex: 1 等于 flex: 1 1 0,而不是felx: 1 1 auto

flex布局可以实现的几个效果

前置准备工作

item1
item2
item3

等分布局

.content {
    display: flex;
    width: 800px;
    height: 100px;
}
.item1 {
    background-color: #eee;
    flex: 1;
}
.item2 {
    background-color: #ccc;
    flex: 1;
}
.item3 {
    background-color: #bbb;
    flex: 1;
}

item1比item2 item3宽度多200px

.content {
    display: flex;
    width: 800px;
    height: 100px;
}
.item1 {
    background-color: #eee;
    flex: 1 200px;
}
.item2 {
    background-color: #ccc;
    flex: 1;
}
.item3 {
    background-color: #bbb;
    flex: 1;
}

item1的宽度是item2 item3的两倍

.content {
    display: flex;
    width: 800px;
    height: 100px;
}
.item1 {
    background-color: #eee;
    flex: 2;
}
.item2 {
    background-color: #ccc;
    flex: 1;
}
.item3 {
    background-color: #bbb;
    flex: 1;
}

按倍数去分配容器的宽度

.content {
    display: flex;
    width: 600px;
    height: 100px;
}
.item1 {
    background-color: #eee;
    flex: 1;
}
.item2 {
    background-color: #ccc;
    flex: 2;
}
.item3 {
    background-color: #bbb;
    flex: 3;
}

你可能感兴趣的