前端css样式小知识点(大杂烩)

电玩女神 2024-03-31 11:49 81阅读 0赞

#### 文章目录 ####

*   *  一、前言
     *  二、图文实操讲解
     *   *  1、使用微信开发者工具，如何整洁代码的快捷键
         *  2、微信小程序中rpx和px有什么区别
         *  3、css中flex设置为1是什么意思
         *  4、opacity:1 的作用是什么
         *   *  效果图：
         *  5、css样式如何实现半圆等
         *   *  效果图：
         *  6、css样式如何将图片置于元素最上面
         *   *  效果图：
         *  7、css样式，字体阴影效果
         *   *  ①盒子阴影
             *  ②文字阴影
         *  8、padding-bottom: env(safe-area-inset-bottom);的作用
         *   *  示例一：自定义tabBar
             *  示例二：自定义全屏遮罩
         *  9、css样式基础文字样式
         *   *  ① color：属性值；文字颜色
             *  ②font-family:宋体；文字类型
             *  ③font-size:18px; 文字大小
             *  ④ font-weight:400; 文字粗细
             *  ⑤font-style:normal; 字体样式
             *  ⑥line-height:18px; 字体行高
             *  ⑦letter-spacing: 0.1em; 设置字体间距属性
             *  ⑧text-align:center; 文本对齐
             *  ⑨ text-indent：2rem; 文本间距
         *  10、white-space: nowrap;作用
         *  11、CSS position(定位)属性
         *   *  ①CSS position(定位)属性
             *  ②position: static
             *  ③position: relative
             *  ④position: absolute
             *  ⑤position: fixed
             *  ⑥position: sticky
             *  ⑦position: inherit
             *  ⑧总结
         *  12、CSS display:flex（弹性布局）
         *   *  ①flex布局的基本概念
             *  ②\*\*flex-direction: row; 布局的排列方向 （主轴排列方向）\*\*
             *  ③flex-wrap : nowrap; 是否进行换行处理。此语法是加在父元素身上的。
             *  ④justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。
             *  ⑤align-items : 每一行中的子元素上下对齐方式。
             *  ⑥align-content :
             *  ⑦flex-shrink
         *  13、css居中实现方式
         *   *  ①flex布局设置居中
             *  ②flex-给子项设置
             *  ③绝对定位
             *  ④tabel-cell实现垂直居中
             *  ⑤grid设置居中
     *  待更新完成

### 一、前言 ###

一些前端css样式的知识点、琐碎，但是有些很常用，当时却总是想不起来，又要自己进行搜索，就很麻烦，就部分简单记录一下。

### 二、图文实操讲解 ###

#### 1、使用微信开发者工具，如何整洁代码的快捷键 ####

Shift+Alt+F		//代码格式化

#### 2、微信小程序中rpx和px有什么区别 ####

区别：①rpx是相对长度单位，而px是固定长度单位；②rpx可以自适应手机分辨率，适配当前机型，而px不能很好的适应不同分辨率的手机。

#### 3、css中flex设置为1是什么意思 ####

flex包含三个属性:flex-grow,flex-shrink,flex-basis  
flex-grow: 默认值为0,代表元素的放大比例,当一个容器有多余的空间时,设置容器内某个元素的放大比例,该元素会对多余空间根据设置的比例分配大小  
flex-shrink:默认值为1,代表元素的缩小比例,当空间不足时,多个元素会按照比例同样缩小,如果设置某个元素这个值为0,代表空间不足时该元素不缩小  
flex-basis:代表元素再分配多余空间前所占比例,默认值auto等于元素本身大小不变  
flex设置为1等同与flex-grow设置为1,元素分配剩余空间时按照设置的值进行等比例分配

.item {
        
    flex: 1;
    }
    /* 等同 */
    .item {
        
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    }

#### 4、opacity:1 的作用是什么 ####

opacity从0-1表示了一个元素的可见度，在0时会完全看不见，1表示完全可见。opacity的用处要参考设计，是否要设置一个元素恰当的透明度值

.div{
        
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      background-color: red;
      border-radius: 50%;
      opacity: 0.5;		//设置了0.5
    }
    .div2{
        
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      background-color: red;
      border-radius: 50%;
      opacity: 1;	//正常默认1
    }

##### 效果图： #####

![在这里插入图片描述][5f12e3f3c016496a9574a3d484cf5934.png_pic_center]

