笔记4
1.flex弹性盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#parent{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
.box{width: 150px;height: 50px;background: red;margin: auto;}
</style>
</head>
<body>
<div id="parent">
<div class="box">
</div>
</div>
</body>
</html>
row:默认值,显示为行。方向为当前的文档水平方向,默认值情况下是从左往右。
row-reverse:显示为行,但方向和row属性是反的。
column:显示为列
column-reverse:显示为列。但方向和column属性值是反的。
flex-wrap:用来控制子项整体单行显示还是换行显示。
nowrap:默认值,表示单行显示,不换行。
wrap:宽度不足换行显示
wrap-reverse:宽度不足换行显示,但是是从下往上开始,也就是原本换行在下面的子项现在跑到上面。
justify-content
justify-content属性决定了主轴方向上子项的对齐和分布方式
作用在flex子项上的css属性
order:可以通过设置改变某一个flex子项的排序位置。所有flex子项的默认的order属性值是0
flex-grow:属性中的grow是扩展的意思,扩展的就是flex子项所占据的宽度,扩展说侵占的空间就是除去元素外的剩余的空白间隙。默认值为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box div:nth-child(3){background: yellow;color: black;flex-grow: 3;}
#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;}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>9</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
flex-shrink:属性中的shrink是”收缩“的意思。flez-shrink主要处理当flex容器不足时候,单个元素比例收缩,默认值为1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box div:nth-child(3){background: yellow;color: black;flex-shrink: 3;}
#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;}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>9</div>
<div>4</div>
<div>5</div>
<div>1</div>
<div>2</div>
<div>9</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
flex-basis:flex-basis定义了在分配剩余空间之前的元素默认大小
#box div:nth-child(3){background: yellow;color: black; flex-basis: 300px; }
flex:flex属性是flex-grow,flex-shrink和flex-basis的缩写
#box div:nth-child(3){background: yellow;color: black; flex:0 1 auto }
align-self指控制单独某一个子项垂直对齐方式
#box div:nth-child(3){background: yellow;color: black;align-self: center; }
2.grid网格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{width: 300px;height: 300px;border: 1px grey dotted;display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;}
</style>
</head>
<body>
<div id="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>
</body>
</html>
1、grid-template-columns和grid-template-rows
对网格进行横纵划分,形成二维布局。单位可以是像素,百分比,自适应以及fr单位(网格剩余空间比例单位)。
有时候,我们网格的划分是很规律的,如果需要添加多个横纵网格时,可以利用repeat()语法进行简化操作。
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 grey dotted;display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
"a1 a1 a1"
"a2 a2 a2"
"a3 a3 a3";}
#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 id="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
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属性写在单个声明中。
5、justify-content和align-content
justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。
6、justify-items和align-items
justify-items指定了网格元素的水平呈现方式,是水平拉伸显示,还是左中右对齐。align-items指定了网格元素的垂直呈现方式,是垂直拉伸显示,还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。