弹性布局的概念

108 阅读1分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第6天,点击查看活动详情

  • 现代Web开发要求,网页应该尽 量适应不同显示设备的大小要求, 灵活显示网页内容。
  • 这就要求,网页内容要可以随显 示设备的大小而动态调整布局。
  • 前面学过的浮动定位float属性, 的确可以实现根据显示设备大小, 自动换行显示。但是,浮动定位 float提供的可控制的属性太少了, 以至于难于随心所欲的控制布局

float浮动定位的问题:

  • 想把多个块元素水平放在一行内,要 计算的要素太多。
  • 一个元素总宽度= width+padding2+border2+margin*2。
  • 一行中多个元素都要按以上算法计算 总宽度——太繁琐

弹性布局优点:自动计算,自适应

  • 弹性布局可自动计算宽度、间距等,使多个元素始终保持最初设计的样子。

弹性布局概念

使用弹性布局前,先要了解一些概念。包括:

• 弹性布局的容器

  • 弹性布局的容器,简称“容器”,是指要实现布局效果的父元素

image.png

• 弹性布局的项目

  • 弹性布局的项目,简称“项目”,是指要实现布局效果的子元素, 称为项目

image.png

• 主轴

主轴,是指弹性布局的多个项目排列方向上的一根轴。

• 如果弹性布局的多个项目按x轴排列,那么x轴就是主轴。

image.png