#### 5、css样式如何实现半圆等 ####

border-radius的顺序是 左上 右上 右下 左下

.div{
        
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      background-color: red;
      border-radius: 50%;
    }
    .div2{
        
      width: 100px;
      height: 50px;
      border: 1px solid #000;
      background-color: red;
      /* border-radius的顺序是 左上 右上 右下 左下 */
      /* 半圆朝左，右边上下角是圆的，左边上下角的宽度设置为0 */
      /* div盒子宽度为高度的一半 */
      /* 右上和右下的宽度与高度取50或者100都没问题 */
      border-radius: 0 0 100px 100px;
    }

圆形就更简单了设置 border-radius:50%;即可。

##### 效果图： #####

![在这里插入图片描述][33163e8dd0bc4dafaf9c35d6281f92bc.png_pic_center]

#### 6、css样式如何将图片置于元素最上面 ####

在css中，可以利用“z-index”属性将图片置于元素最上面，该属性用于设置元素的堆叠顺序，属性的值越大，元素显示的顺序也就越靠前，语法为“图片元素\{z-index:number;\}”。

.div image{
        
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      border-radius: 50%;
      z-index: 0;
    }
    image{
        
      position: absolute;
      top: 0px;
      left: 0px;
      width: 50px;
      height: 50px;
      z-index: 1;
    }

##### 效果图： #####

![在这里插入图片描述][5f9b1ffc34004f8b9053465fe714be54.png_pic_center]

#### 7、css样式，字体阴影效果 ####

##### ①盒子阴影 #####

box-shadow: h-shadow v-shadow blur spread color inset;

*  h-shadow 必需的。水平阴影的位置。允许负值
 *  v-shadow 必需的。垂直阴影的位置。允许负值
 *  blur 可选。模糊距离
 *  spread 可选。阴影的大小
 *  color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
 *  inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

<view class="container">
      <view class="shadow">阴影</view>
    </view>
    
    
    .shadow{
        
      width:200rpx;
      height:200rpx;
      background-color: #000000;
      box-shadow: 40px 80px 20px 30px #00FF00;
    }

效果图：  
![在这里插入图片描述][38c6d7cfe2a24932b987525810e8f64a.png_pic_center]

##### ②文字阴影 #####

text-shadow:hpx vhpx rpx color

*  hpx 水平偏移
 *  vpx 垂直偏移
 *  rpx 模糊度
 *  color 阴影颜色
 *  多个阴影用逗号隔开

<view class="container">
      <view class="shadow">阴影</view>
    </view>
    
    
    .shadow{
        
      font-size:100rpx;
      text-shadow: 10px 10px 10px #09ff00;
    }

效果图：  
![在这里插入图片描述][82f10c0845624c25bb0c94b6257afe06.png_pic_center]

#### 8、padding-bottom: env(safe-area-inset-bottom);的作用 ####

##### 示例一：自定义tabBar #####

page\{  
width: 100%;  
height: 50px;  
position: fixed;  
botttom: env(safe-area-inset-bottom);  
background-color: \#108ee9;  
\}  
编译到IOS端，正常显示为：固定在底部安全距离之上的tab条  
编译到Android机器，fixed布局失效，悬浮在顶部

##### 示例二：自定义全屏遮罩 #####

page\{  
width: 100%;  
position: fixed;  
top: 0;  
botttom: env(safe-area-inset-bottom);  
background-color: rgba(0,0,0,0.3);  
\}  
编译到IOS端，正常显示为：遮盖除底部安全距离之外的区域，黑色半透明遮罩层  
编译到Android机器，没掉，需改为bottom: 0，方可正常显示

#### 9、css样式基础文字样式 ####

##### ① color：属性值；文字颜色 #####

其中属性值包括颜色名称，如red、blue、yellow等等；

##### ②font-family:宋体；文字类型 #####

font-family后可以写三种字体样式，以应对不同浏览器的适用。若设置的样式对应的浏览器都不支持，那么将使用对应浏览器默认的样式。这里的样式值可以写中文如：宋体、楷体等等，也可以是英文如Time New Roman

##### ③font-size:18px; 文字大小 #####

font-size后直接跟学要设置的字体大小，这里的值可以是数字，数字加单位，也可以是英文，如：small、large、medium等等

##### ④ font-weight:400; 文字粗细 #####

