想做一个自适应的界面,已经有图片,页面布局可用弹性盒子、网格布局、浮动布局、bootstrap
布局之类的
Flex布局是一种基于弹性盒子模型的布局方式,可以实现自适应布局。通过设置容器的display属性为flex,子元素就可以根据容器的大小自动调整位置和大小。
一些常用的Flex布局属性:
flex-direction:设置主轴的方向,可以是row(水平方向)、column(垂直方向)、row-reverse(水平方向反向)和column-reverse(垂直方向反向)。
justify-content:设置主轴上的对齐方式,可以是flex-start(左对齐)、flex-end(右对齐)、center(居中对齐)、space-between(两端对齐,项目之间的间隔相等)和space-around(每个项目两侧的间隔相等)。
align-items:设置交叉轴上的对齐方式,可以是flex-start(顶部对齐)、flex-end(底部对齐)、center(居中对齐)、baseline(基线对齐)和stretch(拉伸对齐)。
flex-wrap:设置是否换行,可以是nowrap(不换行)、wrap(换行,第一行在上方)和wrap-reverse(换行,第一行在下方)。
align-content:设置多行项目的对齐方式,可以是flex-start(顶部对齐)、flex-end(底部对齐)、center(居中对齐)、space-between(两端对齐,项目之间的间隔相等)和space-around(每个项目两侧的间隔相等)。