Android父布局和子布局的height 父布局是什么

转载

mob64ca13f5c557 2024-01-28 17:43:32

文章标签 子级元素移动端基线 文章分类 Android 移动开发

1.flex布局与传统布局的优缺点

1.1 传统布局

优点：兼容性好，能很好的PC端上显示。

缺点：布局非常繁琐，费力不讨好。有局限性，在移动端上不能很完美的显示。

1.2 flex布局

优点：布局简单且在移动端上应用广泛。

缺点：PC端上的支持情况较差，IE 11或很低的版本，不支持或部分支持。

2.flex布局原理

2.1 布局原理

flex 是flexible Box的缩写，用来为盒子提供最大的灵活性，任何的盒子都可以指定为flex布局。

父盒子设为flex布局之后，子元素中的float clear vertical-align属性将会失效。

总结：通过给父盒子添加flex属性，(方法：display:flex ) 来控制其中子元素的位置和排列方式。

3.flex布局父级常见属性

3.1常见父级属性

1. flex-direction:设置主轴方向------设置容器中的子元素在容器的那个方向上堆叠

column值时子元素在flex容器中沿着y轴方向堆叠（从上到下）

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .flex{
            margin-left: 50px;
            width: 300px;
            height: 200px;
            display:flex ;
            flex-direction: column;
            border: 1px solid black;
        }
       div li {
           width: 100px;
            height: 50px;
            background-color: rgb(0, 119, 255);
            border: 1px solid black;
            margin: 10px;
       }
    </style>
</head>
<body>
    <div class="flex">
        <li></li>
        <li></li>
        <li></li>
    </div>
</body>

Android父布局和子布局的height 父布局是什么_基线

row值时子元素在flex容器中沿着x轴方向堆叠（从左到右，默认为row）

.flex{
            margin-left: 50px;
            width: 300px;
            height: 200px;
            display:flex ;
            flex-direction: row;
            border: 1px solid black;
        }

Android父布局和子布局的height 父布局是什么_基线_02

column-reverse值时子元素在flex容器中沿着y轴方向堆叠（从下到上）；设置为

row-reverse值时子元素在flex容器中沿着x轴方向堆叠（从右到左）。

2.设置主轴上子元素的排列属性：justify-content

center

.flex{
            margin-left: 50px;
            width: 300px;
            height: 200px;
            display:flex ;
            flex-direction: row;
            justify-content: center;
            border: 1px solid black;
        }

Android父布局和子布局的height 父布局是什么_移动端_03

flex-start

.flex{
            margin: 50px 50px;
            width: 300px;
            height: 200px;
            display:flex ;
            flex-direction: row;
            justify-content: flex-start;
            border: 1px solid black;
        }

Android父布局和子布局的height 父布局是什么_基线_04