HTML、CSS综合05——css3弹性布局、响应式布局

CSS3弹性布局(伸缩布局，flex布局)

flex是flexible box的缩写，意思为“弹性布局”，用来为盒子模型提供最大的灵活度，能够最大限度的解决我们关于浮动的问题

采用flex布局的父元素元素，称之为flex容器(context)，容器中所有的子元素称之为容器的flex项目(item)

flex主轴：flex item默认以主轴方向顺序排列，主轴默认是水平方向

flex侧轴：与主轴垂直的方向侧轴。默认是垂直方向

方向：默认方向是从上往下，从左往右

主侧轴并不是固定的，可以flex-direction交换

flex的属性分为两大类，一类设置在父元素中，一类设置在子元素中

容器的属性(设置在父元素中)

flex-direction

定义flex容器的主轴方向，决定子项的排列方向及顺序：默认是属性row

• row： 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
• row-reverse： 对齐方式与row相反。
• column： 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
• column-reverse： 对齐方式与column相反。

flex-wrap

默认flex容器只排列一样，所有的子容器都在一行显示，如果超出，则会挤压子容器造成变形。

• nowrap：flex容器为单行。
• wrap:flex容器可以换行，并且子元素不会变形
• wrap-reverse:换行后反转显示，从下往上显示

flex-flow

flex-direction和flex-warp的合写属性

justify-content

容器内子元素在主轴上的对齐方式

• flex-start： 弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
• flex-end： 弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
• center： 弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
• space-between： 弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于’flex-start’。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
• space-around： 弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于’center’。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

align-items

flex容器的子元素的纵轴基线对齐方式

• flex-start： 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end： 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center： 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline： 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
• stretch： 如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

常用来设置垂直居中

algin-content

flex容器的子元素在纵轴的文本对齐方式

• flex-start： 各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
• flex-end： 各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
• center： 各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
• space-between： 各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’flex-start’。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
• space-around： 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
• stretch： 各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

项的属性(设置在子元素中)

align-self

对某一个子项单独设置其纵轴的基线对齐方式，取值和align-items一样

order:<number>

所有的子元素默认的order都为0，自定义子元素的排序位置如果相等则按照规定排列，如果<0，则在最前面

flex-grow:<number>

将剩余空间宽度的number倍赋给元素的宽度

元素计算后宽度 = 元素本身宽度+ 0.n*剩余空间宽度

flex-shrink:<number>

设置项的缩小比例，当未设置换行时，flex项过多会导致项目被压缩，

可以设置被压缩的比例，设置为0表示不压缩，0<n<1时，会放大项

弹性布局小结

flex布局可以很方便的进行盒子位置的调整，但因为flex属性是css3属性，PC端浏览器有时候需要兼容低版本浏览器，一般来说，不推荐使用弹性布局方式。

强烈建议在移动端构建页面时，使用弹性布局。可以减轻很多工作量。

弹性布局在小程序中使用比较广泛

响应式布局

利用css技术，使一个页面能够在不同尺寸的屏幕显示的时候显示不同的效果

<style>
    .box{
        width:1200px;
        height:400px;
        margin:0 auto;
        border:1px solid red;
        background:#CCC;
        font-size:46px;
        text-align: center;
    }
    /* 在屏幕宽度<=1200px的时候 */
    @media screen and (max-width: 1200px) {
        .box{
            width:1000px;
            background:cyan;
            font-size:32px;
            color:blue
        }
    }
    /* 屏幕宽度<=800px */
    @media screen and (max-width:800px){
        .box{
            width:600px;
            background:plum;
            font-size:26px;
            color:yellow;
        }
    }
</style>
<p>在1200px以上的屏幕上显示46px字体，字体颜色为黑色</p>
<p>在800px以上，1200px以下的的屏幕上显示32px字体，字体颜色为蓝色</p>
<p>在600px以上，800px以下的的屏幕上显示26px字体，字体颜色为yellow</p>
<div class="box">这是一条神奇的天路</div>

响应式布局的结果，同一个页面会有好几份CSS代码，会造成很大的CSS代码冗余