--- theme: smartblue --- 一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，[点击查看活动详情](https://juejin.cn/post/7080800226365145118 "https://juejin.cn/post/7080800226365145118") ## 前言在真实的应用场景中，通常会遇到各种各样不同尺⼨和分辨率的设备，为了能在所有这些设备上正常的布局我们的应用界面，就需要响应式的界⾯设计方式来满⾜这种复杂的布局需求。 flex 弹性盒模型的优势在于开发⼈员只需要声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。 ## 语法 ### flex-direction: 调整主轴方向 ``` row：主轴方向为水平向右 column：主轴方向为竖直向下 row-reverse:主轴方向为水平向左 column-reverse:主轴方向是竖直向上。 ``` ### justify-content主要用来设置**主轴方向的对齐方式** ``` flex-start: 弹性盒子元素将向起始位置对齐 flex-end: 弹性盒子元素将向结束位置对齐。 center: 弹性盒子元素将向行中间位置对齐 space-around: 弹性盒子元素会平均地分布在行里 space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。 ``` ### align-items用于调整**侧轴的对齐方式** ``` flex-start：元素在侧轴的起始位置对齐。 flex-end：元素在侧轴的结束位置对齐。 center：元素在侧轴上居中对齐。 stretch：元素的高度会被拉伸到最大（不给高度时, 才拉伸）。 ``` ### flex-wrap属性控制flex容器是单行或者多行,默认不换行 ``` nowrap：不换行（默认），如果宽度溢出，会压缩子盒子的宽度。 wrap：当宽度不够的时候，会换行。 ``` ### align-content用来设置多行的flex容器的排列方式 ``` flex-start：各行向侧轴的起始位置堆叠。 flex-end：各行向弹性盒容器的结束位置堆叠。 center：各行向弹性盒容器的中间位置堆叠。 space-around：各行在侧轴中平均分布。 space-between：第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。 stretch：拉伸，不设置高度的情况下。 ``` ## 小Demo ### flex换轴 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d499f65323ee425f9d5c9041990dbb9b~tplv-k3u1fbpfcp-watermark.image?) ```

``` ``` ``` ### flex换行 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34a1840062634bf4bb1e7b77b0c3d029~tplv-k3u1fbpfcp-watermark.image?) ```

``` ``` ``` ### flex侧轴对齐方式 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/131ed26126784688a5b2753eb9bfdcb5~tplv-k3u1fbpfcp-watermark.image?) ```

``` ``` ``` ### flex:1的应用 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a96fb88626a497e8eac7b502af9eda4~tplv-k3u1fbpfcp-watermark.image?) ```

张三
李四
王五

``` ``` ``` ## 综合使用 flex骰子 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/43a9044b51fb4bf085ae06b1a262b7b2~tplv-k3u1fbpfcp-watermark.image?) ```

``` ``` ```