一些写页面可能会用到的属性—Flex布局

记录一些前端页面布局过程中可能会用上的复合属性

Flex布局

1、flex-flow: flex-direction + flex-wrap
flex-direction：row | column | row/column-reverse（主轴方向）
flex-wrap：nowrap | wrap | wrap-reverse（是否折行显示）

2、flex: flex-grow + flex-shrink + flex-basis
flex-grow：弹性元素放大（在宽度有剩余空间的时候按照比例进行一定像素的放大），可进行比例设定放大比例，默认为0（即容器的剩余宽度一般不进行分配）

flex-shrink：弹性元素缩小，默认值为1（按照计算等比缩小）

flex-basis：auto | ...px; 设置元素的初始尺寸，设置像素之后，像素是为 height 还是 width 的决定权在于主轴方向的设置，若主轴方向为 row 则为设置 width，若为 column 则为 height，并且 flex-basis 的优先级高于 width/height。auto 属性则是依据元素内容决定初始尺寸。

一些简写：

flex: 1; //等同于 flex: 1 1 0%;

flex: 2; //等同于 flex: 2 1 0%;

flex: auto; //等同于 flex：1 1 auto;

flex: none; //等同于 flex: 0 0 auto;（常用于固定尺寸，不伸缩）

flex-basis 是指定初始尺寸，flex-basis 设置为0与 auto 的区别就在于，当设置为0时为绝对弹性元素，当设置为 auto 时为相对弹性元素。那什么是绝对什么是相对呢？
通俗的说，绝对弹性元素就是在弹性元素（某个盒子）进行缩放的时候，告诉盒子不需要考虑元素尺寸；而相对弹性元素就是在弹性元素进行缩放时，会先考虑元素尺寸。

3、容器内对齐
（Ⅰ）主轴上的对齐方式justify-content

flex-basis.png

图片引自简书用户

解释：
flex-start：默认值。容器开头对齐

flex-end：容器尾部对齐

为什么说容器头部和尾部呢？*
*因为主轴方向是根据属性设置的，所以头部尾部根据属性设定而定！！！

center：居中对齐

space-around：各行之间留有空行，两端顶到尽头

space-between：隔行之前，之间，之后都留空白

initial：默认值

inherit：继承父元素属性

（Ⅱ）交叉轴上的对齐align-items
交叉轴通俗的理解就是垂直排列，即y轴
交叉轴较好理解，就不用图片演示了

stretch：默认值。当元素没有设置具体尺寸时，会将容器在交叉轴方向撑满（宽 | 高撑满）。

flex-strat：沿交叉轴起点对齐

flex-end：沿交叉终点对齐

center：居中对齐

baseline：沿第一行文字对齐

注意嗷，交叉轴方向也是根据属性设置而定的！！！

（Ⅲ）交叉轴上的分行对齐align-content
废话不多说先上图

align-content示例.png

图片引自简书用户

观察图片中盒子的变化可以得出，align-items 与 align-content 的区别就是，align-items 的负责区域是单行内，但是 align-content 负责的是全局。

除此之外，align-self 可以单独对某个属性进行交叉轴对齐方式进行设置，优先级大于 align-content。

最后编辑于：2020.11.09 12:10:35