Flex弹性盒模型和Gird网格布局

最新推荐文章于 2024-08-16 14:53:15 发布

ᝰꫀꪶꪖρડ꧖ꦿ846

最新推荐文章于 2024-08-16 14:53:15 发布

阅读量655

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_61417335/article/details/126100995

版权

（1）grid-template-columns 和 grid-template-rows

（2）grid-template-areas和grid-template

（3）grid-column-gap和grid-row-gap

（4）justify-items和align-items

（5）justify-content和align-content

2、作用在gird子项上的属性

（1）grid-column、grid-row等

（2） justify-self、align-self

一、Flex弹性盒模型

随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。

2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

1、作用在flex容器上的属性

（1）flex-direction

用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。

  <style>
        #box{ width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex; flex-direction: column;}   
        /* 列排行从上到下 */
        #box div{ width:50px; height:50px; color:white; line-height:50px; text-align: center; background:red;}
    </style>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

（2）flex-wrap

用来控制子项整体单行显示还是换行显示

<style>
        #box{ width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex; flex-wrap: wrap;}   
        #box div{ width:50px; height:50px; color:white; line-height:50px; text-align: center; background:red;}
    </style>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
    </div>

注:

子容器内容过多，无法被压缩时，子容器会溢出

<style>
        #box{ width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex; flex-wrap: nowrap;}   
        #box div{ width:50px; height:50px; color:white; line-height:50px; text-align: center; background:red;}
    </style>
    <div id="box">
        <div>1ffffffffhgf</div>
        <div>2hfgghfhd测试 </div>
        <div>3fghgf</div>
        <div>1gfh</div>
        <div>2fng</div>
        <div>3gdg</div>
        <div>1fdgdfgd</div>
        <div>2gdgdgdddg</div>
    </div>

（3）flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。
第一个值表示方向，第二个值表示换行，中间用空格隔开。

<style>
        #box{ width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex; flex-flow: row wrap;}   
        /* 横向排列，换行 */
        #box div{ width:50px; height:50px; color:white; line-height:50px; text-align: center; background:red;}
    </style>
    <div id="box">
        <div>1</div>
        <div>2 </div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
    </div>

（4）justify-content

决定了主轴方向(flex-direction)上子项的对齐和分布方式

<style>
        #box{ width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex; justify-content: space-evenly;}   
        #box div{ width:50px; height:50px; color:white; line-height:50px; text-align: center; background:red;}
    </style>
    <div id="box">
        <div>1</div>
        <div>2 </div>
        <div>3</div>
        <div>1</div>
        
    </div>

注：对于多行的情况，对于前排排满时是没有效果的只在有空白区域的地方有效果

（5）align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们
相对于flex容器在侧轴方向上的对齐方式。

<style>
        #box{ width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex;align-items: flex-start; }  /* 子项的高度根据内容来定 */ 
       /* #box{ width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex;justify-content: space-evenly;flex-wrap: wrap; align-items: center;}    子项过多时，折行让元素高度平均分配 */
        #box div{ width:50px;   background:red;}
        /* 子项不写高度，默认自适应父容器高度 */
    </style>
    <div id="box">
        <div>1测试文本测试文本</div>
        <div>2 测试文本测试文本测试文本测试文本</div>
        <div>3测试文本测试文本</div>
        <div>1</div>
        
    </div>

（6）align-content

align-content可以看成和justify-content是相似且对立的属性，表示多行之间的对齐方式。如果所有flex子项只有一行，则align-content属性是没有任何效果的

 <style>
        #box{ width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex; justify-content: space-evenly; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;}  
        #box div{ width:50px;   background:red;}
       
    </style>
    <div id="box">
        <div>1测试文本测试文本</div>
        <div>2 测试文本测试文本测试文本测试文本</div>
        <div>3测试文本测试文本</div>
        <div>1测试文本测试文本</div>
        <div>3测试文本测试文本</div>
        <div>1测试文本测试文本</div>
        <div>1测试文本测试文本</div>
        <div>3测试文本测试文本</div>
        <div>1测试文本测试文本</div>
    </div>