font-weight表示字体的粗细，可以设置100、200~700,其中400表示默认粗细，700表示加粗和bold相同作用，还可以是bold，lighter，normal等等

##### ⑤font-style:normal; 字体样式 #####

font-style可以填的属性包括normal，italic，oblique。后两个表示斜体，但主要使用italic，oblique支持的浏览器比较少

##### ⑥line-height:18px; 字体行高 #####

可以给文字段落设置行高，一般行高要求设置的值要大于文字的大小，防止文字被挤压变形。字体行高还有一个作用就是可以让文字垂直居中显示。

##### ⑦letter-spacing: 0.1em; 设置字体间距属性 #####

##### ⑧text-align:center; 文本对齐 #####

文本对齐可以填入的值包括center，left，right，justify（两端对齐），inherit(表示继承自父元素的text-align的样式）

##### ⑨ text-indent：2rem; 文本间距 #####

文本缩进，text-indent：2rem;正数表示文本向右缩进的距离，反之负数表示文本向左缩进的距离

#### 10、white-space: nowrap;作用 ####

white-space:nowrap强制同一行内显示所有文本文字，让所有文字内容中一排显示不换行。  
normal 默认。空白会被浏览器忽略。  
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre标签。  
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到  
标签为止。  
pre-wrap 保留空白符序列，但是正常地进行换行。  
pre-line 合并空白符序列，但是保留换行符。  
inherit 规定应该从父元素继承 white-space 属性的值。

#### 11、CSS position(定位)属性 ####

##### ①CSS position(定位)属性 #####

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”， “top”， “right” 以及 “bottom” 属性进行规定。

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”， “top”，“right” 以及 “bottom” 属性进行规定。

relative：生成相对定位的元素，相对于其正常位置进行定位。因此，“left: 20px” 会向元素的 left 位置移动 20 像素。

static：默认值。没有定位，元素出现在正常的流中（忽略 top， bottom， left， right 或者 z-index 声明）。

inherit：规定应该从父元素继承 position 属性的值。

**CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。**

**什么是文档流(normal flow)**  
normal flow 国内多译为文档流；  
窗体自上而下分成一行一行，并在每行中按从左至右的顺序排放元素；  
每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端，若当前行容不下，则另起一行再浮动；  
内联元素也不会独占一行，几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素；  
有三种情况将使得元素脱离normal flow而存在，分别是 float，absolute ，fixed，但是在IE6中浮动元素也存在于normal flow中。

##### ②position: static #####

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。static是position的默认值

<view class="container">
      <view class="content">static是position的默认值</view>
    </view>
    
    /* index.wxss */
    .container{
        
      background-color: #868686;
      width: 100%;
      height: 300px;
    }
    .content{
        
      background-color: yellow;
      width: 100px;
      height: 100px;
      position: static;
      left: 10px;/* 这个left没有起作用 */
    }

对 content 的 position 设定 static 后，left就失效了，而元素（content）就以正常的 normal flow 形式呈现。  
**效果图：**  
![在这里插入图片描述][94f534c3d4914c7e9202bed9a52f42cf.png_pic_center]

##### ③position: relative #####

该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-\*-group, table-row, table-column, table-cell, table-caption 元素无效。相对于normal flow中的原位置来定位。  
这个属性是指元素会依据自己原先的位置为基准进行偏移，但是其原先位置依然会存在，不会干扰相邻的元素。

<view class="container">
      <view class="content"></view>
      <view class="content1"></view>
      <view class="content2"></view>
    
    </view>
    
    /* index.wxss */
    .container {
        
      background-color: #868686;
      width: 100%;
      height: 300px;
    }
    .content {
        
      background-color: yellow;
      width: 100px;
      height: 100px;
    }
    .content1 {
        
      background-color: red;
      width: 100px;
      height: 100px;
      position: relative;/* 这里使用了relative  */
    }
    .content2 {
        
      background-color: black;
      width: 100px;
      height: 100px;
    }

**效果图：**  
![在这里插入图片描述][a59ecb092c2f41d590521ecb3fc0be9b.png_pic_center]

这是没有设置left、top等属性时，正常出现在normal flow中的位置。  
接着添加left、top：可以看到，元素（content1）的位置相对于其原位置（normal flow中的正常位置）进行了移动。

.content {
        
        background-color: yellow;
        width: 100px;
        height: 100px;
        position: relative;
        /* 这里使用了relative  */
        left: 20px;
        top: 20px;
        /* 这里设置了left和top */
    }

**效果图：**  
![在这里插入图片描述][4ec7129f46c748ffac734648c7c84aee.png_pic_center]

##### ④position: absolute #####

不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margin），且不会与其他边距合并。  
生成绝对定位的元素，其相对于 static 定位以外的第一个父元素进行定位,会脱离normal flow。注意：是除了static外

<view class="container">
      <view class="content"></view>
    </view>
        
    /* index.wxss */
    .container {
        
      background-color: #868686;
      width: 100%;
      height: 300px;
      margin-top: 50px;
    }
    .content {
        
      background-color: red;
      width: 100px;
      height: 100px;
      position: absolute;
      top: 10px;
    }

**效果图：**  
![在这里插入图片描述][80d03f09e5084e348c79b640d0db976d.png_pic_center]

因为 content 的父元素 container 没有设置 position，默认为 static，所以找到的第一个父元素是 body，可以看成是元素（content）相对于 body 向下移动10px。  
绝对定位，当有一级父对象（无论是父对象还是祖父对象）的Position属性值为Relative或者absolute时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的以父级元素为基础进行定位，若没有父级定位则以浏览器为基准进行定位 并且会影响相邻的元素

##### ⑤position: fixed #####

不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。  
fixed相对于window固定，滚动浏览器窗口并不会使其移动，会脱离normal flow。

<view class="container">
      <view class="content"></view>
    </view>
    
    /* index.wxss */
    .container {
        
      background-color: #868686;
      width: 100%;
      height: 300px;
      margin-top: 50px;
    }
    .content {
        
      background-color: red;
      width: 100px;
      height: 100px;
      position: fixed; /* 这里使用了fixed */
      left: 200px
    }

**效果图：**  
![在这里插入图片描述][615c097665c44fed8f125e73b09a7377.png_pic_center]

##### ⑥position: sticky #####

盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky对 table元素的效果与 position: relative 相同。

/* 顶部logo和导航区 */
    .top {
        
        width: 100%;
        height: 78px;
        background: #58bc58;
        position: sticky;
        top: 0;
        /* 设置层级，防止被其他定位元素覆盖 */
        z-index: 300;
        /* 给导航栏加上阴影，显得更加真实 */
        box-shadow: 0 0 15px rgb(0 0 0 / 80%);
    }

**使用案例效果图：**  
![在这里插入图片描述][ef0c5d2dd371435dae3fc94c8a8a498a.png_pic_center]

##### ⑦position: inherit #####

规定应该从父元素继承 position 属性的值。

<view class="container">
      <view class="content"></view>
    </view>
    
    /* index.wxss */
    .container {
        
      position: fixed;
      left: 0;
      top: 0;
      background-color: #868686;
      width: 100%;
      height: 100px; /* 注意 */
    }
    
    .content {
        
      position: inherit;
      /*  继承了父元素的fixed;此时就会相对于浏览器定位;不会相对于父元素定位 */
      background-color: red;
      width: 100px;
      height: 100px;
      top: 100px;
      left: 200px
    }

##### ⑧总结 #####

position: relative;不会脱离文档流，position: fixed，position: absolute会脱离文档流  
position: relative; 相对于自己在文档流中的初始位置偏移定位。  
position: fixed; 相对于浏览器窗口定位。  
position: absolute; 是相对于父级非 position:static 浏览器定位。  
如果没有任何一个父级元素是非 position:static属性，则会相对于文档定位。  
这里它的父级元素是包含爷爷级元素、祖爷爷级元素、祖宗十八代级元素的。任意一级都可以。  
如果它的父级元素和爷爷级元素都是非 position:static 属性，则，它会选择距离最近的父元素。

#### 12、CSS display:flex（弹性布局） ####

**Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。**  
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。  
它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。

##### ①flex布局的基本概念 #####

![在这里插入图片描述][3bd3901e7a724a2ba222afada69ac0d9.png_pic_center]

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex子项（flex item），简称"子项"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。子项默认沿主轴排列。单个子项占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。  
**容器属性**  
属性名称 属性含义  
flex-direction 容器内子项的排列方向(默认横向排列)  
flex-wrap 容器内子项换行方式  
flex-flow 以上两个属性的简写方式  
justify-content 子项在主轴上的对齐方式  
align-items 子项在交叉轴上如何对齐  
align-content 定义了多根轴线的对齐方式。如果子项只有一根轴线，该属性不起作用。  
**元素属性**

*  order
 *  flex-grow
 *  flex-shrink
 *  flex-basis
 *  flex
 *  align-self

##### ②**flex-direction: row; 布局的排列方向 （主轴排列方向）** #####

row ：显示为行。方向为当前文档水平流方向，默认情况下是从左往右（默认值）;  
row-reverse ：显示为行。但方向和row属性值是反的，在水平方向上为从右往左；  
column： 显示为列 方向为在垂直方向上从上到下；  
column-reverse ：显示为列。但方向和column属性值是反的。

<view class="containers">
      <view class="content">元素1</view>
      <view class="content2">元素2</view>
      <view class="content3">元素3</view>
    </view>
    
    
    /* index.wxss */
    .containers {
        
      display: flex;  /*默认*/
    }
    
    .content{
        
      background-color: red;
      width: 100px;
      height: 100px;
    }
    .content2{
        
      background-color: blue;
      width: 100px;
      height: 100px;
    }
    .content3{
        
      background-color: blueviolet;
      width: 100px;
      height: 100px;
    }

**效果图：**  
![在这里插入图片描述][98a5888b319c4d88a0099a19b47acf8b.png_pic_center]

**修改后：**

.containers {
        
      display: flex;
      flex-direction: column; 
    }

**效果图：**  
![在这里插入图片描述][846a2a56cd2c438aa11cfc6d7df0358b.png_pic_center]

##### ③flex-wrap : nowrap; 是否进行换行处理。此语法是加在父元素身上的。 #####

nowrap：默认值，不换行处理；  
wrap： 换行处理；  
wrap-reverse： 反向换行；  
flex-flow : flex-direction flex-wrap 复合写法 (是有顺序的，顺序一定不能乱)。  
举个例子：比如容器宽度为100%，容器中有3个宽度为150px的元素，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就不到150px了，而非我们自己设置的150px。

<view class="containers">
      <view class="content">元素1</view>
      <view class="content2">元素2</view>
      <view class="content3">元素3</view>
    </view>
    
    /* index.wxss */
    .containers {
        
      display: flex;
      flex-wrap: wrap;
    }
    
    .content{
        
      background-color: red;
      width: 150px;
      height: 100px;
    }
    .content2{
        
      background-color: blue;
      width: 150px;
      height: 100px;
    }
    .content3{
        
      background-color: blueviolet;
      width: 150px;
      height: 100px;
    }

**换行效果图：**  
![在这里插入图片描述][fccd9324b75e4595b25ed3c6e5a4a6ce.png_pic_center]

**不换行效果图（** flex-wrap: nowrap;**）**  
![在这里插入图片描述][a8604b3ef4744ec686602fd0832c2e36.png_pic_center]

##### ④justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。 #####

flex-start ： 左对齐（默认）；  
flex-end ： 右对齐；  
center ： 居中；  
space-between : 两端对齐，项目之间的间隔都相等；  
space-around : 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。  
space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

<view class="containers">
      <view class="content">元素1</view>
      <view class="content2">元素2</view>
      <view class="content3">元素3</view>
    </view>
    
    /* index.wxss */
    .containers {
        
      display: flex;
      justify-content: center;
    }
    
    .content{
        
      background-color: red;
      width: 100px;
      height: 100px;
    }
    .content2{
        
      background-color: blue;
      width: 100px;
      height: 100px;
    }
    .content3{
        
      background-color: blueviolet;
      width: 100px;
      height: 100px;
    }

**居中效果图：**

![在这里插入图片描述][bc4f0479733a4f439bd87f5dda097f65.png_pic_center]

##### ⑤align-items : 每一行中的子元素上下对齐方式。 #####

stretch：如果项目未设置高度或设为auto，将占满整个容器的高度（默认值）  
flex-start：顶部对齐  
center：居中对齐  
flex-end：底部对齐  
baseline：项目的第一行文字的基线对齐

<view class="containers">
      <view class="content">元素1</view>
      <view class="content2">元素2</view>
      <view class="content3">元素3</view>
    </view>
    
    /* index.wxss */
    .containers {
        
      display: flex;
      align-items: center;
      height: 360px;
      background: gold;
    }
    
    .content{
        
      background-color: red;
      width: 100px;
      height: 100px;
    }
    .content2{
        
      background-color: blue;
      width: 100px;
      height: 100px;
    }
    .content3{
        
      background-color: blueviolet;
      width: 100px;
      height: 100px;
    }

**居中对齐效果图**  
![在这里插入图片描述][a2c66a255fa940b7a9e7e19d5c418772.png_pic_center]

##### ⑥align-content : #####

与justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)  
用于控制多行项目的对齐方式，如果项目只有一行则不会起作用，需设置flex-wrap: wrap；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。

