flex布局详解

设置或检索弹性盒伸缩基准值弹性盒伸缩基准值设置或检索弹性盒模型对象的子元素出現的順序flex布局也叫弹性布局，任意容器都可以被指定为flex布局。它可以帮助我们快速、高效、简单、响应式的完成各种页面布局。那用在工作中，就是一个字香啊。所以掌握flex布局对我们来说是至关重要的。下面我们详细介绍flex布局吧

如何让元素成为flex容器，只需要给盒子display：flex即可。这样这个盒子的子元素就会按照你的意愿，排列成响应的布局。下面看看flex的一些属性吧

<style>
    .box {
        display: flex;
        flex-direction: row;
        background-color: chocolate;
        width: 250px;
        height: 200px;
    }
    .box > div {
        width: 50px;
        height: 50px;
    }
    .box > div:nth-child(1) {
        background-color: cornflowerblue;
    }
    .box > div:nth-child(2) {
        background-color: darkorange;
    }
    .box > div:nth-child(3) {
        background-color: blueviolet;
    }
</style>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

flex-direction        

取值：row | row-reverse | column | column-reverse
该属性主要定义flex容器的主轴方向。总共有4个方向，从上到下，从下到上，从左到右，从右到左

 justify-content

取值：flex-start | flex-end | center | space-between | space-around | space-evenly
该属性设置弹性盒子元素在主轴方向上的对齐方式（支持多行）

 align-items

取值：flex-start | flex-end | center | baseline | stretch
该属性设置弹性盒子元素在侧轴方向上的对齐方式

 

 flex-wrap

取值：nowrap | wrap | wrap-reverse
控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向

flex-flow 

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行

align-content

取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认)
该属性设置弹性盒子元素在侧轴方向上的对齐方式（只对多行起效果）

 align-self

取值：auto | flex-start | flex-end | center | baseline | stretch
定义flex子项单独在侧轴方向上的对齐方式

 order

取值：<integer>
设置或检索弹性盒模型对象的子元素出現的順序,数值小的排在前面。可以为负值

 flex-grow

取值：<number>： 用数值来定义扩展比率。不允许负值
设置弹性盒的扩展比率(根据比率来分配剩余空间)

 flex-shrink

取值：<number>： 用数值来定义收缩比率。不允许负值 
设置弹性盒的收缩比率

用于决定项目在空间不足时是否缩小，默认项目都是1，注意，即便设置了固定宽度，也会缩小。
但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

flex-basis

取值：<length> | <percentage> | auto | content
设置或检索弹性盒伸缩基准值

默认是auto，这个时候会保留默认宽度或者以width为自身的宽度，如果设置了flex-basis属性，那么权重会比width属性高，因此会覆盖widtn属性

flex

flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。
默认值是0 1 auto