弹性盒子布局

弹性盒子布局

---

---

一、概述

在移动Web开发中，可以通过流式布局、弹性盒布局和Rem适配布局来制作移动端页面，弹性盒布局是CSS 3中的一种新布局模式，可以轻松地创建响应式网站布局。该弹性盒布局为盒模块增加了灵活性，可以让人们告别浮动（float），完美地实现垂直居中。目前它得到几乎所有主流浏览器的支持

二、弹性盒子布局概念

1、弹性盒由容器、子元素和轴构成，并且默认情况下，子元素的排布方向与横轴的方向是一致的。
2、特点
弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求，它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式
3、支持浏览器
弹性盒模型几乎在主流浏览器中都得到了支持，如表所示
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021070218394110.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpYmVu,size_16,color_FFFFFF,t_70

三、常用属性

弹性盒布局的常用属性有7个，具体如下

• display属性用于指定元素容器的类型。
• flex-flow属性是属性flex-direction和flex-wrap的简写，用于排列弹性子元素。
• justify-content属性能够设置子元素在主轴方向的排列方式。
• align-items属性用于定义子元素在侧轴上的对齐方式。
• order属性用于设置子元素出现的排列顺序，数值越小，排列将会越靠前，默认为0
• flex属性是flex-grow（扩展比率）、flex-shrink（收缩比率）和flex-basis（宽度，像素值）的简写形式，能够设置子元素的伸缩性
• align-self属性能够覆盖容器中的align-items属性，用于设置单独的子元素如何沿着纵轴排列

四、各属性的使用

1、display属性
display属性默认值为inline，这意味着此元素会被显示为一个内联元素，在元素前后没有换行符；如果设置display的值为flex，则表示用于指定弹性盒的容器；如果设置display的值为none，则表示此元素不会被显示，此处设置display为flex

<style>
    .box {
   
        display: flex;border: 1px solid #999;height: