Rumah > hujung hadapan web > tutorial css > Flex布局的可伸缩性详解

Flex布局的可伸缩性详解

小云云
Lepaskan: 2018-02-09 11:17:36
asal
2273 orang telah melayarinya

Flexibility

Flex伸缩布局决定性的特性是让伸缩项目可伸缩,也就是让伸缩项目的宽度或高度自动填充剩余的空间。这可以以flex属性完成。一个伸缩容器会等比地按照各伸缩项目的 扩展比率 分配剩余空间,也会按照 收缩比率 缩小各项目以避免溢出。

本文主要和大家介绍css Flex布局的可伸缩性(Flexibility)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

Flex属性

flex属性可用来指定 可伸缩长度 的部件:扩展比率,收缩比率,伸缩基准线。当有一个元素是伸项目时,flex属性将代替主轴长度属性决定元素的主轴长度。若元素不是伸缩项目,则flex属性不生效。

flex 是 flex-grow、flex-shrink、flex-basis的缩写


.item {
    flex: none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ]
}
Salin selepas log masuk
  1. <'flex-grow'> 取值为 ,用来指定项目的扩展比率;若在flex缩写省略了此属性值,则flex-grow的指定值是 1;

  2. <'flex-shrink'>取值为 ,用来指定项目的收缩比率;若在flex缩写省略了此属性值,则flex-shrink的指定值是 1;

  3. <'flex-basis'>取值为 | auto ,用来定义在分配多余空间之前,项目占据的主轴空间,也就是子元素的基准值,flex-basis 规定的范围取决于 box-sizing;若在flex缩写省略了此属性值,则flex-basis的指定值是 0%。

flex-basis取值的几种情况:

  1. 固定的长度值,(比如350px),则该项目将占据固定长度的空间;

  2. auto,首先会检索该项目的主尺寸(也就是该项目的width/height的值,是width还是height取决于主轴的方向,下面假设主轴的方向为水平方向),如果该项目的主尺寸不为auto,则该项目的flex-basis(基准值)采用主尺寸的值;如果该项目的主尺寸为auto(也就是width:auto或不设置项目的width属性时),则使用该项目的内容content大小为基准值;

  3. 百分比,根据其包含块(即伸缩父容器)的主尺寸计算。如果包含块的主尺寸未定义(即父容器的主尺寸取决于子元素),则计算结果和设为 auto 一样。

flex 的常见值

flex的默认值:由于 flex-grow、flex-shrink、flex-basis三个属性值在不设置的情况下默认值分别为 0、1、auto,所以flex的默认值为:flex:0 1 auto;


.item {
    flex: 0 1 auto;
}
/*这种情况先根据width/height属性决定元素的尺寸。
(如果项目的主尺寸为auto,则会以其内容大小为基准)
当剩余空间为正值时,伸缩项目无法伸缩,但当空间不足时,伸缩项目可收缩至其[最小]值。
默认状态下,伸缩项目不会收缩至比其最小内容尺寸更小。
可以通过设置「min-width」或「min-height」属性来改变这个默认状态。*/
Salin selepas log masuk

flex: 0 auto:由于之前提到过,若在flex的缩写中省略了flex-shrink的值,则该值指定为 1,所以flex:0 auto就相当于flex:0 1 auto(也就是与flex取默认值一样);

flex: initial:与flex:0 1 auto相同;

flex: auto: 若在flex的缩写中省略了flex-grow和flex-shrink的值,则他们的值都指定为 1,所以flex:auto就相当于flex:1 1 auto;


.item {
    flex: auto;  /*相当于flex:1 1 auto;*/
}
/*根据width/height属性决定元素的尺寸,但是完全可以伸缩,会吸收主轴上剩下的空间*/
Salin selepas log masuk

flex:none:相当于flex: 0 0 auto;


.item {
    flex: none;  /*相当于flex:0 0 auto;*/
}
/*根据width/height属性决定元素的尺寸,但是完全不可以伸缩*/
Salin selepas log masuk

当flex取值为某个正数时,则这个正数是flex-grow的取值,由于在flex的缩写中省略了flex-shrink和flex-basis的值,而他们在被省略了时的取值分别为1、0%,所以flex:1就相当于flex:1 1 0%;


.item {
    flex: 1;  /*相当于flex:1 1 0%;*/
}
/*以父容器的宽度为基数计算,元素完全可伸缩*/
Salin selepas log masuk

当 flex 取值为一个长度或百分比,则视为 flex-basis 值,flex-grow 取 1,flex-shrink 取 1(注意 0% 是一个百分比而不是一个非负数字);


.item {
    flex:120px;  /*相当于flex:1 1 120px;*/
}
.item1 {
   flex: 0%; /*相当于flex:1 1 0%;*/
}
Salin selepas log masuk

当 flex 取值为两个非负数字,则分别视为 flex-grow 和 flex-shrink 的值,flex-basis 取 0%;


.item {
    flex:2 1;  /*相当于flex:2 1 0%;*/
}
Salin selepas log masuk

当 flex 取值为一个非负数字和一个长度或百分比,则分别视为 flex-grow 和 flex-basis 的值,flex-shrink 取 1;


.item {
    flex:2 120px;  /*相当于flex:2 1 120px;*/
}
Salin selepas log masuk

举例

html如下:


<p class="box">
    <p class="item-1"></p>
    <p class="item-2"></p>
    <p class="item-3"></p>
  </p>
Salin selepas log masuk

css如下:


.box {
  display: flex;
  width: 800px;
}
.box > p {
  height: 200px;
}
.item-1 {
  width: 160px;
  flex: 2 1 0%;
  background: #2ecc71;
}
.item-2 {
  width: 100px;
  flex: 2 1 auto;
  background: #3498db;
}
.item-3 {
  flex: 1 1 200px;
  background: #9b59b6;
}
Salin selepas log masuk

得到的结果如下:

主轴上父容器总尺寸为 800px

子元素的总基准值是:0% + auto + 200px = 300px,其中

  1. - 0% 即 0 * 800px = 0宽度

  2. - auto 对应取主尺寸即 100px

故剩余空间为 800px - 300px = 500px

伸缩放大系数之和为: 2 + 2 + 1 = 5

剩余空间分配如下:

  1. - item-1 和 item-2 各分配 2/5,各得 200px

  2. - item-3 分配 1/5,得 100px

各项目最终宽度为:

  1. - item-1 = 0% + 200px = 200px

  2. - item-2 = auto + 200px = 300px

  3. - item-3 = 200px + 100px = 300px

当 item-1 基准值取 0% 的时候,是把该项目视为零尺寸的,故即便声明其尺寸为 160px,也并没有什么用,形同虚设

而 item-2 基准值取 auto 的时候,根据规则基准值使用值是主尺寸值即 100px,故这 100px 不会纳入剩余空间

总结

flex 的缺省值并非是单一属性的初始值,在flex属性取值的缩写中,flex-grow 、 flex-shrink 、flex-basis的缺省值分别为1 、 1 、0%,而不是这三属性分别的默认值0、 1 、auto;

当项目没有设置固定宽度(对于水平的情况,也就是宽度本身是auto的)时,flex-basis如果也是auto,那么flex-basis的使用值就是该项目的内容本身撑起来的宽度(对于水平的情况)。

相关推荐:

java并发编程(4)性能与可伸缩性

DB2面向OLTP环境的物理数据库设计:可靠性、可用性和可伸缩性

实例详解CSS Flexbox的具体用法

Atas ialah kandungan terperinci Flex布局的可伸缩性详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan