参考B站视频：CSS Flex和响应式移动端适配

对齐分布——弹性盒子flex

display:flex;

  • 一个弹性盒子，相当于一个容器（弹性容器），内部可以存放很多其它盒子（弹性项目）。

  • 子元素在父元素内实现对齐分布

  • 弹性盒子可以控制内部盒子的分布，居中、两端对齐、靠左靠右、靠上靠下、拉伸还是压缩！

相当于，在操场中让很多班级排队，你可以指挥排队规则！（站在盒子前面，面向盒子看）内部项目，有朝前、朝左对齐！（站在盒子内部）项目自身位置有几行，几列之分！

一个二维平面，每个点（弹性项目）都有自己相对（弹性容器）的位置！

弹性容器的布局模式

从上到下为一条轴，从左到右为一条轴，这两根轴有主轴和交叉轴之分，说明白点就是向什么方向排

  • 主轴：项目沿主轴排列，从主轴起点到主轴终点！默认横向为主轴！
  • 交叉轴：垂直于主轴！默认纵向为交叉轴！

案例

<!-- 需要先设置弹性容器宽高，设置边框，便于分辨界限 -->
<div style="display: flex;">
    <div>伸缩项目1</div>
    <div>伸缩项目2</div>
    <div>伸缩项目3</div>
    <div>伸缩项目4</div>
    <div>伸缩项目5</div>
    <div>伸缩项目6</div>
</div>

image-20230509112129960

弹性容器默认样式

/* 主轴方向 */
jistify-content:flex-start
/* 是否换行 */
flex-drection:norow
/* 交叉轴对齐 */
align-items:stretc
  • 沿主轴排列（横着排），
  • 从起点开始（靠左对齐），
  • 沿交叉轴拉伸（沿第一排后面补齐），不设置弹性项目大小，自动填充交叉轴！

弹性容器内分布弹性项目的步骤

第一步：先确认容器内部的朝向，是从上到下排，还是从左到右排！

第二步：再确认每个弹性项目，沿规定的朝向，每个项目自己唯一的行、列位置！

最后忽略朝向问题，把屏幕当作唯一参考，必须从左到右看，必须从上到下看！

弹性容器的设置——外层盒子

容器对内部盒子的分布，进行总体规划，对内部的总体布局！

一、弹性盒子内部的主轴方向——朝向

flex-direction:row|row-reverse|coliumn|column-reverse

  • 主轴设置为行，沿着X方向、横着排！左右分布!

  • 设置为列，沿Y方向，按列排，上下分布!

二、单行排列还是允许多行

flex-wrap:nowrap|wrap|wrap-reverse

设置弹性容器的宽高后，再设置内部的弹性项目宽高，当一行排不下时，弹性项目就会压缩自己，挤在一行内，当设置允许多行排列，这样，弹性项目就不会压缩自己，往下一行继续排列

三、设置对齐——空间分布——弹性核心知识！

分配容器的空白区域，项目是按自己多大占多大位置，从而挤在一堆，还是把容器内空间，均匀分配

1、主轴方向的空白区域

justify-content:flex-start|flex-end|center|space-between|space-around

无论项目自身多大，去分配容器主轴方向的空间！

2、交叉轴方向的空白区域

align-itens:flex-star|flex-end|center|baseline|stretch

不设置项目大小，默认为拉伸沾满交叉轴，当项目设置大小后，可以分配容器交叉轴的空间！

3、换行后，多行分配空白区域

align-content:flex-start|flex-end|center|space-between|space-around|stretch

必须是多行情况下，换行后，一行项目与一行项目，在交叉轴分配空间！

弹性项目设置——内层盒子

内部盒子的CSS属性，可以单独对自己的设置样式，脱离统一布局！

1、单独的交叉轴对齐——交叉轴方向的空白区域

align-self:flex-star|flex-end|center|baseline|stretch

每个项目可以单独控制自己，在交叉轴上分配的空间，是拉伸，还是其它！类似align-itens

2、单独的主轴对齐

