详解CSS中的flex器皿与flex特性

日期:2020-12-12 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

flex container(flex器皿 或 延展性器皿)

flex器皿是flex元素的的父元素。 根据设定display 特性的值为flex 或 inline-flex界定。

注旧版本号的特性值:

box:将目标做为延展性器皿显示信息。(最老版本号)
inline-box:将目标做为内联块级延展性器皿显示信息。(最老版本号)
flexbox:将目标做为延展性器皿显示信息。(过渡版本号)
inline-flexbox:将目标做为内联块级延展性器皿显示信息。(过渡版本号)
flex item(flex子元素 或 延展性子元素)

flex器皿的每个子元素均为1个flex子元素。留意:felx器皿立即包括的文字变成密名的延展性子元素。

留意:Flexbox合理布局和原先的合理布局是2套定义,因此一部分css特性在flex子元素中将不起功效,例如:float, clear , vertical-align , column-*等

轴:

每一个flex子元素沿着主轴(main axis)先后互相排序。交叉式轴(cross axis)竖直于主轴。

特性 flex-direction 界定主轴方位。
特性 justify-content 界定了flex子元素怎样沿着主轴排序。
特性 align-items 界定了flex子元素怎样沿着交叉式轴排序。
特性 align-self 遮盖父元素的align-items特性,界定了独立的flex子元素怎样沿着交叉式轴排序。

方位:

flex器皿的主轴起始点边沿(main start)、主轴终点站边沿(main end)和 交叉式轴起始点边沿(cross start),交叉式轴终点站边沿(cross end)为flex子元素排序的起止和完毕部位。它们实际取决于由writing-mode(从左到右、从右到左这些)特性创建的空间向量中的主轴和交叉式轴部位。

特性 order 将元素先后排序,并决策谁先出現。
特性 flex-flow 是特性 flex-direction 和 flex-wrap 的简写,用于排序flex子元素。

行:

flex子元素依据 flex-wrap 特性操纵的侧轴方位(在这个方位上能够创建竖直的新线),既能够是1行还可以是多行排序。

规格:

flex子元素宽高可相应地等额的于主规格(main size)和交叉式规格(cross size),它们都各自取决于flex器皿的主轴和侧轴。

 min-height 和 min-width 特性的原始值为新增重要字 auto。
特性 flex 是 flex-basis,flex-grow 和 flex-shrink 的缩写,意味着flex子元素的伸缩性。

flex特性
flex(延展性器皿中新项目的长度)

flex: flex-grow flex-shrink flex-basis/auto/initial/inherit;
flex特性设定延展性器皿中新项目的长度。
flex特性是flexGrow、flexSHrink、flexBasis特性的简写,即:可以界定3个特性的值。
留意:假如元素并不是延展性器皿,flex特性将不容易合理果。
flex的值及其表明
flex的值及其表明 值 表明 flex-grow的值 延展性器皿中相对性拉伸目标的宽度 flex-shrink的值 延展性器皿中相对性缩小目标的宽度 flex-basis的值 设置各新项目的宽度,将会的值及值得合理合法企业:

  • auto;
  • inherit
  • %:
  • px
  • em
auto 与1 1 auto同样 默认设置值:0 1 auto none 与0 0 auto同样 initial 维持原来特性的值 inherit 承继母元素的设置。 默认设置值:0 1 auto
值的承继:不承继
JavaScript syntax: object.style.flex="1"
应用例:

HTML文档

CSS Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset="UTF⑻">   
  5. <style>   
  6. #myD {   
  7. width220px;   
  8. height:80px;   
  9. border1px solid black;   
  10. display: -webkit-flex; /* Safari */  
  11. display: flex;   
  12. }   
  13. #myD div {   
  14. -webkit-flex: 2; /* Safari 6.1+ */  
  15. -ms-flex: 2; /* IE 10 */  
  16. flex: 2;   
  17. }   
  18. </style>   
  19. </head>   
  20. <body>   
  21. <div id="myD">   
  22. <div style="background-color:coral;">鲜红色</div>   
  23. <div style="background-color:lightblue;">浅蓝色</div>   
  24. <div style="background-color:lightgreen;">翠绿色及别的內容</div>   
  25. </div>   
  26. </body>   
  27. </html>