flex

1. flex相关概念

flex容器(flex container):对一个DOM元素添加display:flex或者display:inline-flex可以将其变成一个flex容器(flex container)
flex 项目(flex item): 对于一个flex容器内的所有子元素将变成flex项目

注: 对于flex容器内的文本节点也将变成flex项目,不连续的文本节点将变成两个不同的flex项目

相关代码

相关结果

主轴(main axis):flex容器默认的主轴为水平的
交叉轴(cross axis):flex容器默认的交叉轴为垂直的
相关概念示意图.png

注:当flex容器的flex-direction属性从默认的row变成column时,主轴为垂直的,交叉轴为水平的

2. flex容器上的属性

flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: flex-driection | flex-wrap;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch | space-evenly;

3. flex项目上的属性

flex-grow: number /* default 1 /
flext-shrink: number /
default 1 /
flex-basis: <length> | auto /
default auto */
flex: flex-grow | flex-shrink | flex-basis

flex默认值为 0 1 auto
flex: 0;等价于flex: 0 0 auto;
flex: auto;等价于 flex: 1 1 auto

align-self: auto | flex-start | flex-end | center | baseline | stretch
order: number /* default 0 */

4. flex-grow计算方式

前提:父元素宽度为400px,item1,item2,item3宽度均为100px; item1的flex-grow设置为2;item2的flex-grow设置为3;
计算过程如下:
flex容器的可分配空间为400 - 100*3 = 100;
需要分配的总份数为 2+3 = 5;
一份的宽度为 100 / 5 = 20;
item1的最终宽度为100 + 20 * 2 = 140;
item2的最终宽度为 100 + 20 * 3 = 160;
具体demo

5. flex-shrink计算方式

前提:父元素宽度为400px,item1,item2,item3宽度均为200px; item1的flex-shrink设置为2;item2的flex-shrink设置为3;
计算过程如下:
flex容器的可分配空间为400 - 200 * 3 = -200;
总宽度为 所有item的basis * shrink之和, 即
200*2 + 200 * 3 + 200 * 1 = 1200;
收缩因子为:item 的 basis * item的 shrink / 总宽度, 即
item1的收缩因子为200 * 2 / 1200 = .3333;
最终宽度为 item的basis - 可分配空间 * 收缩因子
item1的最终宽度为 200 - .3333 * 200 = 133.33;
item2的最终宽度为 200 - 200 * .5 = 100;
item3的最终宽度为 200 - 1 * 200 / 6 = 166.67;
具体demo

注:若flex-grow或者flex-shrink计算出来的宽度大于max-width或者小于min-width,则超出或者不足的部分会平均被其他的flex item消耗掉;具体例子可以参见本文相关的github工程

6. display: none等使元素看不见的样式对flex的响应

对于dispaly:none的flex item不会保留其空间
对于采用visibility: collapse;或者visibility: hidden; 或者transform: scale(0);使元素不可见的flex item会保留其空间
相关demo

7. flex相关布局

具体可以参见
本文中涉及到的代码github地址

推荐阅读更多精彩内容

  • 1.flex布局的兼容性写法 关于flex布局的兼容性,参考flex兼容性 .flex{ display:-web...
    前端喵阅读 704评论 0 0
  • 在以前页面布局多依赖于table,但table标签太多,于是有了absolute布局,float布局等,但它们小问...
    张歆琳阅读 3,542评论 3 55
  • 网页布局(layout)是CSS的一个重点应用。 行内元素也可以使用Flex布局。.box{ display: i...
    君临天下夜未央阅读 1,143评论 0 5
  • 一、什么是Flex布局? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活...
    shadow123阅读 594评论 0 2
  • 简书连载风云录蔷薇小说目录择一世长安专题择一世长安【目录】 文丨蔷薇下的阳光 上一章丨《第六十二章:迷之身份》 前...
    蔷薇下的阳光阅读 594评论 4 11
  • 若问我生日最想要什么?——你手写的一封信;若绞尽脑汁想要送我什么礼物,送本书总是不会错的;若介绍我的爱好,写...
    四月天1111阅读 202评论 0 0
  • 第一,我们教你如何拿到价格最低的一手货源,确保你的竞争力。 第二,我们教你如何定位自己的精准客户人群,确定...
    一生情阅读 260评论 2 2
  • 彩色涂层钢板于1936年在美国问世以后,首先应用于建筑方面的是活动百叶窗片,挡雨板之类的零件产品。原材料也...
    东方新材粉末彩涂板阅读 380评论 0 0