flex弹性布局

最新推荐文章于 2024-08-10 18:45:37 发布

原创最新推荐文章于 2024-08-10 18:45:37 发布 · 256 阅读

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文详细介绍了Flex布局的基础概念，包括如何将容器设置为Flex布局，以及Flex布局中容器和项目的各种属性，如flex-direction、flex-wrap、justify-content等，并解释了这些属性如何影响布局的表现。

用display：flex可以给任意一个容器指定为flex布局。

行内元素也可以使用 Flex 布局。

.box{
display:
 inline-flex;}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
display:
 -webkit-flex;
/* Safari */
display:
 flex;}

容器主要属性

项目主要属性

order 项目的排列顺序可用于优先渲染
flex-grow 项目的放大比例
flex-shrink 项目的缩小比例
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。