熟练使用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;
}
复制代码