网页的响应式布局

弹性盒子（flex)

        弹性盒子模型可以让网页布局具有强大的可适应性，随着页面宽度的变化，盒子内的子元素会自动收缩或放大。让页面结构具有更强的可读性，布局更加整齐。

用法

        在普通盒子中用 display:flex;将普通的盒子模型转化为弹性盒子，其中所有元素随之变为弹性子元素，会随着父元素自适应缩放即响应式布局，但是更近一步的响应式还应该使用媒体查询来做。

目录

弹性盒子（flex)

用法

属性

---

属性

        对于弹性盒子来说，它拥有许多新的属性。

flex-direction: row | row-reverse | column | column-reverse   

    该属性是用来控制子元素在父盒子里的排列方式，row是平行于主轴排列，column则是垂直于主轴排列。而加入reverse则可以让子元素的顺序反转，若是有空隙则会紧靠反向排列。 

justify-content: flex-start | flex-end | center | space-between | space-around     
        该属性控制内容应该如何对齐。   

align-items: flex-start | flex-end | center | baseline | stretch

        该属性控制的是同一行元素对交叉轴即纵轴的对齐方式。

flex-wrap: nowrap|wrap|wrap-reverse

        控制弹性盒子内的元素是否可以换行。

align-content: flex-start | flex-end | center | space-between | space-around | stretch

        控制各行的对齐，是对wrap的调整。

子元素排序

        order：整数；可以通过该属性为元素重新排序。根据数据大小，排列先后顺序。

align-self: auto | flex-start | flex-end | center | baseline | stretch

        用于设置单个弹性元素在纵轴上的对齐方式。

flex

        该属性可以跟随三个数据，用于分配多余空间，三个值分别代表扩大值、缩小值、及基准值。

多媒体查询

        多媒体查询也是响应式布局的关键，响应式布局的关键在于查询各种的媒体设备以及设备处于何种状态并进行适当的调整以适应。

        @media only (媒体类型） and (媒体特性）

{

css_code

}

总结

        通过弹性盒子和多媒体查询可以极大程度实现响应式布局。包括移动端。