stretch：轴线占满整个交叉轴（默认值）；  
flex-start：与交叉轴的起点对齐；  
flex-end：与交叉轴的终点对齐；  
center：与交叉轴的中点对齐；  
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布；  
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍；

<view class="containers">
      <view class="content">元素1</view>
      <view class="content2">元素2</view>
      <view class="content3">元素3</view>
      <view class="content4">元素4</view>
      <view class="content5">元素5</view>
    </view>
    
    /* index.wxss */
    .containers {
        
      display: flex;
      flex-wrap: wrap;
      align-content:center;
    }
    
    .content{
        
      background-color: red;
      width: 150px;
      height: 100px;
    }
    .content2{
        
      background-color: blue;
      width: 150px;
      height: 100px;
    }
    .content3{
        
      background-color: blueviolet;
      width: 150px;
      height: 100px;
    }
    .content4{
        
      background-color: black;
      width: 150px;
      height: 100px;
    }
    .content5{
        
      background-color: burlywood;
      width: 150px;
      height: 100px;
    }

**中点对齐效果图：**  
![在这里插入图片描述][c4b0eff0342e4b15943cd40dc508bb93.png_pic_center]

##### ⑦flex-shrink #####

项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。  
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。  
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。  
负值对该属性无效

/* index.wxss */
    .containers {
        
      display: flex;
      flex-shrink: 0;
    }

