抽象简单的web

时间:2022-02-26 01:17:20

抽象简单的web

 这个弹性盒子的主轴的开始是由左→右的方向,垂轴总是在主轴的上方到下方

知道了主轴垂轴的方向就可以通过三个属性进行布局了

弹性盒子全称叫弹性盒子布局

第一个属性:justify-content:flex-start(默认值)

第二个属性:justify-content:flex-end

第三个属性:justify-content:center

第四个属性:justify-content:space-between

第五个属性:  justify-content:space-around

对他们进行一个分类

第一类:集中分布类

特点:他们会集体的靠近始边,终边以及中间点

flex-start 集体靠主轴的始边

flex-end 集体靠主轴的终边

center 集体靠主轴的终边

第二类:平均分布类

特点:个个元素平均分布主轴上

space-around :开头结尾元素远离始边终边,其他元素平均分布

space-between   :开头结尾元素靠近始边终边,其他元素平均分布

抽象简单的web

 第一类:第一行为中间点,第二行为靠始边,第三行为终边

 抽象简单的web

 第二类:第一行为开头结尾元素靠近始边终边,第二行为远离始边终边