006 CSS3-column多列布局与Flex弹性布局【图文】多列布局column-width 栏目宽度column-

多列布局

column-width 栏目宽度
column-rule 栏目边框
column-gap 栏目间隔
column-count 栏目数

.box {
    column-width: 200px;  /*栏目宽度*/
    /*栏目边框 column-rule-width column-rule-style column-rule-color*/
    column-rule: 2px solid rgb(133, 131, 131);
    column-gap: 28px;  /*栏目间距*/
    column-count: 7;  /* 栏目数 */
}

弹性布局

display: flex 在父亲中设置表示该盒子是弹性盒
display: inline-flex 内联弹性盒

盒子属性

flex-direction

设置主轴的方向

flex-direction: row; 默认值row 此时是水平方向起点在左
flex-direction: row-reverse; 此时主轴是水平方向起点在右
flex-direction: column; 此时主轴是垂直方向起点在上沿
flex-direction: column-reverse; 此时主轴是垂直方向起点在下沿

column-reverse从下往上开始排列

justify-content

在主轴的对齐方式，主轴：默认是X轴，设置flex-direction:column 后悔变成Y轴。

主轴的另外一轴就是侧轴，默认Y是侧轴。

justify-content: flex-start; 起始位置对齐
justify-content: flex-end; 末端位置对齐
justify-content: center; 居中对齐（常用居中方式）
justify-content: space-around; 分散对齐
justify-content: space-between;两端对齐

justify-content: center;&flex-direction: column;垂直方向居中

align-items

侧轴方向对齐方式，即默认Y轴对齐方式

align-items: flex-start; 起始位置对齐
align-items: flex-end; 末端位置对齐
align-items: center; 居中对齐（常用居中方式）
align-items: stretch; 拉伸沾满子项目没有设置高度子项目会拉伸沾满父亲
align-items: baseline; 表示基线对齐，也就是元素中的文本都以第一个元素的文本的基线对齐。

align-items: stretch 案例

.box1 {
    height: 200px;
    border: 4px solid blue;
    display: flex;
    align-items: stretch;
    /*拉伸沾满 子项目没有设置高度 子项目会拉伸沾满父亲*/
}

.box1 div {
    /*子项目不设置高度*/
    width: 100px;
    background-color: red;
    margin-left: 10px;
}

align-items: baseline 案例

ul{
  width: 400px;
  height: 150px;
  background-color: #ccc;
  display: flex;
  align-items:baseline;
}

flex-wrap

flex-wrap 指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

flex-wrap:nowrap 默认值，不换行
flex-wrap:wrap 换行，在主轴上排不下的时候会自动换行
flex-wrap：wrap-reverse 换行起始位置在下

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 的复合属性。

flex-direction 属性规定灵活项目的方向。

flex-wrap 属性规定灵活项目是否拆行或拆列。

display:flex;
flex-flow:column wrap;  垂直方向排列，换行

order

在弹性容器中，设置项目的排列次序设置在项目(子元素)中

默认值0，值越大越靠后

值相同，看结构，写在后的排在后面

div#myRedDIV   {order: 2;}
div#myBlueDIV  {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV  {order: 1;}

flex-grow

flex-grow定义项目的放大比例，它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数），默认值为0，即如果存在剩余空间，也不放大。

flex-grow: number (默认值是 0)

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}

flex-shrink

定义项目的缩小比例，默认值为1，0时表示不缩小。

.box:nth-child(1){
flex-shrink:0  /*不缩小，设置多少像素就是多少*/
}
.box:nth-child(2){
flex-shrink:0
}
.box:nth-child(3){
flex-shrink:1
}
.box:nth-child(4){
flex-shrink:1   /*表示剩下的项目按1:1的比例缩小*/
}

flex-basic

flex-grow 属性用于设置或检索弹性盒子的扩展比率。

flex-basic: 长度单位/百分比
flex-basic: auto (默认值)

#main div:nth-of-type(2) {
    flex-basis:50%;
}

flex

flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。

单值语法: 值必须为以下其中之一:

一个无单位数(``): 它会被当作<flex-grow>的值。
一个有效的**宽度(width)**值: 它会被当作 <flex-basis>的值。
关键字none，auto或initial.

常用的用法：flex: 1 (可以自适应撑满容器)

<style>
    #main {
        display: flex;
        height: 100px;
    }
    #main>article {
        flex: 1;
        order: 2;
        background-color: coral;
    }
    #main>nav {
        width: 200px;
        order: 1;
        background-color: rgb(36, 129, 83);
    }
    #main>aside {
        width: 200px;
        order: 3;
        background-color: rgb(145, 29, 96);
    }
</style>
<body>
    <div id='main'>
        <article>1</article>
        <nav>2</nav>
        <aside>3</aside>
    </div>
    <footer>…</footer>
</body>