网页CSS排版布局技巧｜ 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第4天

在此次青训营中的大项目中，由于我们项目组相对来说，技术比较稚嫩，就选择了相对来说比较好上手的“仿掘金官网”制作。我们首先要挑战的就是通过HTML和CSS来最大限度地还原页面。网页排版即成为了重中之重。在学习的最开始，几乎每个人都因为这件事情头疼过，每个板块都达不到自己想要的位置。因此记录一下常用的几个CSS排版技巧，供以后参考借鉴。

一、整齐排列：

如果用Flexbox布局：

.元素 {
display: flex; //  inline-flex 也可以
}

如果用Grid布局：

.元素 {
display: grid;
grid-template-columns: 定义的值 ; 
}

最后呈现出来的效果：

非常适合用于卡片、名片、用户信息等布局情况。

二、水平垂直居中：

如果希望元素在div中水平垂直居中：

.元素 {
    display: flex;
    justify-content: center;
    align-items: center;
}

效果如下：

如果有多个元素需要居中对齐？

.元素 {
    display: inline-flex;
}

将display中的属性值改变即可，效果如下：

如果希望这些元素不是横向水平居中对齐，而是竖向水平居中对齐？

.元素 {
    display: flex;
    flex-direction: column;
}

改回 display: flex ; 并且设置纵向排列，效果如下：

三、均等分列：

在Web布局中，很多时候会在底端或者顶部做均分布局，如下图所见：

用Flexbox布局：

.总的div {
    inline-size: 自己设定;
    display: flex;
}

.上面那个div中的单个元素 {
    flex: 1;
}

效果如下：

用Grid布局：

.总的div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /3-有多少个元素设置多少个/
}

最终呈现的效果相同：

但不管是使用Flexbox还是Grid布局，都存在一定的缺陷，当div里面没有足够的空间容纳Flex项目（或Grid项目）时，这些会溢出（或隐藏，如果Flex容器或Grid容器显式设置了 overflow:hidden），效果如下：

有一个很简单的方式修复这种现象，在Flex容器或Grid容器里面设置一个" min-inline-size："

.总的div {
    min-inline-size: 所需的数值;
}