display:flex
是CSS中的一种布局方式,它可以将一个容器元素的子元素排列成一行或一列,并且可以通过设置各个子元素的属性来调整它们在容器中的位置和大小。
使用flex
布局有以下几个关键词:
flex-direction
:用于指定子元素的排列方向,可以是水平方向(即一行)或垂直方向(即一列)。justify-content
:用于指定子元素在主轴上的对齐方式,可以是居中、靠左、靠右、两端对齐等等。align-items
:用于指定子元素在交叉轴上的对齐方式,可以是居中、顶部对齐、底部对齐等等。flex-grow
:用于指定子元素的放大比例,可以让一个或多个子元素占据剩余空间。flex-shrink
:用于指定子元素的缩小比例,可以让一个或多个子元素在空间不足时自动缩小。总之,display:flex
可以让我们更方便地实现一些常见的布局效果,如居中、两侧对齐、等高布局等等。