关于 CSS 布局——Flex 布局解决方案(一)

上一篇 介绍了传统的布局解决方案,基于 盒模型,依靠 display 属性 + position 属性 + float 属性 + z-index 属性;而它对于特殊的布局结构不太友好,比如,垂直居中 就不易实现。

关于 Flex 布局

Flex(Flexible Box),即弹性布局,Flexbox 的子元素之间提供了强大的空间分布和对齐能力,为各种布局结构提供了合理的解决方案。当容器设为Flex布局以后,子元素的floatclearvertical-align 属性将失效。

基本概念

Flex 布局是一种一维的布局模型,能处理一个维度上的元素布局。

  • FlexBox 中的两根轴
    当使用 Flex 布局时,容器中有两根轴线:主轴和与之垂直的轴。
  • FlexBox 中的起始和终止线
    起始线终止线规定了两根轴线在布局中的方向。

FlexBox 容器属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  • flex-direction
    flex-direction定义了容器的两根轴的方向和起止方向,可取值有 row | row-reverse | column | column-reverse
    flex-direction: row;                   /主轴为水平方向,起点在左端
    flex-direction: row-reverse;           /主轴为水平方向,起点在右端
    flex-direction: column;                /主轴为垂直方向,起点在上沿
    flex-direction: column-reverse;        /主轴为垂直方向,起点在下沿
  • flex-wrap
    默认情况下,容器内的 item 都会根据主轴进行排列,即使超出了容器的边界也不会换行继续显示。flex-wrap 规定了元素是否换行,可取值有 nowrap | wrap | wrap-reverse
    flex-wrap: nowrap;                      /不换行。
    flex-wrap: wrap;                        /换行
    flex-wrap: wrap-reverse;                /反向换行
  • flex-flow
    flex-flowflex-direction属性和flex-wrap 属性的简写形式,默认值为row nowrap
  • justify-content
    justify-content 属性定义了容器内元素在主轴上的对齐方式。常用的取值有 flex-start | flex-end | center | space-between | space-around
   justify-content: flex-start              /默认值,起始线对齐
   justify-content: flex-end                /终止线对齐
   justify-content: center                  /主轴居中对齐
   justify-content: space-around            /主轴两端对齐,容器内元素之间的间距相同
   justify-content: space-between           /主轴方向上,容器内每个元素有相同的外边距
  • align-items
    align-items 属性定义项目在交叉轴上如何对齐。常用的取值有 flex-start | flex-end | center | baseline | stretch
   align-items: flex-start;                 /默认值,交叉轴起始线对齐
   align-items: flex-end;                   /交叉轴终止线对齐
   align-items: center;                     /交叉轴居中对齐
   align-items: baseline;                   /项目的第一行文字的基线对齐
   align-items: stretch;                    /如果项目未设置高度或设为auto,将占满整个容器的高度
  • align-content
    align-content 属性定义了多根轴线的对齐方式。常用取值有 align-content: flex-start | flex-end | center | space-between | space-around | stretch
    align-content: flex-start;              /交叉轴起始线对齐
    align-content: flex-end;                /交叉轴终止线对齐
    align-content: center;                  /交叉轴居中对齐
    align-content: space-between;           /交叉轴两端对齐,容器内元素之间的间距相同
    align-content: space-around;            /交叉轴方向上,容器内每个元素有相同的外边距
    align-content: stretch;                 /默认值,轴线占满整个交叉轴

item 元素属性

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
  • order
    order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局,取值为整数,值越小顺序越靠前。
  • flex-grow
    flex-grow 属性定义弹性容器内元素的拉伸因子,取值为非负整数,0 为不拉伸,值越大拉伸比例越大,按比例分配容器内剩余空间。
  • flex-shrink
    flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。取值为非负整数,0 为不收缩,值越大收缩比例越大,按比例收缩充满弹性容器。
  • flex-basis
    flex-basis属性指定了 flex 元素在主轴方向上的初始大小,默认为 auto
  • flex
    flex 属性是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto
  • align-self
    align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items 属性。默认值为auto ,表示继承父元素的align-items 属性,如果没有父元素,则等同于 stretch
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • 一、Flex 布局是什么? CSS3引入了一种新的布局模式——Flexbox布局,即伸缩盒模型布局(Flexibl...
    侠客有情剑无情QAQ阅读 5,810评论 7 94
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,630评论 0 26
  • 第六章 师姐驾到 我要减肥,减肥是女人永恒的主题,不管她胖还是瘦,都永远想减肥。我们手术室有个很胖的女护士,有...
    张大大大钱阅读 312评论 0 0
  • 「生活就像骑自行车,要想保持平衡,就要不断运动」 初入职场,我早早就给自己定下了计划,还有提前租房的适应活动。 工...
    麦其家的二少爷阅读 463评论 1 1