flex布局

一、为什么要用flex?

从发展脉络来说，过去为了实现一些特定的效果，基于盒模型，需要借助浮动、定位等手段，十分不方便。比如，垂直居中就不容易实现。我们可能要 position + transform 才能配合完成。

新的方案flex布局，可以简便、完整、响应式地实现各种页面布局。使用了flex布局的盒子模型设置垂直居中就非常简单了，只需要设置 align-items:center属性。

二、属性

• 容器的属性

1. flex-direction: row row-reverse column column-reverse

2. flex-wrap: nowrap (默认值) 不换行压缩宽度 、wrap 换行当然也不会压缩宽度、wrap-reverses 反向换行

3. flex-flow 1和2的缩写

4. justify-content

flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
flex-end   靠着main-end对齐//参考常见术语(一般是右方向)
center     靠着主轴居中对齐//一般就是居中对齐
space-between 两端对齐，靠着容器壁，剩余空间平分
space-around  分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
space-evenly  平均对齐，不靠着容器壁，剩余空间平分

5. align-items

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。

6. align-content

• item的属性

1. flex-grow：0、initial、n在容器主轴上存在剩余空间时, flex-grow才有意义

2. flex-shrinik: 1、initial、0、n

3. align-self: 覆盖container align-items 属性

4. order 排序

5. flex-basis定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

详细的图解看这篇https://blog.youkuaiyun.com/jarvan5/article/details/115361945?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167816936516800182135609%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167816936516800182135609&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-115361945-null-null.142^v73^pc_search_v2,201^v4^add_ask,239^v2^insert_chatgpt&utm_term=flex%E5%B8%83%E5%B1%80&spm=1018.2226.3001.4187