弹性盒子的理解

弹性盒子：

　　display: flex; ：是把设置此属性的这块区域（设置此属性的元素）变为弹性盒子，使得此元素的直接子元素按照从左到右的顺序一行排列

　　　　　　　　　如果盒子变小（比子元素的宽度或高度小），里面的直接子元素会随着盒子的变化而变化，同时一直保持从左往右一行排列的布局

direction ：rtl 属性为 rtl (right-to-left) 此属性是设置盒子内的直接子元素 从右往左，一行排列，盒子内的直接子元素遵循上面的变化规律

　　以下为示例：　　蓝色：弹性盒子　　灰色：弹性盒子直接子元素　　紫色：弹性盒子间接子元素（弹性盒子子元素的子元素）

HTML代码：

<body>
     <div class="hz">               <!--弹性盒子-->
        <div class="l_1">           <!--直接子元素1-->
            1:
            <div class="l_a">a</div>       <!--间接子元素a-->
            <div class="l_b">b</div>       <!--间接子元素b-->
            <div class="l_c">c</div>        <!--间接子元素c-->
        </div>
        
        <div class="l_2">           <!--直接子元素2-->
            2:
        </div>
        
        <div class="l_3">          <!--直接子元素3-->
            3:
        </div>
    </div>
</body>

View Code

CSS代码：

/*弹性盒子*/

.hz{
    direction: rtl;
    display: flex;
    width: 160px;
    height: 500px;
    background-color: aquamarine;
}



.l_1,.l_2,.l_3{
    width:200px;
    height: 200px;
    background-color: #ccc;
    margin: 10px;
}



.l_a,.l_b,.l_c{
    width: 50px;
    height: 50px;
    background-color: blueviolet;
    margin: 5px;
}

View Code

效果图：

更改弹性盒子的宽度之后：

更改弹性盒子的高度之后不能改变高度：

去掉direction ：rtl 后，从左往右一行排列

　　flex-direction 　　：指定了弹性盒子的直接子元素在盒子内的排列顺序、方式；

　　flex-direction 　属性的介绍　　　　　　

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

　　横向排列时，随着盒子宽度的变化，直接子元素的宽度随之变化，高度不变

　　纵向排列时，随着盒子高度的变化，直接子元素的高度随之变化，宽度不变

　　justify-content 属性

　　　　flex-start：弹性项目向行头紧挨着填充。

　　　　flex-end：弹性项目向行尾紧挨着填充。

　　　　center： 弹性项目居中紧挨着填充。

　　　　space-between：弹性项目平均分布在该行上。

　　　　space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。

效果图：

align-items：纵向的排列方式

　　　　　　stretch(默认值)： 使盒子内直接子元素的高度和盒子一样高

　　　　　　 flex-start： 使盒子内直接子元素靠近盒子顶部排列

　　　　　　 flex-end： 使盒子内直接子元素靠近盒子底部排列

　　　　　　 cente： 使盒子内直接子元素在盒子纵向距离的中间位置

　　　　　　 baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与‘flex-start‘等效。其它情况下，该值将参与基线对齐。

flex-wrap ： 指定弹性盒子的子元素换行方式

　　　　　　nowrap：默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。

　　　　　　wrap：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行

　　　　　　wrap-reverse：反转 wrap 排列。

　　　　　　。。。。。。

相关推荐