CSS布局:float、position、flex、grid

html-css050

CSS布局:float、position、flex、grid,第1张

CSS是前端基础技能之一,而CSS最重要的功能就是网站布局。

CSS布局方式有很多,从远古时代的table(表格)布局-->float(浮动)布局-->position(定位)布局-->flex(弹性)布局-->grid(网格)布局(还未正式推出),下面咱们简单谈一谈各种布局的用法及其优缺点。

table布局就是将网站当做一个表单来做,这里不做展开,因为现在基本不这么用了。

float:浮动。float刚开始并不是为了用来网页布局,而是用来解决图文信息中图片与文本冲突的问题的。

如下图:

这种常见的图文效果,没有float之前是很难达到的。有了float之后只需要加一个float:left,轻松搞定。

‘咦,如果float可以处理图文的问题,那用来布局不也可以吗?’,后来有人用float试着用于网页布局,还真的可以。

网页中最常见的布局如下:

用float做

比table布局要方便不少,不过float随之而来的带来了 “浮动高度塌陷”的问题:

如果浮动元素的父元素没有设定高度,当其子元素浮动后,父元素就因为内部没有子元素撑起从而高度变为0;

引申:网页元素一般分为 普通流,浮动流,定位流。其中普通流和浮动流在一个层级上,定位流>浮动流>普通流。

之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法,非常麻烦。

position:定位;顾名思义,就是确定位置。position同样可以用做网页布局。

同样的效果

不过position需要计算每一个元素的位置,而且这个位置是定死的,略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。

关键点:子绝父相。需要定位的元素用absolute绝对定位,其父元素用 relative相对定位。还有fixed固定定位,他是以html为父元素的定位。

flex:弹性;弹性布局很好的解决了float和position的问题,非常好用。

使用方法:

在父元素使用 display:flex确定弹性作用的范围。

然后

justify-content:center(space-around,space-between等);水平方向布局;

align-items:center(flex-start,flex-end等)垂直方向布局;

不过flex不兼容IE8及以下的浏览器。

大部分情况下flex布局已经能满足需要,不过flex只能用作一维布局,也就是说,flex一次只能作用于一条线。如果想要进行二维布局,必须翻转坐标二次弹性,这样会显得不够优雅,这时候grid(网格)布局就发展起来了。

grid布局用法和flex相似,但是作用于二维布局。

先在父元素使用 display:grid确定网格作用范围;

然后

grid-template-columns: 40px 50px auto 50px 40px(行)

grid-template-rows: 25% 100px auto(列)

等等属性,这里只简单介绍,大家了解有这个东西就行。

在现实工作用,以flex为主,position辅助已经足够应对所有问题。

[toc]

默认子元素按行排列

Flexbox 布局是一维布局方式,要么按行排列,要么按列排列。

align-items 控制交叉轴, justify-content 控制主轴,始终不变。

flex-basis是用来设置 main size 的。使用 flex-basis,可以同时管理行模式下的宽度和列模式下的高度。

此时 width 失效,但是可以用 min-width 限制

在列模式下,设置高度

flex 容器在有剩余空间的时候,子元素占据剩余空间的占比。适合一些浮动的布局。

超过边界自动换行

遇到这种布局的时候,一开始总是不知道如何下手 因为需要考虑到各移动端的自适应问题

最初的思路是给每个元素一个margin-right,和margin-bottom. 后发现最右端的不好处理 有的屏幕智能放得下4个有的能放5个

后面就想用 display: flexjustify-content: space-around这样又会新出现一个 问题 最后一行 没填满的时候 around 就会很丑了 。 自己去补的话 也显得很傻

网上到处搜margin-right解决方案也找不到 后面得知了grid栅格布局 嘿嘿嘿

贴上链接: https://css-tricks.com/snippets/css/complete-guide-grid/

想要实现这个很简单。 

给父容器 设置 display: grid然后设置grid-template-columns: 这个用来规定一行有多少列 每列多宽。因我的子元素 宽44px 所以设置的44px. 然后设置每一行的间距 grid-row-gap: 24px  justify-content: space-between和display:flex;一样 这样每行的布局就是 space-between 的布局了。 自动均分列间距。

使用grid布局的好处是。 它自动给我们在一行元素不够时 补足空白元素! 实现 均分效果~