布局分类

百分比布局

（早期移动端布局，也叫流式布局）

移动端和pc端区别

PC端

a.定版心

b.页面中的元素宽度和高，几乎都是使用px单位，定死大小
移动端

a.不会定版心

b.元素的大小，很少使用px单位，都是使用相对长度单位百分比单位，rew vw vh ；屏幕越大，元素也越大

早期布局弊端：不够方便，一旦增加了元素的方式，对应的width的代码要重新技术

Flex布局（主流的移动端布局）

好处

能够更灵活快速的开发网页，避免浮动脱标的问题，非常适合结构优化

用法

display fix属性写df

div中的子元素发生一些改变

设置flex的盒子称之为父项
盒子里面的子元素称之为子项

具体变化

flex布局：**display fix要给父元素增加, **子元素发生变化，孙子级不会发生变化

变化1：不再区分什么块级元素行内元素和行内块元素，全部都可以设置宽高

变化2：子元素的宽度和高度是默认的。宽度是由内容撑开，高度等于父元素高度

变化3：子元素设置浮动没有效果; 使用定位，margin和transform都是有效果的

变化4：默认情况下，子元素的总宽度大于父元素的宽度，也不会换行！flex 不会换行，只会压缩自身的宽度而已

<title>体验flex布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box {
      width: 400px;
      height: 400px;
      background-color: pink;
      margin: 200px auto;
      display: flex;
    }
    /* flex布局：display fix要给父元素增加,子元素发生变化
    变化1：不再区分什么块级元素行内元素和行内块元素，全部都可以设置宽高 
    变化2：子元素 默认的宽度和高度
    宽度是由内容撑开
    高度等于父元素高度
    变化3：子元素设置浮动没有效果;
           使用定位，margin和transform都是有效果的
    变化4：默认情况下，子元素的总宽度大于父元素的宽度，也不会换行！
    flex 不会换行，只会压缩自身的宽度而已
     */
    .son {
      float: right;
      width: 100px;
      height: 100px;
      background-color: skyblue;
      /* position: absolute;
      top: 0%;
      left: 0%; */
      /* margin-top: 100px; */
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="son">111</div>
    <div class="son">222</div>
    <div class="son">333</div>
    <div class="son">444</div>
    <div class="son">111</div>
    <div class="son">222</div>
    <div class="son">333</div>
    <div class="son">444</div>
    <div class="son">111</div>
    <div class="son">222</div>
    <div class="son">333</div>
    <div class="son">444</div>
</div>
</body>

flex布局组成部分

主轴=X 轴(默认)=水平方向

设置主轴对齐方式

justify-content属性

左对齐: flex-start (默认值,起点开始依次排列)
右对齐: flex-end
居中: center
先两侧对齐,剩下平分存放: justify-content： space-between (sb)
间隔存放。两侧的空间小于中间的空间：justify-content：space-around (sa)
绝对平均：justify-content：space-evenly（sv）

侧轴=Y轴=垂直方向

设置侧轴对齐方式（设置元素上下的位置）

单行对齐：align-items 属性**简写：ai*

上对齐： align-items: flex-start;
下对齐： align-items: flex- end;
居中： align-items: center;

多行对齐：align-content属性简写：ac

侧轴多行上对齐：align-content: flex-start;
侧轴多行下对齐： align-content: flex-end;
侧轴居中 align-content: center
侧轴多行先上下对齐，再间隔平分 align-content: space-between;
侧轴多行间隔存放，上下的空间小于中间的空间 align-content: space-around

侧轴多行绝对平分 align-content: space-evenly

补充：当设置了侧轴多行对齐方式之后，把子项的高度取消，显示的是子元素内容的高度！！！浏览器只会跟着你需求走，不能既铺满盒子，又要设置多行对齐，这样就和需求冲突了

 <title>设置侧轴多行对齐方式</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box {
      width: 400px;
      height: 400px;
      background-color: pink;
      margin: 200px auto;
      display: flex;
      flex-wrap: wrap;
      align-content:center;
    }
    .son {
      width: 100px;
      /* height: 100px; */
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="son">111</div>
    <div class="son">222</div>
    <div class="son">333</div>
    <div class="son">444</div>
    <div class="son">555</div>
    <div class="son">666</div>
    <div class="son">777</div>
    <div class="son">888</div>
    <div class="son">999</div>
</div>
</body>

元素水平垂直居中

**justify-content: center;

align-items: center**

<title>元素水平垂直居中</title>
   <style>
     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
     .box {
       width: 400px;
       height: 400px;
       border: 1px solid #000;
       margin: 100px auto;
       display: flex;
       /* 主轴对齐方式和侧轴对齐方式要给父元素写 */
       justify-content: center;
       align-items: center;
     }
     .son {
       width: 200px;
       height: 200px;
       background-color: pink;
     }
   </style>
</head>
<body>
  <div class="box">
    <div class="son"></div>
  </div>
</body>

设置换行属性

** flex-wrap：wrap; **

<title>设置换行</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box {
      width: 400px;
      height: 400px;
      background-color: pink;
      margin: 200px auto;
      display: flex;
      /* 默认情况下不换行: nowrap */
      flex-wrap: wrap;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="son">111</div>
    <div class="son">222</div>
    <div class="son">333</div>
    <div class="son">444</div>
    <div class="son">555</div>
    <div class="son">666</div>
</div>
</body>

设置主轴方向

flex-direction属性

1.从左往右：row 默认水平方向

2.从右往左：row-reverse 比较少用

3.从上到下: column; 会用

4.从下往上：column-reverse 比较少用

<title>设置主轴方向</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box {
      width: 400px;
      height: 400px;
      background-color: pink;
      margin: 200px auto;
      display: flex;
      /* 修改主轴方向 flex-direction
      1.从左往右：row 默认 水平方向
      2.从右往左：row-reverse 比较少用
      3.从上到下: column; 会用
      4.从下往上：column-reverse 比较少用
      */
      flex-direction: column;
      flex-wrap: wrap;
      /* 设置主轴对齐方向 */
      justify-content: space-between;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="son">111</div>
    <div class="son">222</div>
    <div class="son">333</div>
    <div class="son">444</div>
    <div class="son">555</div>
    <div class="son">666</div>
    <div class="son">777</div>
    <div class="son">888</div>
    <div class="son">999</div>
</div>
</body>

注意点

flex是可以修改主轴方向，当主轴方向修改了之后，设置主轴对齐属性，效果也会跟着发生改变（justify-content、align-items）

子项默认的宽度是由内容撑开；默认的高度等于父项的高

当主轴方向修改之后，以上的效果反过来

子项默认的宽度等于父项的宽度；默认的高是由内容撑开

设置子项均分父项的宽度

设置子项占父项的宽度的比例: flex:1( 指的意思设置每一个盒子宽度都占一份)

<title>设置子项均分父项的宽度</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box {
      width: 400px;
      height: 400px;
      background-color: pink;
      margin: 200px auto;
      display: flex;
      flex-direction: column;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      border: 1px solid #000;
      /* 设置子项占父项的宽度的比例  */
      flex: 1; 
       /* 设置每一个盒子宽度都占一份 */
       /* 需求：想要实现第二个盒子的宽度是其他盒子的两倍？ */
    }
   .box div:nth-child(2) {
     flex: 2;
     background-color: yellowgreen;
   }
  </style>
</head>
<body>
  <div class="box">
    <div class="son">111</div>
    <div class="son">222</div>
    <div class="son">333</div>
    <div class="son">444</div>
    <div class="son">555</div>
    <div class="son">666</div>
</div>
</body>

设置文字居中

方法1：text-align和line-height

text-align: center;

line-height: 100px;

方法2：使用flex方式,

把小盒子当成父项，把文字当成子项，

使用flex设置文字居中的好处是不用手动改行高数值

<title>设置子项均分父项的宽度</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box {
      width: 400px;
      height: 400px;
      background-color: pink;
      margin: 200px auto;
      display: flex;
      flex-direction: column;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      border: 1px solid #000;
      /* 设置子项占父项的宽度的比例  */
      flex: 1; 
       /* 设置每一个盒子宽度都占一份 */
       /* 需求：想要实现第二个盒子的宽度是其他盒子的两倍？同时文字居中 */
    }
   .box div:nth-child(2) {
     flex: 2;
     background-color: yellowgreen;
     display: flex;
     justify-content: center;
     align-items: center;
   }
  </style>
</head>
<body>
  <div class="box">
    <div class="son">111</div>
    <div class="son">222</div>
    <div class="son">333</div>
    <div class="son">444</div>
    <div class="son">555</div>
    <div class="son">666</div>
</div>
</body>

子项设置侧轴对齐

**align-self: center;**用的不多

<title>子项设置侧轴对齐</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box {
      width: 400px;
      height: 400px;
      background-color: pink;
      margin: 200px auto;
      display: flex;
      /* align-items: center; */
    }
    .son {
      height: 100px;
      background-color: skyblue;
      border: 1px solid #000;
      flex: 1;
    }
   .box div:nth-child(2) {
     flex: 2;
     background-color: yellowgreen;
     /* 设置自己在侧轴上的对齐方式  用的不多 */
     align-self: center;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="son">111</div>
    <div class="son">222</div>
    <div class="son">333</div>
    <div class="son">444</div>
    <div class="son">555</div>
    <div class="son">666</div>
</div>
</body>

总结

flex属性写在父项的
1.display：fix （设置普通盒子变为flex盒子）
2.justify-content 设置主轴对齐方式，有六个（flex-start；flex-end；center；space-between；space-around；space-evenl）
3.align-items 设置侧轴单行对齐方式，有三个（flex-start；flex-end；center；）
4.align-content 设置侧轴多行对齐方式，有六个（flex-start；flex-end；center；space-between；space-around；space-evenl）
5.flex-wrap 设置换行，有两个（nowrap 默认不换行；wrap换行）
6.flex-direction 设置主轴方向，有四个（row 默认值从左到右；row-reverse 从右到左；column 常用从上到下；column-reverse 从下到上）

flex属性写在子项的
1.flex 设置子项占父项宽度（高度）的比例
2.align-self 设置子项自己在侧轴上的对齐方式有三个（flex-start；flex-end；center；）
3.子项默认的宽度是由内容撑开，高度等于父项高度，flex1 设置的子项的宽度 align-self 设置在侧轴（垂直方向）对齐
4.主轴方向改为column，子项默认的宽度等于父项宽度，高度是内容撑开，flex1 设置的子项的高度 align-self 设置在侧轴（水平方向）对齐

flex布局方式