今天学习了一些CSS布局技巧。
什么是css布局
CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。
常见的有：
- 正常布局流
- [
display]属性 - 弹性盒子
- 网格
- 浮动
- 定位
- CSS 表格布局
- 多列布局
今天主要介绍弹性盒子，网格
弹性盒子
什么是弹性盒子
弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。
Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用 flexbox，只需要在想要进行 flex 布局的父元素上应用display: flex ，所有直接子元素都将会按照 flex 进行布局。
属性
常用属性：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
应用场景
能够通过flex简单粗暴的实现元素水平垂直方向的居中，以及在两栏三栏自适应布局中通过flex完成，还有在移动端、小程序这边的开发也可以使用弹性盒子布局。
实操实践
1 垂直居中对齐
display: flex;
justify-content: center;
align-items: center;
2 圣杯布局
.flex {
display: flex;
flex-wrap: nowrap;
}
.leftBar {
width: 200px;
flex-shrink: 0;
}
.container {
width: 100%;
}
.rightBar {
width: 200px;
flex-shrink: 0;
}
网格
什么是网格布局
网格是一组相交的水平线和垂直线，它定义了网格的列和行。
CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。
网格属性
| 属性 | 描述 |
|---|---|
| column-gap | 指定列之间的间隙 |
| gap | row-gap 和 column-gap 的简写属性 |
| grid | grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性 |
| grid-area] | 指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性 |
| grid-auto-columns | 指的默认的列尺寸 |
| grid-auto-rows | 指的默认的行尺寸 |
| grid-column | grid-column-start 和 grid-column-end 的简写属性 |
| grid-column-end | 指定网格元素列的结束位置 |
| grid-column-gap | 指定网格元素的间距大小 |
| grid-column-start | 指定网格元素列的开始位置 |
| grid-gap | grid-row-gap 和 grid-column-gap 的简写属性 |
| grid-row | grid-row-start 和 grid-row-end 的简写属性 |
| grid-row-end | 指定网格元素行的结束位置 |
| grid-row-gap | 指定网格元素的行间距 |
| grid-row-start | 指定网格元素行的开始位置 |
| grid-template | grid-template-rows, grid-template-columns 和 grid-areas 的简写属性 |
| grid-template-areas | 指定如何显示行和列，使用命名的网格元素 |
| grid-template-columns | 指定列的大小，以及网格布局中设置列的数量 |
| grid-template-rows | 指定网格布局中行的大小 |
| row-gap | 指定两个行之间的间距 |
应用场景
适用于创建复杂的栅格化布局
实操实例
1.水平垂直居中
<style>
.container{
display: grid;
place-content: center;
}
</style>
2.限定列宽的表格
.container {
display: grid;
grid-template-columns: 1fr 1fr minmax(200px, 2fr);
}
