叶寻的博客 ·

CSS Flexbox 布局教程

💡 原文中文，约6000字，阅读约需15分钟。

📝

内容提要

CSS flexbox是一种一维布局方法，可以在一条横线或竖线上排列元素。flex容器的属性包括display、flex-direction、flex-wrap、justify-content、align-items、align-content、row-gap、column-gap和gap。flex项的属性包括order、flex-grow、flex-shrink、flex-basis、flex和align-self。

🎯

关键要点

flexbox是一种一维布局方法，可以在横线或竖线上排列元素。
flex容器的属性包括display、flex-direction、flex-wrap、justify-content、align-items、align-content、row-gap、column-gap和gap。
flex项的属性包括order、flex-grow、flex-shrink、flex-basis、flex和align-self。
flex-direction定义排列方向和主轴，主轴与交叉轴的概念需要分清。
flex-wrap控制是否换行，默认不换行。
flex-flow是flex-direction和flex-wrap的缩写，默认值为row nowrap。
justify-content设置主轴的对齐方式，常用值包括flex-start、flex-end、center、space-between、space-around和space-evenly。
align-items设置交叉轴的对齐方式，常用值包括stretch、flex-start、flex-end、center和baseline。
align-content设置多行flex项的交叉轴对齐方式，flex项只有一行时无效。
gap属性设置flex项之间的间隔，row-gap和column-gap分别表示横线和竖线的间隔。
flex项的order属性可以改变排列顺序，默认值为0。
flex-basis设置flex项的大小，默认为auto。
flex-grow设置flex项的增长系数，默认为0，负值无效。
flex-shrink设置flex项的收缩指数，默认为1，0表示不可收缩。
flex是flex-grow、flex-shrink和flex-basis的缩写，推荐使用flex代替这三个属性。
align-self设置单个flex项的交叉轴对齐方式，和align-items用法相似。

❓

延伸问答

什么是CSS Flexbox布局？

CSS Flexbox是一种一维布局方法，可以在一条横线或竖线上排列元素。

flex容器有哪些主要属性？

flex容器的主要属性包括display、flex-direction、flex-wrap、justify-content、align-items等。

如何使用flex-direction属性？

flex-direction属性用于定义排列方向，常用值有row、row-reverse、column和column-reverse。

什么是flex-wrap属性，它的默认值是什么？

flex-wrap属性控制是否换行，默认值为nowrap，表示不换行。

justify-content属性的作用是什么？

justify-content属性设置主轴的对齐方式，常用值包括flex-start、flex-end、center等。

flex项的order属性有什么用？

order属性可以改变flex项的排列顺序，默认值为0，数字越大位置越后。

🏷️