主轴对齐方式属性名 justify-content常用值如下flex-start 主轴起点对齐。—— 默认值flex-end 主轴终点对齐。center 居中对齐space-between 均匀分布两端对齐最常用。space-around 均匀分布两端距离是中间距离的一半。space-evenly 均匀分布两端距离与中间距离一致。侧轴对齐方式一行的情况所需属性 align-items常用值如下flex-start 侧轴的起点对齐。flex-end 侧轴的终点对齐。center 侧轴的中点对齐。baseline : 伸缩项目的第一行文字的基线对齐。stretch 如果伸缩项目未设置高度将占满整个容器的高度。—— 默认值多行的情况所需属性 align-content常用值如下flex-start 与侧轴的起点对齐。flex-end 与侧轴的终点对齐。center 与侧轴的中点对齐。space-between 与侧轴两端对齐中间平均分布。space-around 伸缩项目间的距离相等比距边缘大一倍。space-evenly : 在侧轴上完全平分。stretch 占满整个侧轴。—— 默认值flex 实现水平垂直居中方法一父容器开启 flex 布局随后使用 justify-content 和 align-items 实现水平垂直居中.outer { width: 400px; height: 400px; background-color: #888; display: flex; justify-content: center; align-items: center; } .inner { width: 100px; height: 100px; background-color: orange; }方法二父容器开启 flex 布局随后子元素 margin: auto.outer { width: 400px; height: 400px; background-color: #888; display: flex; } .inner { width: 100px; height: 100px; background-color: orange; margin: auto; }伸缩性flex-basis概念 flex-basis 设置的是主轴方向的基准长度会让宽度或高度失效。—备注主轴横向宽度失效主轴纵向高度失效作用浏览器根据这个属性设置的值计算主轴上是否有多余空间默认值 auto 即伸缩项目的宽或高。flex-grow伸概念 flex-grow 定义伸缩项目的放大比例默认为 0 即纵使主轴存在剩余空间也不拉伸放大。规则若所有伸缩项目的 flex-grow 值都为 1 则它们将等分剩余空间如果有空间的话。若三个伸缩项目的 flex-grow 值分别为 1 、 2 、 3 则分别瓜分到 1/6 、 2/6 、3/6 的空间。flex-shrink缩概念 flex-shrink 定义了项目的压缩比例默认为 1 即如果空间不足该项目将会缩小。收缩项目的计算略微复杂一点我们拿一个场景举例例如三个收缩项目宽度分别为 200px 、 300px 、 200px 它们的 flex-shrink 值分别为 1 、 2 、 3若想刚好容纳下三个项目需要总宽度为 700px 但目前容器只有 400px 还差 300px所以每个人都要收缩一下才可以放下具体收缩的值这样计算计算分母 (200×1) (300×2) (200×3) 1400计算比例项目一 (200×1) / 1400 比例值1项目二 (300×2) / 1400 比例值2项目三 (200×3) / 1400 比例值3计算最终收缩大小项目一需要收缩 比例值1 × 300项目二需要收缩 比例值2 × 300项目三需要收缩 比例值3 × 300flex复合属性flex 是复合属性复合了 flex-grow 、 flex-shrink 、 flex-basis 三个属性默认值为 0 1 auto 。如果写 flex:1 1 auto 则可简写为 flex:auto如果写 flex:1 1 0 则可简写为 flex:1如果写 flex:0 0 auto 则可简写为 flex:none如果写 flex:0 1 auto 则可简写为 flex:0 auto —— 即 flex 初始值。项目排序order 属性定义项目的排列顺序。数值越小排列越靠前默认为 0 。单独对齐通过 align-self 属性可以单独调整某个伸缩项目的对齐方式默认值为 auto 表示继承父元素的 align-items 属性。响应式布局媒体查询媒体类型完整列表请参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/media媒体特性完整列表请参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/media运算符常用阈值在实际开发中会将屏幕划分成几个区间例如结合外部样式的用法用法一link relstylesheet media具体的媒体查询 hrefmystylesheet.css用法二media screen and (max-width:768px) { /*CSS-Code;*/ } media screen and (min-width:768px) and (max-width:1200px) { /*CSS-Code;*/ }
主轴对齐方式属性名 justify-content常用值如下flex-start 主轴起点对齐。—— 默认值flex-end 主轴终点对齐。center 居中对齐space-between 均匀分布两端对齐最常用。space-around 均匀分布两端距离是中间距离的一半。space-evenly 均匀分布两端距离与中间距离一致。侧轴对齐方式一行的情况所需属性 align-items常用值如下flex-start 侧轴的起点对齐。flex-end 侧轴的终点对齐。center 侧轴的中点对齐。baseline : 伸缩项目的第一行文字的基线对齐。stretch 如果伸缩项目未设置高度将占满整个容器的高度。—— 默认值多行的情况所需属性 align-content常用值如下flex-start 与侧轴的起点对齐。flex-end 与侧轴的终点对齐。center 与侧轴的中点对齐。space-between 与侧轴两端对齐中间平均分布。space-around 伸缩项目间的距离相等比距边缘大一倍。space-evenly : 在侧轴上完全平分。stretch 占满整个侧轴。—— 默认值flex 实现水平垂直居中方法一父容器开启 flex 布局随后使用 justify-content 和 align-items 实现水平垂直居中.outer { width: 400px; height: 400px; background-color: #888; display: flex; justify-content: center; align-items: center; } .inner { width: 100px; height: 100px; background-color: orange; }方法二父容器开启 flex 布局随后子元素 margin: auto.outer { width: 400px; height: 400px; background-color: #888; display: flex; } .inner { width: 100px; height: 100px; background-color: orange; margin: auto; }伸缩性flex-basis概念 flex-basis 设置的是主轴方向的基准长度会让宽度或高度失效。—备注主轴横向宽度失效主轴纵向高度失效作用浏览器根据这个属性设置的值计算主轴上是否有多余空间默认值 auto 即伸缩项目的宽或高。flex-grow伸概念 flex-grow 定义伸缩项目的放大比例默认为 0 即纵使主轴存在剩余空间也不拉伸放大。规则若所有伸缩项目的 flex-grow 值都为 1 则它们将等分剩余空间如果有空间的话。若三个伸缩项目的 flex-grow 值分别为 1 、 2 、 3 则分别瓜分到 1/6 、 2/6 、3/6 的空间。flex-shrink缩概念 flex-shrink 定义了项目的压缩比例默认为 1 即如果空间不足该项目将会缩小。收缩项目的计算略微复杂一点我们拿一个场景举例例如三个收缩项目宽度分别为 200px 、 300px 、 200px 它们的 flex-shrink 值分别为 1 、 2 、 3若想刚好容纳下三个项目需要总宽度为 700px 但目前容器只有 400px 还差 300px所以每个人都要收缩一下才可以放下具体收缩的值这样计算计算分母 (200×1) (300×2) (200×3) 1400计算比例项目一 (200×1) / 1400 比例值1项目二 (300×2) / 1400 比例值2项目三 (200×3) / 1400 比例值3计算最终收缩大小项目一需要收缩 比例值1 × 300项目二需要收缩 比例值2 × 300项目三需要收缩 比例值3 × 300flex复合属性flex 是复合属性复合了 flex-grow 、 flex-shrink 、 flex-basis 三个属性默认值为 0 1 auto 。如果写 flex:1 1 auto 则可简写为 flex:auto如果写 flex:1 1 0 则可简写为 flex:1如果写 flex:0 0 auto 则可简写为 flex:none如果写 flex:0 1 auto 则可简写为 flex:0 auto —— 即 flex 初始值。项目排序order 属性定义项目的排列顺序。数值越小排列越靠前默认为 0 。单独对齐通过 align-self 属性可以单独调整某个伸缩项目的对齐方式默认值为 auto 表示继承父元素的 align-items 属性。响应式布局媒体查询媒体类型完整列表请参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/media媒体特性完整列表请参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/media运算符常用阈值在实际开发中会将屏幕划分成几个区间例如结合外部样式的用法用法一link relstylesheet media具体的媒体查询 hrefmystylesheet.css用法二media screen and (max-width:768px) { /*CSS-Code;*/ } media screen and (min-width:768px) and (max-width:1200px) { /*CSS-Code;*/ }
