css弹性盒模型怎么实现

这篇文章主要介绍“css弹性盒模型怎么实现”,在日常操作中,相信很多人在css弹性盒模型怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css弹性盒模型怎么实现”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

10多年的邓州网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整邓州建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联公司从事“邓州网站设计”,“邓州网站推广”以来,每个客户项目都认真落实执行。

css之弹性盒模型

弹性盒子(Flexible Box/filebox)是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(父元素)和弹性子元素(可以一个或者多个)组合而成。弹性容器通过设置display属性的值为flex或者是inline-flex将其定义为弹性容器。

一、display:flex 

作用:让当前元素形成盒,控制子元素。

特点:弹性盒里的子元素,都是沿着主轴排列,默认情况下,主轴为X轴。弹性盒里的子元素都能直接添加宽高(不用在乎是块元素还是行内元素)。让弹性盒里的一个子元素左右上下居中,直接给子元素添加margin:auto ;就可。




    
    Document
    


   
                    
   

二、具有以下属性:

1、flex-direction          改变主轴的排列方向

属性值:

row        X为主轴

column     Y为主轴

row-reverse   在主轴反向排列

2、justify-content      主轴对齐方式

属性值:

flex-start      默认,顶端对齐

flex-end      末端对齐

center       居中对齐

space-between   两端对齐,中间自动分配

space-around   自动分配距离

3、align-items      侧轴对齐方式

属性值:

flex-start      默认,顶端对齐

flex-end       末端对齐

center        居中对齐

baseline和flex-start等效

4、flex-wrap         换行

属性值:

wrap       换行

nowrap     不换行

wrap-reverse   反向换行

5、allign-content     行与行之间对齐方式

属性值:

flex-start      默认,顶端对齐

flex-end       末端对齐

center       居中对齐

space-between   两端对齐,中间自动分配

space-around   自动分配距离

6、align-self         控制一个子元素(灵活元素)在侧轴的对齐方式

属性值:

auto       默认值。元素继承了它的父容器的align-items属性,如果没有父容器则为“stretch”

stretch      元素被拉伸以适应容器

content     元素位于容器的中心

flex-start      元素位于容器的开头

flex-end       元素位于容器的结尾

7、order          排序(控制子元素的先后顺序,数值越大越向后排。可以为负)

8、flex:1          把剩余空间全部分配给当前元素(当然指的是分配主轴上的空间)

flex是一个复合属性,设置或者是检索弹性盒模型对象的子元素如何分配空间

新版盒模型

flex三个属性介绍:flex-grow:一个数字,规定项目相对于其它灵活的项目进行扩展的量

     flex-shrink:一个数字,规定项目将相对于其它灵活项目进行收缩的量

     flex-basis:项目长度




    
    Document
    


    
       1
       2
       3
       4
       5
       6
       7
      
       
    
    
                 
div1
            
div2
            
div3
    

案例1:骰子





    
    Document
    




    
             
    
                      
    
                               
    
        

                     

        

                     

    
    
        

                     

        

                     

        

                     

    
    
        

                     

        

                     

    

到此,关于“css弹性盒模型怎么实现”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


网站标题:css弹性盒模型怎么实现
网页路径:http://scyanting.com/article/gddcsg.html