margin:auto

通过外边距来实现，自身在容器中脱离总体布局！一个项目与其它项目在主轴方向的对齐位置！

3、弹性

flex:none|<flex-grow><flex-shrink>||<flex-basis>

用于弹性项目，默认值为“0 1 auto”，其中||为可选参数，

  • 扩展空间

    • flex-grow:<number>

      弹性容器剩余空间，按比例扩展

  • 收缩空间

    • flex-shrink:<number>

      与之相反，用来定义收缩比率，不允许负数，默认为1

  • 弹性比率

    • flex-basis:<length>|<percentage>|auto|content

      剩余空间按比率进行弹性

4、显示位置

order:<interger>

用整数来定义排列顺序，数值小的排在前面，可以为负值！

项目练习:后台页面

通过flex弹性盒子，设计后台页面的布局，通过position定位来确认内容位置！

1、去掉默认样式

去掉body的外边距，并赋予底色

body {
    margin: 0;
    /* 视图高度，占100%，填充整个可视窗口大小 */
    height: 100vh;
    background-color: #eee;
}
2、去掉所有默认样式

去掉所有默认的外边距和内边距，方便后续自定义边距！

3、所有添加黑色边框

用于设计之初观察

* {
    border: 1px solid #000;
}
4、先设计，再添加

先设置样式，用于公共样式，再给盒子添加样式

5、分析布局——左右分布

要么上下，要么左右，用flex控制左右排列

.flex {
    display: flex;
}
6、上下分布

使用flex:1分配剩余空间，flex+column控制上下排列

.flex1{
    flex: 1;
}
.column {
    flex-direction: column;
}
7、从大到小依次分析

重复步骤5、6直到把大致布局弄出来！

8、完成布局，取消黑框

取消黑色边框，并设置每个板块的外边距

.marg8 {
    margin: 8px;
}
.margR8 {
    margin-right: 8px;
}
.margT8 {
    margin-top: 8px;
}
9、给盒子设置阴影

最后用分号结尾，不然不显示！

box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px,
			rgb(0 0 0 / 14%) 0px 1px 1px 0px,
			rgb(0 0 0 / 12%) 0px 1px 3px -1px;
10、给内容区设置，可以滚动
style="overflow: auto;"
11、给头部设置Z轴的层次

让内容滚动时，从下面经过

style="z-index: 1;"
12、设置自我介绍

通过给上层盒子设置相对定位，内层盒子设置绝对定位，来设置细节布局！

.Dingwei {
    position: relative;
}
.aDingwei {
    position: absolute;
    top: 15px;
    left: 35px;
    height: 40px;
13、自适应媒体查询

这个样式，不影响正常显示，当屏幕小于600px，里面的样式才生效！

/* 媒体查询，自适应 */
@media (max-width: 600px) {
    .ceBianLan {
        display: none;
    }
    .zsyColumn {
        flex-direction: column;
    }
}

元素在页面上的位置——元素的定位

position属性控制元素在页面中的定位方式，和精确定位，来实现元素的布局

position属性由两部分声明组成

第一步：指定元素在文档中定位方式

position: static | relative | fixed | absolute;

第二步：指定元素最终位置

除static外，其余定位方式都可以通过，上(top)、下(bottom)、左(left)、右(right)来唯一确认位置！

top: 10px | 30%;
left:30px | 20%;

static默认值，正常的文档流

relative不脱离文档流，相对于自身在文档流中的正常位置，不推荐单独使用，配合absolute有奇效

absolute脱离文档流，相对于static定位以外的第一个父元素进行定位，限定词有点多，可以理解为父元素都是默认static时，相对于页面定位，如果父元素有其它定位方式，相对于这个父元素定位，代表着要和其它定位方式一起使用，最常见，给父元素设置相对定位！

fixed脱离文档流，相对于视口（浏览器窗口和打印页面窗口）进行定位！相对于窗口进行固定定位！

最常用：将父元素设置为相对定位，将子元素设置为绝对定位！