CSS基础知识09-伸缩布局

写博客好像也记不太住！主要时间短，马上上工的话！也不知道自己行不行呀！多复习才行啊！

高版本浏览器支持，移动端常用。

• Flex布局

display:inline-flex：将对象作为弹性伸缩盒展示，用于行内元素；
display:flex：将对象作为弹性伸缩盒展示，用于块级元素。

1）主轴：控制子盒子排列方式-flex-direction，用于指定Flex主轴的方向，继而决定Flex子项在Flex容器中的位置；取值：row|row-reverse|column|column-reverse（分别表示：默认值，水平方向；与row相反方向；垂直方向；与column方向相反方向。水平为从左到右，垂直为从上到下。）

    html{
            font-size: 10px;
        }
        body{
            font-size: 1.6rem;
        }
        #box1{
            width: 50rem;
            height: 50rem;
            background-color: skyblue;
            /*伸缩布局*/
            display: flex;
            /*主轴的方向*/
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            flex-direction: row;
            /*主轴上子项对齐方式*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            justify-content: center;
            /*justify-content: space-between;*/
            /*justify-content: space-around;*/
            /*侧轴上子项对齐方式*/
            /*align-items: stretch;*/
            /*align-items: flex-start;*/
            /*align-items: flex-end;*/
            align-items: center;
            /*align-items: baseline;*/
        }
        .item{
            width:10rem;
            /*height: 10rem;*/
            background-color: purple;
            margin: 0.2rem;
        }

    <div id="box1">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>

2）侧轴与主轴对其方式
justify-content：用于指定主轴（水平方向）Flex子项的对齐方式；取值：flex-start|flex-end|center|space-between|space-around（分别表示：默认值，与行的起始位置对其；与行的结束位置对齐；与行中间对齐；两端对齐，中间间距相等，当剩余空间为负数或者只有一个项时，效果等同于flex-start；间距相等，中间间距是两端间距的两倍，剩余空间为负数或者只有一个项时，效果等同于center。

align-items：用于指定侧轴（垂直方向）上Flex子项的对齐方向；取值：stretch|flex-start|flex-end|center|baseline（分别表示：默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度，只有一行的情况下，行的高度为容器的高度，即为容器的高度；与侧轴考试位置对其；与侧轴结束位置对齐；与侧轴中间对齐；基线对齐，当行内轴与侧轴在同一线上，即所有子项的基线在同一线上时，效果等同于flex-start。）

flex-wrap：用于指定Flex子项是否换行；取值：nowrap|wrap|wrap-reverse（分别表示：默认值，不换行，可能会溢出；换行，溢出换到下一行；反方向换行。）

align-self：该属性用来单独指定某Flex子项的对齐方式；取值auto|flex-start|flex-end|center|baseline|stretch。

        #box1>div:nth-child(2){
            align-self: flex-start;
        }

align-content：该属性只作用于多行的情况下，用于多行的对齐方式；取值：stretch|flex-start|flex-end|center|space-between|space-around。

复合属性flex：flex-grow|flex-shrink|flex-basis，用来指定Flex子项如何分配空间，分别表示：默认值为0，省略默认为1；默认值为1，省略默认为1；默认值为auto，省略默认为0%。（父盒子与子盒子成比例，响应式界面。）

    <div class="item" style="flex: 1; height: 6rem;">item1</div>
    <div class="item" style="flex: 1; height: 3rem;">item2</div>
    <div class="item" style="flex: 1; height: 8rem;">item3</div>
    <div class="item" style="flex: 1; height: 20rem;">item4</div>

加油！！！