Flex 布局

类别：htmlcss / 日期：2022-10-27 / 浏览：178 / 评论：0

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool（语法篇）

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html（实例篇）

Flex 是 Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

简单的分为容器属性和元素属性容器的属性：

flex-direction：决定主轴的方向（即子 item 的排列方法）

.box {

flex-direction: row | row-reverse | column | column-reverse;

}

flex-wrap：决定换行规则

.box{

flex-wrap: nowrap | wrap | wrap-reverse;

}

flex-flow：flex-direction属性和flex-wrap属性的简写形式

.box {

flex-flow: <flex-direction> || <flex-wrap>;

}

justify-content：对其方式，水平主轴对齐方式

align-items：对齐方式，竖直轴线方向

项目的属性（元素的属性）：

order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0

flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大

flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个 item 的 flow-shrink 为 0，则为不缩小

flex-basis 属性：定义了在分配多余的空间，项目占据的空间。

flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。

align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖 align-items，默认属性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局

评论区