网页设计中最常用的伸缩盒模型布局

2020-05-262822

  网页是否美观最直接取决于如何布局,当前最流行的布局方式伸缩盒模型布局,它到底是什么意思?

  CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间。

  Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间。

  更重要的是,Flexbox布局方向不可预知,不像常规的布局(块级从上到下,内联从左到右),而那些常规的适合页面布局,

  但对于支持大型或者复杂的应用程序就缺乏灵活性。

  如果常规布局是基于块和内联文本流方向,那么Flex布局就是基于“Flex-flow”方向。先来了解一下伸缩盒模型的一些专用术语。

  主轴:Flex容器的主轴主要用来配置Flex项目。他不一定是水平的,这主要取决于fle-direction属性。

  主轴起点,主轴终点:Flex项目的配置从容器的主轴起点边开始,往主轴终点边结束。

  主轴长度:Flex项目在主轴方向的宽度或高度就是项目的主轴长度,Flex项目的主轴长度属性是width或height属性,由哪一个对着主轴方向决定。

  侧轴:与主轴垂直的轴称作侧轴,是侧轴方向的延伸。

  侧轴起点,侧轴终点:伸缩行的配置从容器的侧轴起点边开始,往侧轴终点边结束。

  侧轴长度:Flex项目在侧轴方向的宽度或高度就是项目的侧轴长度,Flex项目的侧轴长度属性是widht或height属性,由哪一个对着主轴方向决定


上一篇:

响应式网站的布局应该注意以下几点

下一篇:

网站设计最该注意的三点,你知道吗? 返 回

Copyright © 2017-2021   宁波颖众网络科技有限公司©版权所有   浙ICP备17025606号 浙公安备:33020902000119号