📚flex布局
🐇父容器的属性
display: flex;
:将容器设置为Flex布局。flex-direction: row/column;
:设置主轴的方向(水平或垂直)。flex-wrap: nowrap/wrap/wrap-reverse;
:控制子元素是否换行。justify-content: flex-start/flex-end/center/space-between/space-around;
:控制子元素在主轴上的对齐方式。align-items: flex-start/flex-end/center/baseline/stretch;
:控制子元素在交叉轴上的对齐方式。align-content: flex-start/flex-end/center/space-between/space-around/stretch;
:控制多行子元素在交叉轴上的对齐方式。
🐇子元素的属性
order
: 定义子元素的排列顺序。flex-grow
: 定义子元素的放大比例。flex-shrink
: 定义子元素的缩小比例。flex-basis
: 定义子元素在主轴上的初始大小。flex
: 等同于flex-grow, flex-shrink, flex-basis的缩写。align-self
: 可以覆盖父容器的align-items属性,控制单个子元素的对齐方式。
🐇弹性盒模型
- 主轴(Main Axis)和交叉轴(Cross Axis):Flex布局中存在一个主轴和一个交叉轴,主轴按照flex-direction的方向,交叉轴与之垂直。
- 伸缩容器(Flex Container)和伸缩项目(Flex Item):父容器为伸缩容器,子元素为伸缩项目。
- 主轴尺寸(Main Size)和交叉轴尺寸(Cross Size):伸缩项目在主轴方向上的尺寸为主轴尺寸,交叉轴方向上的尺寸为交叉轴尺寸。
🐇Flex布局的优势
- 简化布局:使用Flex布局可以更简单和高效地实现复杂的布局需求。
- 自适应性:Flex布局可以根据容器的大小自动调整子元素的大小和位置。
- 响应式设计:Flex布局适用于响应式设计,能够在不同分辨率和设备上提供一致的布局效果。
- 网格布局:Flex布局可以实现网格布局,即将父容器划分为多个可调整大小的网格。
📚快速布局思路
-
html框架如下,各个div取好名字,方便样式对应和js定位。
<body> <div id="left"> <div id="left_up"></div> <div id="left_down"></div> </div> <div id="center"></div> <div id="right"> <div id="right_up"></div> <div id="right_down"></div> </div> </body>
-
首先设置一下主元素
body
- 给个背景(后续div给颜色都是方便演示)。
margin
和padding
设为0,因为有默认样式。- 以视口高度作为body高度。
- flex相关父元素设置
body{ background: url(./assects/images/background.jpg) center; margin: 0px; padding: 0px; height: 100vh; display: flex; justify-content: center; align-items: center; }
-
然后就是各个部分“分天下”,如下所示,各自的宽高百分比对应父元素宽高。
#left{ width: 25%; height: 100%; background-color: brown; margin-right: 2%; } #left_up{ width: 100%; height: 40%; background-color: aqua; } #left_down{ width: 100%; height: 60%; background-color: bisque; } #center { width: 46%; height: 100%; background-color: rgb(255, 205, 251); } #right{ width: 25%; height: 100%; margin-left: 2%; background-color: blue; } #right_up{ width: 100%; height: 50%; background-color: rgb(0, 255, 106); } #right_down{ width: 100%; height: 50%; background-color: rgb(255, 195, 195); }
-
像这样
- 最后加上
script
链接上对应的js图表绘制。再根据显示效果,调整图表相关字体,调整宽高等等。 - 在调整过程中,适当应用
width: 125%;
这种超出
设置,可以让图表显示更合理(因为实际div会部分覆盖,但是覆盖的是另外图表的空白区域所以没关系)。 - 在调整top、bottom这类时,还可以用到负值。
- 具体的实操后就有体会惹👀,调整的最终目的就是让图表漂亮地待在合适的位置,像这样:
📚grid布局补充
- 除了
flex
布局,grid
网格布局也很香⭐️,核心思路也是分块+填充调整。 - 补充博客:一文读懂grid布局
-
快速上手
- 创建一个Grid容器:首先,在HTML文件中选择一个容器元素,可以是任何具有子元素的元素,比如div。在该容器元素上应用
display: grid;
样式,将其设置为Grid布局容器。 - 定义Grid列和行:使用
grid-template-columns
属性来定义列的宽度,可以使用像素、百分比等单位,也可以使用fr
表示等分比例。例如,grid-template-columns: 1fr 2fr 1fr;
将容器分为三列,其中第二列的宽度是第一列和第三列的两倍。使用grid-template-rows
属性来定义行的高度,用法与grid-template-columns
类似。 - 放置子元素:在Grid容器中的子元素将自动以网格的形式进行布局。可以使用
grid-column
和grid-row
属性来控制子元素的位置。例如,grid-column: 1 / 3;
将元素放置在第一列到第三列之间的区域。也可以使用grid-area
属性来同时定义grid-row
和grid-column
,例如,grid-area: 2 / 1 / 3 / 3;
将元素放置在第二行第一列到第三列之间的区域。 - 控制空白间隔:可以使用
grid-gap
属性来设置网格之间的间隔,可以是像素、百分比等单位。例如,grid-gap: 10px;
将网格之间的间隔设置为10像素。 - 其他属性:可用于进一步控制Grid布局,如
justify-items
用于控制子元素在列中的对齐方式,align-items
用于控制子元素在行中的对齐方式等。
- 创建一个Grid容器:首先,在HTML文件中选择一个容器元素,可以是任何具有子元素的元素,比如div。在该容器元素上应用
-
HTML:
<div class="grid-container"> <div class="item header">Header</div> <div class="item sidebar">Sidebar</div> <div class="item content">Content</div> <div class="item footer">Footer</div> </div>
-
CSS:
.grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; /* 列宽比例为 1:2:1 */ grid-template-rows: auto 100px 1fr; /* 行高分为自适应、100px、剩余部分 */ grid-gap: 10px; grid-template-areas: "header header header" "sidebar content content" "footer footer footer"; /* 定义布局区域 */ height: 400px; /* 限制容器高度 */ } .item { background-color: #ccc; padding: 20px; } .header { grid-area: header; background-color: lightblue; } .sidebar { grid-area: sidebar; background-color: lightgreen; } .content { grid-area: content; background-color: lightyellow; } .footer { grid-area: footer; background-color: lightsalmon; }
-
最后是这样👀