布局（flex、grid）

一、flex布局

传统布局与flex布局

传统布局
兼容性好。
布局繁琐。
局限性，不能在移动端很好的布局。
flex 弹性布局
操作方便，布局极为简单，移动端应用很广泛。
PC 端浏览器支持情况较差。
IE 11或低版本，不支持或仅部分支持。

1.2、布局原理

flex 是 flexible Box 的缩写，意为”弹性布局",用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex布局。

当我们为父盒子设为fex布局以后，子元素的float、clear和vertical-align 属性将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局。
采用 Flex布局的元素，称为Flex容器(flex container),简称“容器"。它的所有子元素自动成为容器成员，称为Flex项目(flexitem)，简称“项目"。

image.png

1.3、flex布局父项常见属性

1. 3.1 常见父项属性

以下由6个属性是对父元素设置的
flex-direction:设置主轴的方向。
justify-content:设置主轴上的子元素排列方式。
flex-wrap:设置子元素是否换行。
align-content:设置侧轴上的子元素的排列方式(多行)。
align-items:设置侧轴上的子元素排列方式(单行)。
flex-flow:复合属性，相当于同时设置了fex-direction和flex-wrap。

1.3.2、flex-direction 设置主轴的方向

1.主轴与侧轴
在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 :行和列、x轴和y 轴。

默认主轴方向就是x轴方向，水平向右。
默认侧轴方向就是y轴方向，水平向下。

image.png

flex-direction属性决定主轴的方向(即项目的排列方向)注意:主轴和侧轴是会变化的，就看 fex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。

image.png

<div >
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

        *{
            padding: 0;
            margin: 0;
         }
        div{
            display: flex;
            flex-direction: row-reverse;
            justify-content: space-between;
            width: 100%;
            height: 500px;
            background: pink;
        }
        span{
            width: 400px;
            height: 250px;
            background: cyan;
        }

image.png

1. 3.3、justify-content 设置主轴上的子元素排列方式

justify-content属性定义了项目在主轴上的对齐方式。
注意:使用这个属性之前一定要确定好主轴是哪个。

space-evenly：均匀分配空间

image.png

1.3.4、 flex-wrap 设置子元素是否换行

默认情况下，项目都排在一条线(又称”轴线”)上。flex-wrap属性定义，flex布局中默认是不换行的。
flex布局中，默认的子元素是不换行的，如果装不下，会缩小子元素的宽度，放到父元素里面。

image.png

<div >
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>

*{
            padding: 0;
            margin: 0;
        }
        div{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 100%;
            height: 500px;
            background: pink;
        }
        span{
            width: 400px;
            height: 250px;
            background: cyan;
        }

image.png

1.3.5、align-items 设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴(默认是v轴)上的排列方式在子项为单项的时候使用。

image.png

设置stretch属性时，元素设置了高度无效。

<div >
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

*{
            padding: 0;
            margin: 0;
        }
        div{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            width: 100%;
            height: 500px;
            background: pink;
        }
        span{
            width: 400px;
            height: 250px;
            background: cyan;
        }

image.png

1.3.6 align-content 设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行)，在单行下是没有效果的。

image.png

<div >
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
</div>

 *{
            padding: 0;
            margin: 0;
        }
        div{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-content: space-between;
            flex-wrap: wrap;
            width: 100%;
            height: 500px;
            background: pink;
        }
        span{
            width: 30%;
            height: 200px;
            background: cyan;
        }

image.png

1.3.7、 align-content 和 align-items 区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸。
align-content适应于换行(多行)的情况下(单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找 align-items 多行找 align-content。

image.png

1.3.8 flex-flow

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

1.4、flex布局子项常见属性

flex子项目占的份数。
align-self控制子项自己在侧轴的排列方式。
order属性定义子项的排列顺序(前后顺序)。

1.4.1 flex 属性

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

<div >
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            display: flex;
            width: 100%;
            height: 500px;
            background: pink;
        }
        span:nth-child(1){
            width: 20%;
            height: 200px;
            background: cyan;
        }
        span:nth-child(2){
            flex: 1;
            height: 200px;
            background: bisque;
        }
        span:nth-child(3){
            width: 20%;
            height: 200px;
            background: darkturquoise;
        }
    </style>