**效果图：**  
![在这里插入图片描述][af271beb1b9b46a3bc15f40e2c04091b.png_pic_center]

#### 13、css居中实现方式 ####

使用flex布局设置居中。  
使用flex 时也能通过给子项设置margin: auto实现居中。  
使用绝对定位的方式实现水平垂直居中。  
使用tabel-cell实现垂直居中。  
使用grid设置居中。  
使用grid时还能通过给子项设置margin: auto实现居中。

##### ①flex布局设置居中 #####

利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式

*  display: flex;写在父元素上这就是定义了一个伸缩容器
 *  justify-content 主轴对齐方式，默认是横轴
 *  align-items 纵轴对齐方式，默认是纵轴

<view class="containers">
      <view class="content">元素1</view>
    </view>
        
    /* index.wxss */
    .containers {
        
      display: flex;
      align-items: center; /*// 纵轴对齐方式，默认是纵轴 子元素垂直居中 */
      justify-content: center; /*//纵轴对齐方式，默认是纵轴 */
    
      height: 360px;
      border: 1px solid red;
    }
    .content{
        
      width: 100px;
      height: 100px;
      background: red;
    }

**效果图：**

![在这里插入图片描述][f8fb0f5713864f0c904fc9d40928817f.png_pic_center]

##### ②flex-给子项设置 #####

