熟练使用CSS（二）--布局

布局

在CSS中，布局是非常重要的部分，了解常用的布局及如何实现这些布局是必要的。让我们一起来学习CSS中的布局吧！

flex布局

flex布局是目前最流行使用的布局方式，具有诸多优点，可以解决原有布局的各种问题。

它会设置一个主轴方向，与主轴向垂直的就是交叉轴，通过设置换行方式、项目在主轴的对齐方式、项目在交叉轴的对齐方式等来实现各式各样的效果。

关键点如下：

主轴的方向：flex-direction

flex-direction决定了项目的主轴方向。它包括以下四个值：

• row: 默认值，项目的主轴方向为行，即项目左右排列。

• column: 项目的主轴方向为列，即项目上下排列。

• row-reverse: 主轴为行，但方向与row相反，从右往左。

• column-reverse: 主轴为列，但方向与column相反，从下往上。

换行方式：flex-wrap

flex-wrap决定了项目在一条轴线上排不下，该如何换行。它包括以下三个值：

• nowrap: 默认值，不换行，将项目空间按比例分配。

• wrap: 换行，第一行在上方

• wrap-reverse: 换行，但是交叉轴方向相反，第一行在下方。

项目在主轴上的对齐方式：justify-content

justify-content决定了项目在交叉轴上是如何对齐的。它包括以下五个值：

• flex-start: 默认值，向前对齐

• flex-end: 向后对齐

• center: 居中

• space-between: 两端对齐，项目之间的间隔相同

• space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

项目在交叉轴上的对齐方式：align-items

align-items决定了项目在交叉轴上的对齐方式。它包括以下五个值：

• stretch: 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度

• flex-start: 交叉轴的起点对齐

• flex-end: 交叉轴的终点对齐

• center: 交叉轴的终点对齐（居中）

• baseline: 项目的第一行文字的基线对齐

经典布局

说完了重要的flex布局，我们再了解一些经典布局及常见样式问题，如：负margin问题。

负margin

margin设置负值，根据设置的方向、元素是否浮动、其定位方式，最终会有不同的行为，我们一起来看看。

元素没有设置浮动并且没有设置定位或者position为static

• 设置的margin的方向为top / left，元素会按照设置的方向移动相应的距离

• 设置的margin的方向为bottom / right，元素本身不会移动，元素后面的其它元素会往该元素的方向移动相应的距离，并覆盖在该元素的上方。

元素没有设置浮动且positive为relative

• 设置的margin的方向为top / left，元素会按照设置的方向移动相应的距离

• 设置的margin的方向为bottom / right，元素本身不会移动，元素后面的其它元素会往该元素的方向移动相应的距离，但是该元素会覆盖在后面的元素上面（后面的元素没有设置定位及z-index）。

元素没有设置浮动且positive为absolute

• 设置的margin的方向为top / left，元素会按照设置的方向移动相应的距离

• 设置的margin的方向为bottom / right，设置绝对定位的元素已经脱离了文档流，对后面的元素没有影响

元素设置了浮动

如果给一个元素设置了浮动，再设置了positive：relative；和单独设置float是一样的。对设置了浮动的元素，设置margin为负值时，表现如下：

• 设置的margin的方向和浮动的方向相同，则元素会往对应的方向移动对应的的距离

• 设置的margin的方向和浮动的方向相反，则元素本身不动，元素之前或之后的元素会向该元素的方向移动相应的距离，覆盖在该元素上。

圣杯布局

圣杯布局是指三栏布局，两侧宽度固定，中间宽度自适应。（我们这里假设高度为100px，两侧宽度分别为100px和150px）

我们来用flex和负margin两种方式来实现圣杯布局吧！

// flex布局
// dom结构
<div id='container'>
    <div id='left'>left</div>
    <div id='content'>content</div>
    <div id='right'>right</div>
</div>

// css样式
#container {
    display: flex;
    width: 100%;
    height: 100px;
}
#left {
    width: 100px;
    background: pink;
}
#content {
    flex: 1;
    background: lightYellow;
}
#right {
    width: 150px;
    background: lightGreen;
}

// 负margin布局
// dom结构
<div id='container'>
    <div id='content'>content</div>
    <div id='left'>left</div>
    <div id='right'>right</div>
</div>

// css样式
#container {
    overflow: hidden;
    padding: 0 100px;
}
#content, #left, #right {
    float: left;
}
#content {
    width: 100%;
    background: lightYellow;
}
#left {
    width: 100px;
    background: pink;
    margin-left: -100%;
    position: relative;
    left: -100px;
}
#right {
    width: 100px;
    background: lightGreen;
    margin-left: -100px;
    position: relative;
    left: 100px;
}

双飞翼布局

双飞翼布局与圣杯布局相似，不同点在于它在middle中增加了一个middle-inner盒子，把middle的内容放到middle-inner盒子中，最后就不需要给left和right设置定位了。

// dom结构
<div id='container'>
    <div id='content'>
        <div id='middle-inner'>middle</div>
    </div>
    <div id='left'>left</div>
    <div id='right'>right</div>
</div>

// css样式
#container {
    overflow: fidden;
}
#left, #right, #content {
    float: left;
}
#content {
    width: 100%;
    background: lightYellow;
}
#middle-inner {
    margin: 0 100px;
}
#left {
    width: 100px;
    background: pink;
    margin-left: -100%;
}
#right {
    width: 100px;
    background: lightGreen;
    margin-left: -100px;
}

总结

在这一节，我们详细介绍了CSS的flex布局和常用的圣杯布局，以及介绍了负margin的使用。接下来我们会继续介绍其他CSS知识。

我是何以庆余年，如果文章对你起到了帮助，希望可以点个赞，谢谢！

如有问题，欢迎在留言区一起讨论。