image.png

<div >
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            display: flex;
            width: 100%;
            height: 300px;
            background: pink;
        }
        span:nth-child(1){
            flex: 1;
            background: cyan;
        }
        span:nth-child(2){
            flex: 2;
            background: bisque;
        }
        span:nth-child(3){
            flex: 1;
            background: darkturquoise;
        }
    </style>

image.png

1.4.2 align-self 控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其它项目不一样的对齐方式，可覆盖align-items属性默认值为 auto，表示继承父元素的 align-items属性,如果没有父元素,则等同于stretch。

<div >
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            display: flex;
            width: 100%;
            height: 500px;
            background: #cfcfcf;
        }
        span:nth-child(1){
            flex: 1;
            background: cyan;
            height: 200px;
        }
        span:nth-child(2){
            flex: 2;
            background: bisque;
            height: 200px;
            align-self: flex-end;
        }
        span:nth-child(3){
            flex: 1;
            background: darkturquoise;
            height: 200px;
        }
    </style>

image.png

1.4.3、order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。
注意:和 z-index不一样。

<div >
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            display: flex;
            width: 100%;
            height: 500px;
            background: #cfcfcf;
        }
        span:nth-child(1){
            flex: 1;
            background: cyan;
            height: 200px;
            order: 2;
        }
        span:nth-child(2){
            flex: 2;
            background: bisque;
            height: 200px;
            align-self: flex-end;
            order: 1;
        }
        span:nth-child(3){
            flex: 1;
            background: darkturquoise;
            height: 200px;
            order: 2;
        }
    </style>

image.png

二、grid布局

Flex 布局是轴线布局，只能指定“项目"针对轴线的位置，可以看作是一维布局，Grid 布局则是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局，Grid 布局远比 Flex 布局强大。

image.png

2.1、浏览器兼容性情况

image.png

2.2、容器属性

<div class="container">
     <div class = "item item1">1</div>
     <div class = "item item2">2</div>
     <div class = "item item3">3</div>
     <div class = "item item4">4</div>
     <div class = "item item5">5</div>
     <div class = "item item6">6</div>
     <div class = "item item7">7</div>
     <div class = "item item8">8</div>
     <div class = "item item9">9</div>
     <div class = "item item10">10</div>
 </div>

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            /*开启grid布局*/
            display: grid;
            height: 600px;
            width: 600px;
            border: 10px solid pink;
        }
        .item1{
            background-color: darkturquoise;
        }
        .item2{
            background-color: skyblue;
        }
        .item3{
            background-color: darkcyan;
        }
        .item4{
            background-color: firebrick;
        }
        .item5{
            background-color: violet;
        }
        .item6{
            background-color: blueviolet;
        }
        .item7{
            background-color: magenta;
        }
        .item8{
            background-color: slateblue;
        }
        .item9{
            background-color: chartreuse;
        }
        .item10{
            background-color: cyan;
        }
    </style>

image.png

2.2.1、grid-template-*

根据填写相应属性值的个数（不填写，自动分配），规定行和列。

  .container{
            /*开启grid布局*/
            display: grid;
            height: 600px;
            width: 600px;
            border: 10px solid pink;
            /*将容器中的项目定义为三列*/
            grid-template-columns: 100px 100px 100px;
            /*将容器中的项目定义为四行*/
            grid-template-rows: 100px 100px 100px 100px;
        }

image.png

2.2.2、容器属性 grid-template-* 相关

1.repeat()，第一个参数是重复的次数，第二个参数是所要重复的值。

/*两种写法等同*/
grid-template-columns:100px 100px 100px;
grid-template-columns:repeat(3，100px);

2.auto-fill，有时单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充。此时grid-template-rows设置无效。

.container{
            /*开启grid布局*/
            display: grid;
            height: 600px;
            width: 600px;
            border: 10px solid pink;
            /*将容器中的项目定义为auto-fill*/
            grid-template-columns: repeat(auto-fill,100px);
            /*将容器中的项目定义为四行*/
            grid-template-rows: 100px 100px 100px 100px;
        }

