自己之前没把 CSS 的相关问题当回事,心里总是理所应当的认为,样式什么时候用到随便百度一下就行,这种想法的后果就是,页面风格很僵硬,不同分辨率的显示器适配很差,写页面的时候,也很莫名其妙,明明我写了某个样式,就是没效果,到头来还是自己跟自己过不去。
感觉跟我有一样想法的同学肯定不少,不过不要紧,知错能改,善莫大焉。先从 Flex 开始,把布局给整明白,能解决一大堆样式麻烦。
1.基本原理
Flex 英文意思为,弯曲,屈伸,可以伸缩的布局,天生就是为了适配不同的分辨率。而且用法也很简单,首先只要告诉浏览器,我是一个伸缩布局就可以了。
.faBox {
display: ‘flex’; //给父元素设置为伸缩布局
.sonBox1 {
…
}
.sonBox2 {
…
}
}
设置完 Flex 之后,就会有下面的这个关系图,我们一个一个看。
2.容器属性
谁被设置成了 display: flex; ,谁就是容器。上面图中,faBox 就是容器,所以容器属性要写在容器属性里面。
2.1 flex-direction 属性
从英语意思了解属性,翻译为伸缩方向&#