我们上篇文章主要介绍了flex布局中写在父元素上的常见属性,今天则给大家介绍下flex布局中子项常见属性。
1. flex-grow 定义项目的放大比例
flex-grow属性是定义项目的放大比例,也可以理解为表示占多少份数。主要作用是:分配剩余空间的。
/* flex-grow: <number>; 属性值为非负数 */ flex-grow:0; /* 默认值为0,表示即使存在剩余空间,也不放大 */
①如果给其中一个子项 设置 flex-grow: 1; 则表示这个项目把剩余空间都充满;
②如果给每个子项都设置 flex-grow: 1; 则表示每个项目会平均分配到相同的宽度。
<style> .box { display: flex; width: 700px; border: 1px solid red; } .item { width: 150px; height: 150px; background-color: pink; } .item:nth-child(2) { background-color: skyblue; flex-grow: 1; /*给第二个子项增加flex-grow:1; 则表示它会把剩余空间都充满 */ } </style> <body> <div class="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </body>
上述代码得到的效果如上图所示,验证了前面所说的第①点。
.item { flex-grow: 1; /*给每个子项增加flex-grow:1; 则表示它们会平均分配容器的宽度 */ width: 150px; height: 150px; background-color: pink; } .item:nth-child(2) { background-color: skyblue; }
将flex-grow:1;更改到每个子项下,就可以得到上述效果,从而验证了第②点。
2. flex-shrink 是否允许被压缩
我们都知道flex布局默认是不换行的,就算子项的宽度和大于容器的宽度,也不会换行,那么这时为了把这些子元素排列下,那么就会默认去压缩子项的宽度。
而flex-shrink属性,则是用于定义子项是否允许被压缩。
flex-shrink:1; /* 1是默认值 表示允许被压缩 */ flex-shrink:0; /* 表示不允许被压缩,保持设置的尺寸 */
代码验证:
<style> .box { display: flex; width: 700px; border: 1px solid red; } .item { width: 200px; height: 150px; background-color: pink; } .item:nth-child(2) { background-color: skyblue; flex-shrink: 0; /* 设置为0,表示不允许被压缩 */ } </style> <body> <div class="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </body>
容器宽度为700px,而每个子项宽度200px,明显一行排不下,又默认排在一行,所以只能压缩子项宽度。但是我给第二个子项设置了 flex-shrink:0; 后,看上图效果,可以发现它的宽度依旧为200px,没有变小。
3. flex-basis 设置宽度
flex-basis属性它的作用和width属性是一样的。但是优先级比width高,同时设置时,只会展示flex-basisi的宽度。
<style> .box { display: flex; width: 400px; border: 1px solid red; } .item { flex-basis: 300px; /*给子项增加flex-basis:300px;*/ width: 200px; /*给子项设置宽度width:200px;*/ height: 150px; background-color: pink; } </style> <body> <div class="box"> <div class="item"></div> </div> </body>
通过上图可以发现,同时给子项设置flex-basis和width,最后子项的宽度以flex-basis设置的尺寸为准,当然前提条件是容器的宽度足够大,如果容器宽度比他们设置的尺寸小,那么子项宽度和容器宽度一致。
flex-basis属性我们平时不常使用,都是使用默认值auto,也不建议和width同时使用。
4. flex属性
flex 属性是 flex-grow 、flex-shrink和 flex-basis 属性的复合属性。
我们实际开发中flex-shrink和 flex-basis 属性,很少去设置,所以基本使用默认值。
因此,常直接用flex: 1;表示平均分布宽度 ,其他属性采用默认值 等同于flex: 1 1 auto;
5.align-self 控制子项自己在侧轴上的排列方式
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。
默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。
<style> .box { display: flex; width: 550px; height: 300px; border: 1px solid red; align-items: flex-start; } .item { width: 150px; height: 150px; background-color: pink; margin: 10px; } .item:nth-child(3) { align-self: flex-end; /* 设置自己在侧轴上的排列方式 */ } </style> <body> <div class="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> </body>
给第三个盒子单独设置了align-self: flex-end; 从上图效果可以看出它覆盖了父元素设置的align-self: flex-start; 变得与众不同了。
6. order 属性定义项目的排列顺序
数值越小,排列越靠前,默认为0。所以要想把后面的盒子排到前面来,则只需将其order值改为小于0就行。
<style> .box { display: flex; flex-wrap: wrap; width: 700px; height: 350px; border: 1px solid red; } .item { width: 150px; height: 150px; background-color: pink; margin: 10px; } </style> <body> <div class="box"> <div class="item">1</div> <div class="item">2</div> <div class="item" style="order: -1;">3</div> <!-- 给第三个盒子的order改为-1 --> <div class="item">4</div> <div class="item">5</div> <div class="item" style="order: -2;">6</div> <!-- 给第六个盒子的order改为-2--> </div> </body>
因为order 默认值为0,代码中把第三个盒子的order改为-1,则值是第二小的,而第六个盒子的order为-2,值是最小的,所以根据值越小,排列越前,从而就得到了上图效果。
7.总结
以上就是flex布局中常见的作用于子项的属性,可以简单总结为:
① flex-grow:用于分配容器的剩余空间;
② flex-shrink:设置子元素是否允许被压缩;
③ flex-basis:设置子元素的宽度;
④ flex:复合属性,相当于同时设置了flex-grow 、flow-shrink和 flex-basis,但常用于表示flex-grow,其余两个属性使用默认值,不写出来,比如flex:1;
⑤ align-self:控制子项自己在侧轴上的排列方式;
⑥ order :定义项目的排列顺序。
flex布局相较于传统布局而言,操作方便,布局极为简单,尤其是在移动端应用很广泛,因此这是每个前端工程师都必须掌握的布局方式。
flex布局的基本属性和用法,通过今昨天两篇文章,基本都介绍完了,孰能生巧,先明确每个属性的作用和特性,然后加以练习,就能很好的快速写出页面了。