flex属性总结

flex属性总结flex属性1、flex-grow属性2、flex-shrink属性3、flex-basis属性4、flex-wrap属性5、flex-direction属性6、flex-flow属性1、flex-grow属性一个数字,规定项目将相对于其他灵活的项目进行扩展的量。flex-grow属性用于设置或检索弹性盒子的扩展比率。CSS语法flex-grow: numb…

大家好,欢迎来到IT知识分享网。

flex属性

1、flex-grow属性

2、flex-shrink属性

3、flex-basis属性

4、flex-wrap属性

5、flex-direction属性

6、flex-flow属性

1、flex-grow属性

一个数字,规定项目将相对于其他灵活的项目进行扩展的量。flex-grow 属性用于设置或检索弹性盒子的扩展比率。

CSS 语法

flex-grow: number | initial | inherit;

属性值

描述
number 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
initial 设置该属性为它的默认值。请参阅 initial。设置默认值initial和number值为0效果一样
inherit 从父元素继承该属性。请参阅 inherit

flex属性总结

flex属性总结

 

2、flex-shrink属性

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和(width1)大于容器(widthcontain)的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。默认宽度的超出部分(width1-widthcontain)会根据不同元素指定的flex-shrink值占所有元素的比例进行分配,然后用自身width1减去按比例分配的那个值。

具体程序实例:具体程序实例

注意:flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩,(也即是,大家均摊超出容器需要shrink补偿的那部分)

3、flex-basis属性

flex-basis 属性用于设置或检索弹性盒伸缩基准值。

CSS语法:flex-basis:number | auto |initial |inherit;

js设置flex-basis属性值:(1)element.style.flexBasis=”200px”;   (2)element.style[“flexBasis”]=”200px”;

number 一个长度单位或者一个百分比,规定灵活项目的初始长度。
auto 默认值。长度等于灵活项目的长度。如果该项目未指定长度,则长度将根据内容决定。
initial 设置该属性为它的默认值。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

4、flex-wrap属性

flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。默认值:nowrap不换行

nowrap 默认值。规定灵活的项目不拆行或不拆列。
wrap 规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse 规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。
initial 设置该属性为它的默认值。默认值为nowrap
inherit 从父元素继承该属性。

 示例:

flex属性总结

 容器宽度是200px,每个元素的宽度是50px,有六个元素,总宽度已经大于了200px,此时使用了flex-wrap属性,可以进行换行显示。

倘若不设置换行,那么display:flex;效果如下:

显示的效果和flex-grow:0,flex-shrink:1;flex-basis:auto;等效。

flex属性总结flex属性总结

 

5、flex-direction属性

flex-direction 属性规定灵活项目的方向。默认值是:row

CSS 语法

flex-direction: row | row-reverse | column | column-reverse | initial | inherit;

row 默认值。灵活的项目将水平显示,正如一个行一样。  
row-reverse 与 row 相同,但是以相反的顺序。  
column 灵活的项目将垂直显示,正如一个列一样。  
column-reverse 与 column 相同,但是以相反的顺序。  
initial 设置该属性为它的默认值。

实例: 

flex属性总结

flex属性总结

 flex属性总结

flex属性总结 

 重头戏来了:根据flex-direction和justify-content以及align-items进行居中定位。

演示实例:


 
 
 
  1. <div class="container">
  2. <div>A </div>
  3. <div>B </div>
  4. </div>

(1)不设置方向display:flex,默认按文本流方向进行排列,由于子元素是两个div的块级元素,所以各占一行。

flex属性总结

 (2)设置display:flex;之后默认主轴方向是row,块级元素按照这个主轴进行布局。

flex属性总结

 设置为flex-direction:column;之后,此时主轴就是column方向。块级元素按照这个主轴进行布局。

flex属性总结 

(3)display:flex结合align-items:center;实现左侧垂直居中。align-items是以侧轴为定位参照基准;justify-content是以主轴为参考基准。这里使用了display:flex没有显示定义flex-direction,默认是flex-direction:row;那么侧轴与其垂直相交, align-items:cente的效果就显示为下:

flex属性总结

(4) display:flex;结合justify-content:center;实现水平居中,这里使用了display:flex没有显示定义flex-direction,默认是flex-direction:row;justify-content是以主轴为参考基准。

flex属性总结

(5)display:flex;flex-direction:column;align-items:center;试想一下:此时两个子元素A,B,的布局是什么样的?

flex-direction:column;表明此时的主轴的column反向;那么此时的侧轴方向是row。

align-items:center;是以侧轴为参考基准

flex属性总结

 (6)实现垂直水平居中

flex属性总结

简单总结:flex-direction,主要用来创建主轴,表明主轴线方向,然后根据主轴线和侧轴线来决定使用justif-content还是align-items。 

6、flex-flow属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。

flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。

flex-direction 属性规定灵活项目的方向。

flex-wrap 属性规定灵活项目是否拆行或拆列。

CSS 语法

flex-flow: flex-direction flex-wrap | initial | inherit;

 补充知识点: flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

实例:下例中flex仅仅只有一个参数,所以设置的是flex-grow的属性,flex的默认值是: 0 1 auto


 
 
 
  1. #main {
  2. display:flex;
  3. }
  4. #main div{
  5. flex: 1; /*这里的flex设置为1,等价于flex-grow:1*/
  6. }

CSS 语法

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

属性值

描述
flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。合法值:”auto”、”inherit” 或一个后跟 “%”、”px”、”em” 或任何其他长度单位的数字。
auto 与 1 1 auto 相同。即是:flex-grow:1;flex-shrink:1;flex-basis:auto;
none 与 0 0 auto 相同。
initial 设置该属性为它的默认值,即为 0 1 auto。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

文章转自https://blog.csdn.net/qq_39207948/article/details/85956861

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/23504.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信