第一种方式是给父盒子设置属性，这一种是给子盒子设置margin: auto实现居中。给容器设置 display: flex; 子项设置 margin: auto;

<view class="containers">
      <view class="content">元素1</view>
    </view>
    
    /* index.wxss */
    .containers {
        
      display: flex;
    
      height: 360px;
      border: 1px solid red;
    }
    .content{
        
      margin: auto; /* // 水平垂直居中 */
      
      width: 100px;
      height: 100px;
      background: red;
    }

**效果图-同上**

##### ③绝对定位 #####

使用绝对定位的方式实现水平垂直居中。容器设置position: relative。子元素设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);

优点就是不用关心子元素的长和宽，但是这种方法兼容性依赖translate2d的兼容性

<view class="containers">
      <view class="content">元素1</view>
    </view>
    
    /* index.wxss */
    .containers {
        
      position: relative;
    
      height: 360px;
      border: 1px solid red;
    }
    .content{
        
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      
      width: 100px;
      height: 100px;
      background: red;
    }

**效果图-同上**

##### ④tabel-cell实现垂直居中 #####

css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中。  
而且tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了：  
:使用tabel-cell实现垂直居中,容器设置 display: table-cell;  
:vertical-align: middle属性设置元素的垂直对齐方式  
:子元素如果是块级元素，直接使用左右margin:auto实现水平居中。如果是行内元素，给容器设置text-align: center  
利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素inline, 内联块inline-block, 内联表inline-table, inline-flex元素水平居中都有效。

