css布局：弹性布局弹性布局 flexBox 简便、完整、响应式的完成各种布局子元素弹性容器有主轴和交叉轴之分

弹性布局

flexBox
简便、完整、响应式的完成各种布局

子元素

弹性容器有主轴和交叉轴之分，默认主轴为水平方向，交叉轴为垂直方向
弹性容器的子元素默认都沿着主轴排列
子容器可以设置order属性来改变它们的排列顺序，值越小越靠前
子容器默认不放大，但可以设置flex-grow:1 允许子元素放大
子容器默认可以缩小，但可以设置flex-shrink:0 来禁止子元素缩小
flex-basis:100px 设置子容器的初始尺寸
flex:0 0 100px 等同于上述456属性的简写

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul li {
        list-style: none;
        width: 200px;
        height: 100px;
   
        /* text-align: center;
        line-height: 100px; */
   
      }
      ul {
        padding: 0;
        margin: 0;
  
      }

      li {
   
      }
      .it1 {
        background-color: pink;
  
      }
      .it2 {
        background-color: rgb(113, 47, 47);
     
      }
      .it3 {
        background-color: rgb(55, 55, 159);
      }

      .it4 {
        width: 50px;
        height: 50px;
        background-color: rgb(115, 80, 80);
        /* align-self: flex-end;
        line-height: 50px; */

  
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="it1">1</li>
      <li class="it2">2</li>
      <li class="it3">3</li>
      <li class="it4">4</li>
    </ul>
  
    <div></div>
  </body>
</html>

现在要将块级元素中的文字居中对齐，要使得水平对齐的话可以在对应容器上添加 text-align: center; 如果是内容垂直居中，要设置内容物高度和父容器高度一致即可，line-height: 父容器高度;

要使得方块水平排布，可以设置为弹性布局 display:flex

子容器默认不放大，但可以设置flex-grow:1 允许子元素放大父容器有多宽，就可以扩大到多大
子容器默认可以缩小，但可以设置flex-shrink:0 来禁止子元素缩小

   flex-grow: 1;
        /* 自动伸展 */
        flex-shrink: 1;

加上这两行就可以自动缩放

6. flex-basis:100px 设置子容器的初始尺寸，和设置容器宽度冲突，在弹性布局中谷歌浏览器会采取flex-basis的设置

flex:0 0 100px 等同于上述456属性的简写

弹性容器本身

justify-content:center 控制所有子元素主轴上居中
alig-items:center 控制所有子元素交叉轴上居中
flex-direction:column 改变主轴方向为垂直方向
flex-wrap:wrap 允许子容器在主轴上换行显示
flex-flow:row wrap 是flex-direction:row和flex-wrap:wrap的简写
align-content:center 当存在多根主轴时，控制所有子元素在交叉轴上居中
justify-content:center 控制所有子元素主轴上居中
alig-items:center 控制所有子元素交叉轴上居中在弹性父容器上面加上1，2就会得到

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul li {
        list-style: none;
        width: 200px;
        height: 100px;
        text-align: center;
        line-height: 100px;
      }
      ul {
        display: flex;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 700px;
        align-items: center;
        justify-content: center;
      
      }

      li {
      }
      .it1 {
        background-color: pink;
      }
      .it2 {
        background-color: rgb(113, 47, 47);
      }
      .it3 {
        background-color: rgb(55, 55, 159);
      }

      .it4 {
        width: 50px;
        height: 50px;
        background-color: rgb(115, 80, 80);
        /* align-self: flex-start; */

        line-height: 50px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="it1">1</li>
      <li class="it2">2</li>
      <li class="it3">3</li>
      <li class="it4">4</li>
    </ul>

    <div></div>
  </body>
</html>

可以修改主轴,对弹性容器布局本身上设置 flex-direction: column;

5. flex-flow:row wrap 是flex-direction:row和flex-wrap:wrap的简写弹性父容器加上 flex-flow:row wrap

align-content:center 当存在多根主轴时，控制所有子元素在交叉轴上居中

多栏目布局

1.两栏布局 2.三栏布局

两栏布局：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .page{
      display: flex;
      height: 100vh;
    }
    .menu{
      width: 200px;
      background-color: rgb(172, 165, 165);
    }
    .content{
      flex: 1;
      background-color: rgb(60, 12, 12);
    }
  </style>
</head>
<body>
  <div class="page">
    <div class="menu"></div>
    <div class="content"></div>
  </div>
</body>
</html>

三栏布局：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .page {
        display: flex;
        height: 100vh;
      }
      .content {
        flex: 1;
        background-color: rgb(23, 143, 51);
      }
      .left {
        width: 200px;
        background-color: rgb(172, 165, 165);
        order: -1;
      }
      .right {
        width: 200px;
        background-color: rgb(60, 12, 12);
      }
    </style>
  </head>
  <body>
    <div class="page">
      <div class="content"></div>

      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

三栏布局优化点，将主体部分先加载出来，但又需要保证主体要在中间，只需在主体上添加 order: -1;

css布局 ：弹性布局

弹性布局

子元素

弹性容器本身

多栏目布局

css布局：弹性布局