移动端布局

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、flex？

二、felx布局原理

1、flex父项常见的属性

）：

• flex是弹性布局 状模型提供最大的灵活性 任何一个容器都可以指定flex布局 当我们的盒模型设置为flex布局之后
  子元素的float clear 和vertival-aligh属性将失效 伸缩布局=弹性布局=弹性布局=flex布局

采用flex布局的元素 称为flex容器 它的所有的子盒子自成为容器成员 成为flex项目

div就是flex父容器
span就是子容器中的flex项目
子容器可以横向排列也可以纵向排列
就是通过给父盒子添加flex属性 来控制子盒子的位置和排列方式

代码如下（示例）：
flex布局父项常见属性 6个

flex-direction：设置主轴的方向
flex-content:设置主轴上面子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上面的子元素的排列方式（多行）
align-items: 设置侧轴上的子元素排列方式（单行）
flex-flow: 复合属性 相当于同时设置flex-direction 和flex-wrap 
默认主轴就是x轴，水平向右 默认侧轴就是y轴,水平向下
主轴是可以变化的 就看flex-direction设置谁为主轴，剩下的就是侧轴 我们的子元素就是跟着主轴排列
row 默认从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
布局原理

justify-content 设置主轴上的子元素排列
使用这个属性先要确定好主轴是那个
flex-start: 默认值从头开始，如果主轴是x轴，则从左到右
flex-end: 从尾部开始排列
center: 在主轴居中（如果主轴是x轴则水平居中）
space-around：平分剩余空间
sapce-between: 先两边贴边 在平分剩余空间
值得注意的是justify-content可水平居中
align-aitems侧轴居中 合起来就是垂直居中

flex-wrap：默认的子元素是不换行的 如果装不开，子元素会缩小宽度 放到父元素里面
nowrap 默认值 不换行
wrap 换行

align-contetn 设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行换行）在单行下面没有效果 
 div {
            display: flex;
            width: 800px;
            height: 400px;
            /* 换行 因为有了换行 侧轴上面用控制子元素对齐方式用align-content */
            /* align-content: flex-start; */
            /* 换行使用flex-wrap:wrap */
            flex-wrap: wrap;
            /* align-content: center; */
            /* align-content: space-between; */
            align-content: space-around;
            background-color: pink;
            先换行 再平分剩余空间 效果如下1
            ailgn-wrap:wrap
            align-conter: around;
          

align-content 和align-items区别

 1. align-item使用于单行情况下 只要上对齐 下对齐 居中和拉伸
 2. align-content适用于多行单行下无效，可以设置上对齐，下对齐，居中，拉伸以及平均分配剩余空间属性
 3. 单行align-items 多行align-content
  
  flex-flow 属性是flex-dorection和flex-wrap属性的符合属性
  
  

flex布局子项常见属性

该处使用的url网络请求的数据。

---

 - flex子项目占的份数
 - align-self控制子项自己在侧轴的排列方式
 - order属性定义子项的排列顺序（前后顺序）
      
 

  flex属性
 1. flex属性定义子项目分配剩余空间，用flex来表示占的份数
 .item {
 flex:<number>; 
}
如果把盒子分成大小一致的小盒子 只需要加flex：1
如果其中一个盒子的大小不一 ，只需要子盒子：:nth-child()
flex:2或者是响应的份数 见图3
 p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: rgb(177, 162, 243);
            margin: 100px auto;
        }
        /* 不用写宽度直接分 如果要有一定的宽度 用子元素来代替  且是自适应的盒子*/
        
        P span {
            flex: 1;
        }
        
        p span:nth-child(2) {
            flex: 2;
            background-color: rgb(231, 130, 198);
        }

```c
 section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        
        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: rgb(192, 85, 192);
        }
        
        section div:nth-child(2) {
            flex: 1;
            background-color: rgb(79, 153, 175);
        }
        
        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: rgb(96, 96, 194);
        }
       
       效果图2
      
2、align-self控制子项自己在侧轴上的排列方式
     align-self可以允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items属性
     默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于strech  第二个在侧轴底部
     span:nth-child(2) {
     设置自己在侧轴上面的排列方式
     align-self: flex-end;
}
3、order属性定义项目的排列顺序
数值越小，排列越靠前，默认为0  假如是负数 则在前面
注意：和z-index不一样

背景线性渐变
语法1 

 1. background:linear-gradient(起始方向，颜色1，颜色2，……)；
 2. background:-webkit-linear-gradient(left, red, blue);
 3. background:-webkit-limear-gradient(left ,top, red, blue);

```c
在这里插入代码片

总结

提示：
效果图1

采用flex方式display:flex 和流式布局一致 但是要优于流式布局
流式布局时利用最大宽度 最小宽度 百分比