2、作用在flex子项上的属性

（1）order

默认值为0，小于0向前排，大于0，值越大越往后排

<style>
    #box{ width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex; }
    #box div{ width:50px; height:50px; color:white; line-height:50px; text-align: center; background:red;}
    #box div:nth-child(2){ order: 1;}
    #box div:nth-child(3){ order: -1;}
</style>
</head>
<body>
<div id="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

（2）flex-grow

flex-grow的值最小为0，1代表将空白区域占满。

<style>
    #box{ width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex; }
    #box div{ width:50px; height:50px; color:white; line-height:50px; text-align: center; background:red; }
    #box div:nth-child(2){ background:yellow; color:black; flex-grow:0.5;}
</style>
</head>
<body>
<div id="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

此时会将空白区域分成3份，黄占1份，蓝占2份

#box div:nth-child(2){ background:yellow; color:black; flex-grow:1;}`
`#box div:nth-child(3){ background:blue; color:black; flex-grow:2;}

（3）flex-shrink

默认为1，0代表不收缩，数值越大代表收缩越多。

<style>
        #box{ width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex; }
        #box div{ width:50px; height:50px; color:white; line-height:50px; text-align: center; background:red; }
        #box div:nth-child(2){ background:yellow; color:black; flex-shrink: 2;}
    </style>
    </head>
    <body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>

（4）flex-basis

和宽width的效果相同，给的是像素值，而非比例值。
当width和flex-basis同时出现时，后者优先级更高。但是flex-basis也不能无限大(有一个最大值)，因为周围的子元素会自适应，这时它的优先级不够。

<style>
        #box{ width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex; }
        #box div{ width:50px; height:50px; color:white; line-height:50px; text-align: center; background:red; }
        #box div:nth-child(2){ background:yellow; color:black; flex-basis: 600px;}
    </style>
    </head>
    <body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>

（5）flex

flex-grow ：flex-shrink flex-basis的复合写法，用空格隔开

flex:0;代表flex-grow:0;但此时优先级高于单一样式width; 而flex-grow的优先级是低于width的; 除了0其他值不影响。

<style>
        #box{ width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex; }
        #box div{ width:50px; height:50px; color:white; line-height:50px; text-align: center; background:red; }
        #box div:nth-child(2){ background:yellow; color:black; flex: 0;}
    </style>
    </head>
    <body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>

（6）align-self

和父容器中的align-items一样，只是后者针对一行中所有子项，而align-self针对某一个子项。

<style>
        #box2{ width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex; align-items:center;}
        #box2 div{ width:50px; color:white; line-height:50px; text-align: center; background:red;}
        #box2 div:nth-child(2){background:yellow; color:black; align-self: center;}
        #box2 div:nth-child(1){ align-self: flex-end;}
     </style>
     <div id="box2">
        <div>1</div>
        <div>测试文字</div>
        <div>3</div>
        <div>4</div>
     </div>

二、Gird网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在

1、作用在grid容器上的属性

（1）grid-template-columns 和 grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位(网格剩余空间比例单位)

对于规律的网格划分，若要添加多个横纵网格时，可利用repeat()语法。 repeat(重复的个数，每个网格的值)

<style>
        .box{ width:500px; height:500px; border:1px gray dotted; display:grid;
            /* grid-template-rows: 100px auto 25%;
            grid-template-columns: 100px 100px 200px 100px;  取值为像素 自适应 百分比 */
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
            /*  grid-template-rows: repeat(3,1fr);
                grid-template-columns: repeat(3,1fr);     repeat语法*/
        }
       /* .box div{ background:red;border:1px black solid;}   也可以给每个网格元素加背景颜色和边框 */
    </style>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>

注：

只有在fr累加和大于1，才会将空余空间填满，否则会出现剩余空间