css两栏布局-三栏布局-弹性盒

CSS-流式布局-两栏布局-三栏布局总结

流式布局

核心：宽度通过设置百分比，以此来达到不同的设备对应的是不同的宽度

效果图如下：

html如下：

 <div style="width: 100%;height: 100px;background: #eee;display: flex;">
      <div style="width: 40%;background: pink;">40%自适应</div>
      <div style="width: 60%;background: green;">60%自适应</div>
 </div>

两栏布局

核心：css连栏布局，即左列定宽，右列自适应宽。

效果图如下

html部分（通用）：

   <div class="container">
       <div class="left">定宽</div>
       <div class="right">自适应</div>
   </div>

css部分：

方式1 浮动+margin

    <style>
        .left {
            float: left;
            /* 定宽 */
            width: 200px;
            background-color: chartreuse;
        }

        .right {
            /* 不设置宽度自适应 */
            background-color: coral;
            margin-left: 200px;
        }
    </style>

方式2 定位

    <style>
        .container {
            position: relative;
        }

        .left {
            position: absolute;
            left: 0;
            width: 100px;
            background-color: antiquewhite;
        }

        .right {
            position: absolute;
            left: 100px;
            right: 0;  /* 此项必须设置，用作撑开宽度 */
            background-color: aqua;
        }
    </style>

方式3 浮动+BFC

    <style>
        .left{
            background-color: aliceblue;
            float: left;
            width: 100px;
        }
        .right{
            background-color: aqua;
            overflow: hidden;/* BFC 区域会环绕在浮动周围 */
        }
    </style>

方式4 flex布局

    <style>
        .container {
            display: flex;
        }

        .left {
            width: 100px;
            background-color: antiquewhite;
        }

        .right {
            background-color: aqua;
            /*  flex-grow flex-shrink flex-basis 三和一*/
            /* flex-grow不足父元素宽度-增大 flex-shrink超出父元素缩小 ->至相关比例 flex-basis是用来设置盒子的基准宽度 flex-basis：0% （宽度被内容撑开）*/
            /* flex:1;  = flex:1  1  0%; */
            flex: 1;
        }
    </style>

三栏布局

注：通过三栏布局可衍生出圣杯布局哦～

核心：就是左右两侧定宽，中间自适应

效果图如下

html部分: (通用)

    <div class="container">
        <div class="left">
            定宽
        </div>
        <div class="right">
            定宽
        </div>
        <div class="main">
            自适应
        </div>
    </div>

css部分

方式1 浮动 + margin

思路：左右定宽 左浮动，右浮动。自适应区域设置左右的margin为 左右侧的定宽。

    <style>
        .left {
            float: left;
            background-color: antiquewhite;
            width: 100px;
        }

        .right {
            float: right;
            background-color: aqua;
            width: 100px;
        }

        .main {
            background-color: burlywood;
            margin-left: 100px;
            margin-right: 90px;
        }
    </style>

方式2 浮动 + bfc

bfc不与浮动元素重叠

    <style>
        .left {
            float: left;
            width: 100px;
            background-color: antiquewhite;
        }

        .right {
            float: right;
            width: 100px;
            background-color: aqua;
        }

        .main {
            background-color: aquamarine;
            /* bfc 不与浮动元素重叠 */
            overflow: hidden;
        }
    </style>

方式3 flex 布局

    <style>
        .contaniner{
            display: flex;
        }
        .left{
            float: left;
            width: 100px;
            background-color: antiquewhite;
        }
        .right{
            float: right;
            width: 100px;
            background-color: aqua;
        }
        .main{
            background-color: aquamarine;
           /* 此属性在两栏布局中用到过，应用在此处依旧很香！*/
            flex: 1;
        }
    </style>

方式4 定位 + margin

定位相信大家都可以想的到～

    <style>
        .container {
            position: relative;
        }

        .left {
            position: absolute;
            background-color: aquamarine;
            width: 100px;
            left: 0;
        }

        .right {
            background-color: beige;
            position: absolute;
            width: 100px;
            right: 0;
        }

        .main {
            background-color: antiquewhite;
            margin-left: 100px;
            margin-right: 100px;
        }
    </style>

弹性盒布局（补充）

这里给到一些常用到的flex属性。

1、设置flex布局：

元素添加display:flex；

2、对齐方式

flex-direction: x轴 row(默认)从左到右 row-reverse 从右往左

​ y轴 column（从上往下） column-reverse（从下往上）

3、换行

flex-wrap: wrap 换行 有行高(可用align-content解决，取消行间距)

​ nowrap 不换行（默认） x轴挤压宽度 y轴挤压高度

​ wrap-reverse 内容换行，反向显示（从上往下，不常用）

			  注：如果设置不换行，元素超出父元素尺寸 ，将会被挤压。

***简写 flex-flow：主轴属性 换行属性；

4、主轴内容的对齐方式（常用）

justify-content: flex-start 主轴顶端对齐（默认）

​ flex-end 底端对齐

​ center 居中

​ space-around 所有距离都平分，中间的距离是双倍

​ space-between 左右靠，中间剩余平分

​ space-evenly 所有距离都平分

5、侧轴对齐

​ align-items: flex-start 左

​ flex-end 右

​ center 中

​ stretch:拉伸（默认值）

​ 注：拉伸的必要条件不能设置宽或者高，

​ 如果不是默认值，则被内容撑开Ï

6 、侧轴- 设置多行内容的侧轴 （*可以取消行间距*）

​ align-content : flex-start

​ flex-end

​ center

​ stretch拉伸

​ space-around

​ space-between 上顶 下顶

​ space-evenly 上下间距一致

上述就足以玩转弹性盒子啦～end