CSS中的display属性确定了元素应该如何显示,其中之一是flox。flox值能够使得元素作为弹性容器来显示其子元素。
display: flex;
使用flex属性,我们可以控制子元素的顺序,大小和间距,从而实现定制化的布局。以下是一些应用于弹性容器的属性:
flex-direction: row | row-reverse | column | column-reverse;flex-wrap: nowrap | wrap | wrap-reverse;flex-flow: <flex-direction> || <flex-wrap>;justify-content: flex-start | flex-end | center | space-between | space-around;align-items: flex-start | flex-end | center | stretch | baseline;align-content: flex-start | flex-end | center | space-between | space-around | stretch;
弹性布局能够适应各种屏幕尺寸和设备类型,并且能够通过media queries来进行响应式设计。弹性布局也能帮助我们设计出页面中适当的空白和内边距。