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声明中。