image.png

3.fr
为了方便表示比例关系，网格布局提供了fr关键字(fraction 的缩写，意为“片段”),此时grid-template-rows设置无效。

.container{
            /*开启grid布局*/
            display: grid;
            height: 600px;
            width: 600px;
            border: 10px solid pink;
            /*将容器中的项目宽度平均分成4份*/
            grid-template-columns: repeat(4,1fr);
            /*将容器中的项目定义为四行*/
            grid-template-rows: 100px 100px 100px 100px;
        }

image.png

.container{
            /*开启grid布局*/
            display: grid;
            height: 600px;
            width: 600px;
            border: 10px solid pink;
            /*将容器中的项目按照比例分配*/
            grid-template-columns: 1fr 3fr 1fr;
            /*将容器中的项目定义为四行*/
            grid-template-rows: 100px 100px 100px 100px;
        }

image.png

4、minmax()
函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr minmax(150px,1fr);

5.auto
表示由浏览器自己决定长度。

  grid-template-columns: 200px auto 100px;

6.网格线
可以用方括号定义网格线名称，方便以后的引用。

grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4] 100px [r5];

2.2.3、grid-row-gap/grid-column-gap

item(项目)相互之间的距离。

注意
根据最新标准，上面三个属性名的grid-前缀已经删除。grid-column-gap和grid-row-gap写成column-qap和row-gap,grid-qap写成gap。

 .container{
            /*开启grid布局*/
            display: grid;
            height: 600px;
            width: 600px;
            border: 10px solid pink;
            grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
            grid-template-rows: [r1]100px [r2]100px [r3]100px [r4]100px [r5];

            /*设置行间距*/
            row-gap: 10px;
            /*设置列间距*/
            column-gap: 20px;
        }

image.png

2.2.4、grid-template-areas

一个区域由单个或多个单元格组成，由你决定(具体使用，需要在项目属性里面设置)。
区域不需要用，则使用“点”(.)表示。
区域的命名会影响到网格线。每个区域的起始网格线会自动命名为区域名-start，终止网格线自动命名为区域名-end。

grid-template-areas: 'A A A' 'B B B' 'C C C';

2.2.5、grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”即先填满第一行，再开始放入第二行(就是子元素的排放顺序)。该属性默认值为row

.container{
            /*开启grid布局*/
            display: grid;
            height: 600px;
            width: 600px;
            border: 10px solid pink;
            grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
            grid-template-rows: [r1]100px [r2]100px [r3]100px [r4]100px [r5];

            /*设置行间距*/
            row-gap: 10px;
            /*设置列间距*/
            column-gap: 20px;
          
            /*设置单元格排列方式，默认为row*/
            grid-auto-flow: column;
        }

image.png

2.2.6、justify-items(水平方向)/ align-items (垂直方向)

设置单元格内容的水平和垂直的对齐方式。
justify-items:start |end | center | stretch;

.container{
            /*开启grid布局*/
            display: grid;
            height: 600px;
            width: 600px;
            border: 10px solid pink;
            grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
            grid-template-rows: [r1]100px [r2]100px [r3]100px [r4]100px [r5];

            /*设置行间距*/
            row-gap: 10px;
            /*设置列间距*/
            column-gap: 20px;

            /*设置单元格排列方式，默认为row*/
            grid-auto-flow: column;

            /*水平方向居中对齐*/
            justify-items: center;
            /*垂直方向居中对齐*/
            align-items: center;
        }

image.png

2.2.6、justify-content(水平方向)/align-content(垂直方向)

 .container{
            /*开启grid布局*/
            display: grid;
            height: 600px;
            width: 600px;
            border: 10px solid pink;
            grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
            grid-template-rows: [r1]100px [r2]100px [r3]100px [r4]100px [r5];

            /*设置行间距*/
            row-gap: 10px;
            /*设置列间距*/
            column-gap: 20px;

            /*设置内容的对齐方式*/
            justify-content: center;
            align-content: center;


        }

image.png

2.2.7、 grid-auto-columns/grid-auto-rows

