flex布局概念篇

div+css joai 浏览 评论


flex 概念

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。不过设为Flex布局以后,子元素的floatclearvertical-align属性将失效。.box{ display:flex;} ,行内元素则换成这样.box{display:inline-flex;},下面是兼容Webkit的浏览器,.box{display:-webkit-flex;/*safari*/ display:flex;}。

flex item(flex子元素 或 弹性子元素)

flex容器的每一个子元素均为一个flex子元素。注意:felx容器直接包含的文本变为匿名的弹性子元素。

注意:Flexbox布局和原来的布局是2套概念,所以部分css属性在flex子元素中将不起作用,比如:floatclear , 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-directionflex-wrap 的简写,用于排列flex子元素。

flex子元素根据 flex-wrap 属性控制的侧轴方向(在这个方向上可以建立垂直的新线),既可以是一行也可以是多行排列。

尺寸

flex子元素宽高可相应地等价于主尺寸(main size)交叉尺寸(cross size),它们都分别取决于flex容器的主轴和侧轴。

  •  min-heightmin-width 属性的初始值为新增关键字 auto。
  • 属性 flexflex-basisflex-growflex-shrink 的缩写,代表flex子元素的伸缩性。
    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)
    • 验证码 点击我更换图片

    网友最新评论