css弹性盒模型怎么实现

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

css之弹性盒模型

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

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

一、display:flex　

　　　　作用：让当前元素形成盒，控制子元素。

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

二、具有以下属性：

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:项目长度

                
       1       2       3       4       5       6       7                 
    
    
            
div1
            
div2
            
div3
    

　　案例1：骰子

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