CSS-flex布局-CFANZ编程社区

<!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>
        *{
            padding: 0px;
            border: 0px;  
            box-sizing: border-box;  /*将边框和边距包含到宽高*/
        }
      
       .top{
         width: 800px;
         height: 300px;
         border:1px solid black;
         display: flex;
       }
      .top .l{
        width: 300px;
        height: 100px;
        background-color: blue;
  
      }     
     
      .top .r{
        width: 300px;
        height: 100px;
        background-color:pink;
 
      }
 
    </style>
</head>
<body>
    <div class="top"> 
        <div class="l"></div>
       
        <div class="r"></div>
          </div>

</body>
</html>

给父级元素的展示效果设置为flex布局，整个flex容器里面的flex item都会沿着主轴展开

我们给三个盒子的宽设置为300px,父级盒子的宽设置为800px

<!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>
        *{
            padding: 0px;
            border: 0px;  
            box-sizing: border-box;  /*将边框和边距包含到宽高*/
        }
      
       .top{
         width: 800px;
         height: 300px;
         border:1px solid black;
         display: flex;
       }
      .top div{
        width: 300px;
        height: 100px;
        background-color: blue;
  
      }     
 
    </style>
</head>
<body>
    <div class="top"> 
        <div class="l"></div>
        <div class="c"></div>
        <div class="r"></div>
          </div>

</body>
</html>

网页呈现的效果：三个盒子的宽被挤压了

justify-content (主轴对齐方式)

flex-start

flex-end

flex-center

space-between

侧轴对齐方式

stretch

如果我没给flex items设置高度，元素就会被拉伸

center

flex-end

flex-direction (修改主轴方向)

row (默认状态)

column

flex (弹性伸缩比)

给左边一份，中间两份，右边三份

  .box{
         width: 800px;
         height: 300px;
         border:1px solid black;
         display: flex;
         flex-direction:row;
       }
      .box .l{
        width: 200px;
        height: 100px;
        background-color: blue;
        flex:1;
      }     
      .box .c{
        width: 200px;
        height: 100px;
        background-color:pink;
        flex:2; 
      }  
      .box .r{
        width: 200px;
        height: 100px;
        background-color:green;
        flex:3;
      }

网页效果：

flex-wrap (弹性盒子换行)

<!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>
      
       .box{
         width: 801px;
         height: 300px;
         border:1px solid black;
         display: flex;
         flex-wrap: wrap;
       }
      .box div{
        width: 300px;
        height: 100px;
        background-color:pink;
      }
 
    </style>
</head>
<body>
    <div class="box"> 
        <div class="l">1</div>
        <div class="c">2</div>
        <div class="r">3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
 
          </div>

</body>
</html>