CSS3延展性盒实体模型flex box迅速新手入门心得(必

日期:2021-03-04 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

以便做挪动端前端开发新项目刚开始学flex啦~!用了flex,不再用担忧排版啦。1起来迅速上手吧!

在css上应用flex的英语的语法

display: flex; /*依照要求添加各访问器要求前缀*/

flex-direction
(可用于父类器皿元素)

flex-direction:row;

  • a
  • b
  • c

flex-direction:row-reverse;

  • a
  • b
  • c

flex-direction:column;

  • a
  • b
  • c

flex-direction:column-reverse;

  • a
  • b
  • c

flex-wrap
(可用于父类器皿元素)

设定或查找伸缩盒目标的子元素超过父器皿时是不是换行。
flex-wrap: nowrap | wrap | wrap-reverse

flex-wrap:nowrap;

  • a
  • b
  • c

flex-wrap:wrap;

  • a
  • b
  • c

flex-wrap:wrap-reverse;

  • a
  • b
  • c

flex-flow
(可用于父类器皿元素)

非常于direction和wrap的结合
flex-flow: row nowrap;/* 次序排序且不换行 */
flex-flow:row-reverse wrap;/* 反序排序且全自动换行 */

justify-content
(可用于父类器皿元素)

设定或查找延展性盒子元素在主轴(横轴)方位上的对齐方法。
justifu-content: flex-start | flex-end | center | space-between | space-around

justify-content:flex-start;

  • a
  • b
  • c

justify-content:flex-end;

  • a
  • b
  • c

justify-content:center;

  • a
  • b
  • c

justify-content:space-between;
space-between:延展性盒子元素会均值地遍布内行里。假如最左侧的剩下室内空间是负数,或该行仅有1个子元素,则该值等效于'flex-start'。在其它状况下,第1个元素的界限与行的主起止部位的界限对齐,另外最终1个元素的界限与行的主完毕部位的边距对齐,而剩下的伸缩盒新项目则均值遍布,并保证两两之间的空白室内空间相同。

  • a
  • b
  • c

justify-content:space-around;
space-around:延展性盒子元素会均值地遍布内行里,两边保存子元素与子元素之间间隔尺寸的1半。假如最左侧的剩下室内空间是负数,或该行仅有1个伸缩盒新项目,则该值等效于'center'。在其它状况下,伸缩盒新项目则均值遍布,并保证两两之间的空白室内空间相同,另外第1个元素前的室内空间和最终1个元素后的室内空间为别的空白室内空间的1半。

  • a
  • b
  • c

align-items
(可用于父类器皿元素)

设定或查找延展性盒子元素在侧轴(纵轴)方位上的对齐方法。
align-items: flex-start | flex-end | center | baseline | stretch

align-items:flex-start;

  • a
  • b
  • c

align-items:flex-end;

  • a
  • b
  • c

align-items:center;

  • a
  • b
  • c

align-items:baseline;
baseline:如延展性盒子元素的行内轴与侧轴为同1条,则该值与'flex-start'等效。其它状况下,该值将参加基准线对齐。

  • a
  • b
  • c

align-items:strecth;
stretch:假如特定侧轴尺寸的特性值为'auto',则其值会使新项目的边距盒的规格尽量贴近所属行的规格,但另外会遵循'min/max-width/height'特性的限定。

  • a
  • b
  • c


align-content
(可用于父类器皿元素)

设定或查找延展性盒层叠伸缩行的对齐方法。
align-content: flex-start | flex-end | center | space-between | space-around | stretch

align-content:flex-start;

  • a
  • b
  • c
  • d
  • e
  • f

align-content:flex-end;

  • a
  • b
  • c
  • d
  • e
  • f

align-content:center;

  • a
  • b
  • c
  • d
  • e
  • f

align-content:space-between;

  • a
  • b
  • c
  • d
  • e
  • f

align-content:space-around;

  • a
  • b
  • c
  • d
  • e
  • f

align-content:strecth;

  • a
  • b
  • c
  • d
  • e
  • f

flex-grow
(可用于子元素)

设定或查找延展性盒的拓展比率。依据延展性盒子元素所设定的拓展因素做为比率来分派剩下室内空间。flex-grow的默认设置值为0,假如沒有显示信息界定该特性,是不容易有着分派剩下室内空间支配权的。本例中b,c两项都显式的界定了flex-grow,能够看到一共将剩下室内空间分为了4份,在其中b占1份,c占3分,即1:3
flex-grow: (default 0)

  • a
  • b
    flex-grow:1
  • c
    flex-grow:2
  • d
  • e

flex-shrink
(可用于子元素)

设定或查找延展性盒的收拢比率(依据延展性盒子元素所设定的收拢因素做为比率来收拢室内空间。
flex-shrink: (default 1)

flex-basis
(可用于子元素)

设定或查找延展性盒伸缩标准值。假如全部子元素的标准值之和超过剩下室内空间,则会依据每项设定的标准值,按比率伸缩剩下室内空间
flex-basis: (可百分比表明) | auto (default auto)

  • a
  • b
  • c
    flex-basis:600px;
  • d
  • e

flex(复合型特性)
(可用于子元素)

flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
none:none重要字的测算值为: 0 0 auto
[ flex-grow ]:界定延展性盒子元素的拓展比率。
[ flex-shrink ]:界定延展性盒子元素的收拢比率。
[ flex-basis ]:界定延展性盒子元素的默认设置标准值。

以上这篇CSS3延展性盒实体模型flex box迅速新手入门心得(必看篇)便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

原文详细地址:http://www.cnblogs.com/daisykoo/archive/2016/05/24/5522660.html