Road Day7 front-end learning - multi-column layout

This article focuses on two-column layout and a three-column layout, three-column layout, including a very famous Flying wing layout and the Holy Grail

One, two seven methods column layout (left fixed, adaptive to the right)

principle:

the horizontal width of the block elements can be adjusted to follow the parent container flow characteristics, blockthe width of the box elements having a fill-level parent container, and the width of the flow characteristics of the parent container as adaptive.
Calc with CSS () method of dynamically setting a width
The new layout with CSS flex layout and grid layout

Basic style layout: two boxes apart 20px, 120px left box width, the width of the right cassette adaptive

< Div class = "warpper" ID = "warpper" > 
  < div class = "left" > 
    left fixed width, height is not fixed </ br >  </ br > </ br > </ br > highly likely to be small , it may also be significant.
  </ Div > 
  < div class = "right" > 
    content herein may be higher than the left, it may be lower than the left. Adaptive required width. </ Br > 
    basic styles, the two apart div 20px, left div width 120px 
  </ div > 
</ div >

.wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60;
}
.left {
    width: 120px;
    border: 5px solid #ddd;
}
.right {
    margin-left: 20px;
    border: 5px solid #ddd;
}

1.1 pairs of inline-block scheme

.wrapper-inline-block {
    box-sizing: content-box;
    font-size: 0;    /* 消除空格的影响 */
}

.wrapper-inline-block .left,
.wrapper-inline-block .right {
    display: inline-block;
    vertical-align: top;    /* 顶端对齐 */
    font-size: 14px;
    box-sizing: border-box;
}

.wrapper-inline-block .right {
    width: calc(100% - 140px); / * Note that there must be a space on both sides of the minus sign, otherwise the statement is invalid * / 
}

Additional knowledge:

box-sizing

In short, box-sizing is provided content-box, then the box drawable area (i.e. set width and height) includes only content , not including his borders and padding, padding, and if the drawing border, will draw outside of an established width and height;

Setting box-sizing of border-box, then the box drawable area (i.e., set width and height) comprising the frame padding + + content.

inline-block：

overflow: things overflow attribute specifies that occur when the content overflows an element box.

1.2 pairs float Scheme

It calculates the width dynamically adaptive, because the floating blockelements in space against a case in turn, arranged in a row

.wrapper-double-float {
    overflow: auto;        /* 清除浮动 */
    box-sizing: content-box;
}

.wrapper-double-float .left,
.wrapper-double-float .right {
    float: left;
    box-sizing: border-box;
}

.wrapper-double-float .right {
    width: calc(100% - 140px);
}

1.3 float+margin-left方案

.wrapper-float {
    overflow: hidden;        /* 清除浮动 */
}

.wrapper-float .left {
    float: left;
}

.wrapper-float .right {
    margin-left: 150px;
}

1.4 absolute+margin-left方法

使用了绝对定位，若是用在某个div中，需要更改父容器的position。
没有清除浮动的方法，若左侧盒子高于右侧盒子，就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况

.wrapper-absolute {
    min-height: 200px;
}

.wrapper-absolute .left {
    position: absolute;
}

.wrapper-absolute .right {
    margin-left: 150px;
}

1.5 float+BFC方法

.wrapper-float-bfc {
    overflow: auto; /* 清除浮动 */
}

.wrapper-float-bfc .left {
    float: left;
    margin-right: 20px;
}

.wrapper-float-bfc .right {
    margin-left: 0;
    overflow: auto;
}

这个方案同样是利用了左侧浮动，但是右侧盒子通过overflow: auto;形成了BFC，因此右侧盒子不会与浮动的元素重叠。
这种情况下，只需要为左侧的浮动盒子设置margin-right，就可以实现两个盒子的距离了。而右侧盒子是block级别的，所以宽度能实现自适应。
父元素需要清除浮动

1.6 flex方案

.wrapper-flex {
    display: flex;
    align-items: flex-start;
}

.wrapper-flex .left {
    flex: 0 0 auto;
}

.wrapper-flex .right {
    flex: 1 1 auto;
}

flex容器的一个默认属性值:align-items: stretch;。这个属性导致了列等高的效果。
为了让两个盒子高度自动，需要设置: align-items: flex-start;

1.7 grid方案

.wrapper-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: start;
}

.wrapper-grid .left,
.wrapper-grid .right {
    box-sizing: border-box;
}

.wrapper-grid .left {
    grid-column: 1;
}

.wrapper-grid .right {
    grid-column: 2;
}

grid布局也有列等高的默认效果。需要设置: align-items: start;。
grid布局还有一个值得注意的小地方和flex不同:在使用margin-left的时候，grid布局默认是box-sizing设置的盒宽度之间的位置。而flex则是使用两个div的border或者padding外侧之间的距离。

二、三栏布局

圣杯布局和双飞翼布局：https://www.cnblogs.com/guchengnan/p/10011932.html

2.1 绝对定位法

2.2 margin负值法

2.3 自身浮动法