弹性布局_弹性布局属性-CSDN博客

本文链接：https://blog.csdn.net/Charminglsy/article/details/90030848

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*固定模式布局   流动布局100%   弹性布局  flex  （手机移动端  类似于table）*/

        /*
         display:flex;  把容器转化为弹性布局
         flex-direction: column;  规定里面的元素按照什么方式来布局  row  column  翻转
         align-items  子元素在y 轴上对其的方式  center 居中  flex-end  底边  flex-start  上边  stretch 垂直拉伸
         justify-content x轴对齐   center 居中  flex-end 右边对齐  flex-start  左边对齐  space-between 左右两边对齐 中间平分pace-around  均分所有空白
         flex-wrap: wrap;  控制行里面  进行换行
         align-content: space-between;  在行里面使用 行留白的时候有效果
         flex: 1; 行里面的元素进行分配空间  按等份分配
        */
        .fl{
            width: 400px;
            height: 600px;
            border: 1px solid red;
            margin: auto;
            display:flex;
            flex-direction: column;
        }
        .row,.row1,.row2{
            width: 400px;
            height: 100px;
            border-bottom: 1px solid blue;
            display: flex;/*转为flex*/
            flex-direction: row;
           /* align-items  子元素在y 轴上对其的方式  center 居中  flex-end  底边  flex-start  上边  stretch 垂直拉伸*/
           /* align-items:stretch;*/
            /*justify-content x轴对齐   center 居中  flex-end 右边对齐  flex-start  左边对齐  space-between 左右两边对齐 中间平分
            space-around  均分所有空白*/
           /* justify-content: center;
            align-items: center;*/

            flex-wrap: wrap;
            /*当前行里面有剩余的空白  */
            align-content: space-between;

        }
        .row>div{
            width: 50px;
            height: 30px;
            border: 1px solid black;
        }
        .row1>div{
            /*给每个元素分配空间  flex*/
           /* flex: 10;*/
            height: 30px;
            border: 1px solid black;
        }
        .row1>div:nth-child(1){
            flex: 1;
        }
        .row1>div:nth-child(2){
            flex: 2;
        }
        .row1>div:nth-child(3){
            flex: 3;
        }
        .row1>div:nth-child(4){
            flex: 1;
        }


        .row2>div{
            width: 100px;
            height: 40px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
  <div class="fl">
     <div class="row">
         <div>1</div>
         <div>2</div>
         <div>3</div>
         <div>4</div>
         <div>5</div>
         <div>6</div>
         <div>7</div>
         <div>8</div>
         <div>9</div>
         <div>10</div>
     </div>
      <div class="row1">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
      </div>
      <div class="row2">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
      </div>
  </div>
</body>
</html>

css手机布局自适应

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--
    viewport 视口
    width=device-width  宽度等于屏幕的宽
    initial-scale=1.0  伸缩比例为1.0
    maximum-scale=3.0  最大伸缩比例
    minimum-scale=1.0  最小伸缩比例
    user-scalable=no 禁止用户缩放
    -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3.0,minimum-scale=1.0,user-scalable=no">
    <title></title>
</head>
<body>
<div class="b">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<style>
    *{
        margin: 0;
    }
    .b{
        width: auto;
        height: 300px;
        display: flex;
        flex-direction: row;
    }
    .b>div{
        flex: 1;
        height: 50px;
        border: 1px solid red;
    }
</style>
</body>
</html>

固定屏幕适应手机屏幕

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=300,maximum-scale=5.0,minimum-scale=1.0,user-scalable=no">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .b{
            margin: auto;
            width: 300px;
            height: 500px;
            border: 1px solid red;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="b">
        1
    </div>
</body>
</html>