用来设置多出来的项目宽和高。
如只设置了3x3个项目，但是实际有10个，整个属性就是用来设置多出来的项目。

 .container{
            /*开启grid布局*/
            display: grid;
            height: 600px;
            width: 600px;
            border: 10px solid pink;
            grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
            grid-template-rows: [r1]100px [r2]100px [r3]100px [r4];

            /*设置行间距*/
            row-gap: 10px;
            /*设置列间距*/
            column-gap: 20px;

            /*设置内容的对齐方式*/
            justify-content: center;
            align-content: center;
            /*简写方式*/
            /*place-content: center center;*/

            /*设置多出来的单元格*/
            grid-auto-rows: 200px;

        }

image.png

2.3、项目属性

2.3.1、 grid-column-start/grid-column-end/grid-row-start/grid-row-end

用来指定item的具体位置，根据在哪根网格线，合并单元格。

.item1{
            background-color: darkturquoise;
            
            /*合并一二单元格*/
            grid-column-start: 1;
            grid-column-end: 3;

           /*简写方式*/
           /*grid-column: 1 / 3;*/

           /*等同上面的写法*/
          /*grid-column-start: span 2;*/
        }

image.png

2.3.2、grid-area

指定项目放在哪一个区域。

    .container{
            /*开启grid布局*/
            display: grid;
            height: 600px;
            width: 600px;
            border: 10px solid pink;
            grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
            grid-template-rows: [r1]100px [r2]100px [r3]100px [r4];
            /*设置行间距*/
            row-gap: 10px;
            /*设置列间距*/
            column-gap: 20px;
            /*设置内容的对齐方式*/
            justify-content: center;
            align-content: center;
            /*简写方式*/
            /*place-content: center center;*/
            /*设置多出来的单元格*/
            grid-auto-rows: 200px;

            /*划分项目区域，配置grid-area使用*/
            grid-template-areas: 'A A A' 'B B B' 'C C C';
        }

      .item1{
            background-color: darkturquoise;
            /*将该单元格放在B区域*/
            grid-area: B;
        }

image.png

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。
grid-area: <row-start>/<column-start>/<row-end>/<column-end>;

 grid-area: 1/1/3/3;

2.3.3、justify-self/align-self /place-self

justify-self属性设置单元格内容的水平位置(左中右)，跟justify-items属性的用法完全一致但只作用于单个项目(水平方向)。
align-self属性设置单元格内容的垂直位置(上中下)，跟align-items属性的用法完全一致也是只作用于单个项目(垂直方向)。
justify-self: start l end| center | stretch;

 .item1{
            background-color: darkturquoise;
            /*单个项目水平、垂直居中对齐的简写*/
            place-self: center center;
 }

image.png

布局（flex、grid）

一、flex布局

1.2、 布局原理

1.3、flex布局父项常见属性

1. 3.1 常见父项属性

1.3.2、flex-direction 设置主轴的方向

1. 3.3、justify-content 设置主轴上的子元素排列方式

1.3.4、 flex-wrap 设置子元素是否换行

1.3.5、align-items 设置侧轴上的子元素排列方式(单行)

1.3.6 align-content 设置侧轴上的子元素的排列方式(多行)

1.3.7、 align-content 和 align-items 区别

1.3.8 flex-flow

1.4、flex布局子项常见属性

1.4.1 flex 属性

1.4.2 align-self 控制子项自己在侧轴上的排列方式

1.4.3、order 属性定义项目的排列顺序

二、grid布局

2.1、浏览器兼容性情况

2.2、容器属性

2.2.1、grid-template-*

2.2.2、容器属性 grid-template-* 相关

2.2.3、grid-row-gap/grid-column-gap

2.2.4、grid-template-areas

2.2.5、grid-auto-flow

2.2.6、justify-items(水平方向)/ align-items (垂直方向)

2.2.6、justify-content(水平方向)/align-content(垂直方向)

2.2.7、 grid-auto-columns/grid-auto-rows

2.3、项目属性

2.3.1、 grid-column-start/grid-column-end/grid-row-start/grid-row-end

2.3.2、grid-area

2.3.3、justify-self/align-self /place-self

推荐阅读更多精彩内容

1.2、布局原理