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
