整个自适应的网页设计

想做一个自适应的界面,已经有图片,页面布局可用弹性盒子、网格布局、浮动布局、bootstrap
布局之类的

img

img

img

img

img

img

img

img

Flex布局是一种基于弹性盒子模型的布局方式,可以实现自适应布局。通过设置容器的display属性为flex,子元素就可以根据容器的大小自动调整位置和大小。

一些常用的Flex布局属性:

  1. flex-direction:设置主轴的方向,可以是row(水平方向)、column(垂直方向)、row-reverse(水平方向反向)和column-reverse(垂直方向反向)。

  2. justify-content:设置主轴上的对齐方式,可以是flex-start(左对齐)、flex-end(右对齐)、center(居中对齐)、space-between(两端对齐,项目之间的间隔相等)和space-around(每个项目两侧的间隔相等)。

  3. align-items:设置交叉轴上的对齐方式,可以是flex-start(顶部对齐)、flex-end(底部对齐)、center(居中对齐)、baseline(基线对齐)和stretch(拉伸对齐)。

  4. flex-wrap:设置是否换行,可以是nowrap(不换行)、wrap(换行,第一行在上方)和wrap-reverse(换行,第一行在下方)。

  5. align-content:设置多行项目的对齐方式,可以是flex-start(顶部对齐)、flex-end(底部对齐)、center(居中对齐)、space-between(两端对齐,项目之间的间隔相等)和space-around(每个项目两侧的间隔相等)。