首页 > 其他分享 >flex 父元素属性

flex 父元素属性

时间:2022-09-20 21:56:20浏览次数:60  
标签:flex 元素 height width background rem div 属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     /* flex-direction */
     /* div{
        display:flex;
        width: 16rem;
        height: 8rem;
        background: pink;
        flex-direction: column-reverse;
     }
     div span{
        width: 4rem;
        height: 2.6667rem;
        background: red;
     } */
     /* justify-content */
     /* div{
        display:flex;
        width: 21.3333rem;
        height: 8rem;
        background: pink;
        flex-direction: row;
        justify-content: space-between;
     }
     div span{
        width: 4rem;
        height: 2.6667rem;
        background: red;
     } */
     /* flex-wrap */
     /* div{
        display:flex;
        width: 13.3333rem;
        height: 8rem;
        background: pink;
        flex-direction: row;
        flex-wrap: wrap;
     }
     div span{
        width: 4rem;
        height: 2.6667rem;
        background: red;
     } */

     /* align-items*/
     /* div{
        display:flex;
        width: 13.3333rem;
        height: 8rem;
        background: pink;
        flex-direction:row;
        justify-content: center;
        align-items:center;
     }
     div span{
        width: 4rem;
        height: 2.6667rem;
        background: red;
     } */

     /* align-content*/
     /* div{
        display:flex;
        width: 21.3333rem;
        height: 16rem;
        background: pink;
        flex-direction:row;
        flex-wrap: wrap;
        align-content: stretch;
     }
     div span{
        width: 4rem;
        background: red;
        margin: .2667rem;
     } */

     /* flex-flow*/
     div{
        display:flex;
        width: 21.3333rem;
        height: 8rem;
        background: pink;
        /* flex-direction: column;
        flex-wrap: wrap; */
        flex-flow:column wrap;

     }
     div span{
        width: 4rem;
        height: 2.6667rem;
        background: red;
     }
</style>
<body>
    <!-- flex-direction -->
    <!-- <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div> -->
    <!-- justify-content -->
    <!-- <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div> -->
    <!-- flex-wrap-->
    <!-- <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div> -->
    <!--align-items-->
    <!-- <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div> -->
    <!--align-content-->
    <!-- <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div> -->
    <!--flex-flow-->
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>
</html>
<!-- 
设置主轴方向
设置子元素是跟着主轴来排序的方式
默认的主轴是X 轴 Y轴是侧轴
flex-direction:{
    row         默认值    从左到右
    row-reverse 翻转      从右到左

    主轴是Y 轴 X轴是侧轴
    column  设置主轴方向    从上到下
    column-reverse 翻转   从下到上
}
设置主轴上的子元素 排序
默认从头开始排序
justify-content:{
    flex-start 默认值   从头开始排序 如果主轴是X轴,则是从左到右
    flex-end           从尾开始排序
    center             居中
    space-around       平均分配
    space-between       两边贴边 剩余分配给中间
}
设置主轴上的子元素换行
默认不换行
flex-wrap:{
    nowrap  默认不换行
    wrap    换行
}
设置侧轴上的子元素水平垂直居中配和 justify-content:center
使用于单行
align-items:{
     center    居中
     stretch   拉伸高度  注意:子元素不能设置高度不然不生效
}

设置侧轴上的子元素排序多行 注意 要和flex-wrap:wrap
使用于多行
align-content:{
    flex-start;     默认在侧轴从头开始排序
    flex-end;       在侧轴的从尾开始开始排序
    center;         居中
    space-around;   子项在侧轴平均分配剩下空间
    space-between;  子项在侧轴先分布在两头,再平分剩余空间
    stretch;        设置子项高度平分父元素的高度    注意:子元素不能设置高度不然不生效
}

该属性是  flex-direction 和 flex-wrap 简写
flex-flow:{
        flex-flow:column wrap; ==  flex-direction: column; flex-wrap: wrap;
}
        
 -->

 

标签:flex,元素,height,width,background,rem,div,属性
From: https://www.cnblogs.com/zxh-bug/p/16712686.html

相关文章