flex布局

Posted 2021-12-28 happybread

---恢复内容开始---

flex，意为弹性布局；

flex的样式属性分为两种，一个是作用在容器上的，即设置为flex的元素，一个是作用在成员上的；

1、作用在容器上的属性

flex-direction:设置容器排列方向，默认主轴即水平方向；属性值：row、row-reverse 、column、column-reserve

flex-wrap:元素换行，即子元素在轴线上放不下时是否换行以及如何换行;属性值：nowrap（不换行）、wrap（换行）、wrap-reverser（换行反转）

flex-flow:flex-direction和flex-wrap的简写

justifty-content：主轴的对齐方式，不一定是水平轴，由flex-direction指定；属性值：center(居中对齐)、space-between(两边对齐均匀分布)、space-around(项目两侧等间隔)、flex-start(起始对齐)、flex-end(结束对齐)、space-evenly(均匀分布)

align-items:交叉轴对齐方式;属性值：：center(交叉轴中点)、flex-start(交叉轴起点)、flex-end(交叉轴终点)、baseline（文字基线）、stretch(未设置高度时填充容器)

align-content：多轴对齐方式，只有一轴的时候没有效果

2、元素属性

为每一个成员设置单独属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self

order:顺序，从小到大，值越小，排列越靠前flex-shrink：缩小比例（容器宽度<元素总宽度时如何收缩）

实例：弹性容器#container宽度是200px，一共有三个弹性元素，宽度分别是50px、100px、120px。在不折行的情况下，此时容器宽度是明显不够分配的，flex-shrink默认为1，也就是当不够分配时，元素都将等比例缩小，占满整个宽度，结果为：弹性元素1：50px→37.03px；弹性元素2：100px→74.08px；弹性元素3：120px→88.89px

flex-grow：放大比例（容器宽度>元素总宽度时如何伸展）

实例：弹性容器#container宽度是200px，但此时只有两个弹性元素，宽度分别是50px、100px。此时容器宽度是有剩余的。

情况一：flex-grow都为0，即使存在剩余空间，也不放大；

情况二：flex-grow为大于零的值，实现容器剩余宽度的分配比例设置。flex-grow分别为2和3，结果为70px 和 130px;

情况三：弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效。

flex-basis：设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。

flex： flex-grow + flex-shrink + flex-basis

flex: 1 = flex: 1 1 0%

flex: 2 = flex: 2 1 0%

flex: auto = flex: 1 1 auto;

flex: none = flex: 0 0 auto; // 常用于固定尺寸 不伸缩