侧边栏壁纸
  • 累计撰写 781 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

flex

Dettan
2022-03-04 / 0 评论 / 0 点赞 / 22 阅读 / 1,361 字
温馨提示:
本文最后更新于 2022-04-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
/ 前端 / CSS / flex
控制一堆元素的排列方式, 可以选择换不换行,方向等。
justify : 主轴 ||| align : 副轴
flex-direction为row时水平为主轴,垂直为副轴。
外层
display : flex
flex-direction : row | column | row-reverse | column-reverse
flex-wrap : nowrap | wrap | wrap-reverse ; reverse 是第一行在最下面。
flex-flow : flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
justify-content : flex-start | center | flex-end | space-around | space-between | space-evenly ; 主轴上内容的对齐方式
align-items : flex-start | center | flex-end | baseline | stretch ; 副轴上内容的对齐方式
align-content : flex-start | flex-end | center | space-between | space-around | stretch ; 多根轴线之间的对齐方式,也就是换行的。
元素上
flex-grow : 数组,可小数, 元素的比例,
flex-shrink : 缩小比例, 元素超过外层而需要缩小的时候谁比例大谁缩小的多。设为0不缩小
flex-basic : 定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。
可设置 固定的, 百分比, fit-content ,max-content,min-content,content,fill, 默认的auto是说参照我的width和height。
order : 越小越靠前
align-self : auto | flex-start | flex-end | center | baseline | stretch ; 单独分配对齐方式。

设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。


Flex 布局教程:语法篇
网页布局(layout)是 CSS 的一个重点应用。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 Flex 布局将成为未来布局的首选方案。本文介绍它的语法, 下一篇文章给出常见布局的 Flex 写法。网友 JailBreak 为本文的所有示例制作了 Demo ,也可以参考。 以下内容主要参考了下面两篇文章: A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties 。 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器,必须加上-webkit 前缀。 .box{ display:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html


0

评论区