弹性盒子的理解

发布时间:2020-07-31 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了弹性盒子的理解脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

弹性盒子:

  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 排列。

      。。。。。。

总结

以上是脚本之家为你收集整理的弹性盒子的理解全部内容,希望文章能够帮你解决弹性盒子的理解所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478