<view class="containers">
      <view class="content">元素1</view>
    </view>
    
    /* index.wxss */
    .containers {
        
      display: table-cell;
      vertical-align: middle;  /*// 设置元素在垂直方向上的对齐方式 */
      text-align: center;
    
      height: 360px;
      border: 1px solid red;
    }
    .content{
        
      display: inline-block;
    
      width: 100px;
      height: 100px;
      background: red;
    }

**效果图-同上**

##### ⑤grid设置居中 #####

使用grid设置居中。给容器设置 display: grid; align-items: center; justify-content: center;  
通过给容器设置属性，达到居中效果,但是这种方式兼容性较差，不推荐。

<view class="containers">
      <view class="content">元素1</view>
    </view>
    
        /* index.wxss */
    .containers {
        
      display: grid;
      align-items: center;
      justify-content: center;
    
      height: 360px;
      border: 1px solid red;
    }
    .content{
        
      width: 100px;
      height: 100px;
      background: red;
    }

**效果图-同上**

### 待更新完成 ###

![在这里插入图片描述][b38787d0773a4e4aaa27c2f598f9ff3e.jpeg_pic_center]

> 各位看官》创作不易，点个赞！！！  
> 诸君共勉：万事开头难，只愿肯放弃。

免责声明：本文章仅用于学习参考

[5f12e3f3c016496a9574a3d484cf5934.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c214408d6baf4721a9ec79efe8ae0192.png
[33163e8dd0bc4dafaf9c35d6281f92bc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/60d400a7b48c415b812e69198b9e520f.png
[5f9b1ffc34004f8b9053465fe714be54.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/e672e2a2dd6d4691a7e7b8455c1d698f.png
[38c6d7cfe2a24932b987525810e8f64a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/24a42fc4e5be422393fbd97f6eb0704c.png
[82f10c0845624c25bb0c94b6257afe06.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/40acddfaef1b4900a3084a8bc318507e.png
[94f534c3d4914c7e9202bed9a52f42cf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/efd2e25e84ed4556b5f56c197a408103.png
[a59ecb092c2f41d590521ecb3fc0be9b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/35cc9bf08626485486d96a078ab41d14.png
[4ec7129f46c748ffac734648c7c84aee.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/84861fef3cd44b4d9f1f2e8ae5d9c09b.png
[80d03f09e5084e348c79b640d0db976d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b072ee7e3a024ffca2fe03de488b3f35.png
[615c097665c44fed8f125e73b09a7377.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/7e9ae429d9884c9c8ec64b0bdd421209.png
[ef0c5d2dd371435dae3fc94c8a8a498a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/3c55a63af8404a36bc3ded6718f59c6a.png
[3bd3901e7a724a2ba222afada69ac0d9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/03cff0f27b34403e97cf6f656a73d930.png
[98a5888b319c4d88a0099a19b47acf8b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/21ac7d25389840be90684401335250a3.png
[846a2a56cd2c438aa11cfc6d7df0358b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/daf8a4cb73c44028aeca03af026f601e.png
[fccd9324b75e4595b25ed3c6e5a4a6ce.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c22cbf0730ea48e390d1b00903b53788.png
[a8604b3ef4744ec686602fd0832c2e36.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/34fef29c5c494f0887a8182d5045d4ce.png
[bc4f0479733a4f439bd87f5dda097f65.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8ebaedddec594f68b33851dbdcac6f4b.png
[a2c66a255fa940b7a9e7e19d5c418772.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/89ec4c9022bf46289062a1c9cd152a23.png
[c4b0eff0342e4b15943cd40dc508bb93.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/da223df028c24238acf28cd214f990bf.png
[af271beb1b9b46a3bc15f40e2c04091b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/9c3a59f5e44a4c2dae9121e1a62da3da.png
[f8fb0f5713864f0c904fc9d40928817f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/6002ded381a5412ca19edecaf43c0490.png
[b38787d0773a4e4aaa27c2f598f9ff3e.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/9339a1a3b2bb4e73bab5e7240804bccd.jpeg