Web前端开发笔记-----18.布局扩展、Flex弹性盒模型、Grid网格布局

最新推荐文章于 2022-08-14 17:29:29 发布

luokii

最新推荐文章于 2022-08-14 17:29:29 发布

阅读量182

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_51546204/article/details/114676471

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Web前端开发笔记-----18.布局扩展、Flex弹性盒模型、Grid网格布局

一、布局扩展

1.等高布局

利用margin负值和padding正值实现等高。

margin-bottom:-2000px; padding-bottom:2000px;

2.双飞翼布局

左右固定，中间自适应。
利用margin负值

.container .center{ height :200px; float:left; width:100%;}
.container .left{ float:left; width: 100px; height : 200px;  margin-left: -100%; }
.container .right{ float:left; width:150px; height : 200px; margin- left:- 150px;}

二、Flex弹性盒模型

在这里插入图片描述

1.flex- direction

flex- direction用来控制子项整体布局方向，是从左往右还是从右往左,是从上往下还是从下往上。
在这里插入图片描述

2.flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示。
在这里插入图片描述

3.flex-flow

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

4.justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式。
在这里插入图片描述

5.align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
在这里插入图片描述

6.align-content

align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行,则align-content属性是没有任何效果的。
在这里插入图片描述

7.作用在flex子项上的css属性

在这里插入图片描述

8.flex实现自适应

.partent{ display:flex;}
.left{}
.center{flex:1;}
.right{}

三、Grid网格布局

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

在这里插入图片描述

1.grid-template-columns和grid-template-rows

对网格进行横纵划分,形成二维布局。单位可以是像素,百分比,自适应以及fr单位(网格剩余空间比例单位）。
有时候，我们网格的划分是很规律的;如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

grid-template-columns:repeat(3,1fr);
grid-template-columns:repeat(fr,fr,fr);
两者相等

2.grid-template-areas和grid-template

area是区域的意思, grid- template- -areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
grid-template是grid-template rows , grid-template columns和grid-template- areas属性的缩写。

<style>
        .box{ width: 300px; height: 300px; border: 1px solid gray; display: grid;
            /* grid-template-columns: repeat(3,1fr);  grid-template-rows: repeat(3,1fr);
            grid-template-areas: 
            "a1 a1 a1"
            "a2 a2 a3" 
            "a2 a2 a3";         */
            grid-template:
            "a1 a1 a1" 1fr
            "a2 a2 a3" 1fr
            "a2 a2 a3" 1fr
            /1fr 1fr 1fr   ;
        }
        .box div{ background: red; border: 1px solid black;} 
        .box div:nth-child(1){ grid-area: a1;}
        .box div:nth-child(2){ grid-area: a2;}
        .box div:nth-child(3){ grid-area: a3;} 
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

注：grid-template-areas不能规定不规则的图形，只能是矩形区域。

3.grid-column-gap和grid-row-gap

grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。

CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。（先行后列）

4.justify-items和align-items

justify- items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式,是垂直拉伸显示，还是上中下对齐。

place items可以让align items和justify items属性写在单个声明中。

在这里插入图片描述
注：place items可以让align-items和justify items属性写在单个声明中。

place items：start end；
前align-items 后justify-items

5.justify-content和align-content

justify- content指定了网格元素的水平分布方式。align-content指定了网格元素
的垂直分布方式。

place content可以让align-content和justify-content属性写在一个CSS声明中。

在这里插入图片描述

6.作用在grid子项上的css属性

在这里插入图片描述

luokii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发笔记-----18.布局扩展、Flex弹性盒模型、Grid网格布局

Web前端开发笔记-----18.布局扩展文章目录Web前端开发笔记-----18.布局扩展一、布局扩展1.等高布局2.双飞翼布局二、Flex弹性盒模型一、布局扩展1.等高布局利用margin负值和padding正值实现等高。margin-bottom:-2000px; padding-bottom:2000px;2.双飞翼布局左右固定，中间自适应。利用margin负值.container .center{ height :200px; float:left; width:100%;}
复制链接

扫一扫