flex弹性盒子

flex基础弹性盒子

​****容器属性(6 个):	​****项目属性（6个）
flex-direction 主轴方向	order
flex-wrap 主轴换行方式	flex-grow
flex-flow 符合形式	flex-shrink
justify-content 主轴对齐方式	flex-basis
align-items 交叉轴对齐方式	flex
align-content 多根主轴对齐方式	align-self

语法：display：flex 表示给当前元素添加弹性盒子

 注意，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

案例一：使用flex弹性盒子让那个div里面的内容在一行显示

<style>
    .box{
        width: 100%;
        display: flex;
    }
    .inner{
        border: 1px solid #f00;
        background-color: aquamarine;
    }
</style>
<div class="box">
    <div class="inner">响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。</div>
    <div class="inner">响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。</div>
    <div class="inner">响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。</div>
    <div class="inner">响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。</div>
</div>

display:-webkit-box;和float的区别在于 float浮动之后，高度会随着内容变化,高度不定；并且浮动之后，当盒子缩小时，浮动的内容会自动被挤下来 display:box 不需要设置盒子高度，会自动使多个盒子高度保持一致； 并且弹性盒子设置好之后，屏幕缩小不会让内容自动换行，但是还是没有实 线弹性盒子

 语法：display：flex 表示给当前元素添加弹性盒子

    .box{
        width: 100%;
        display: flex;
    }
    .inner{
        border: 1px solid #f00;
        background-color: aquamarine;
    }
/*使div class="box"的内容在一行显示 */

flex-direction 决定主轴方向（即项目排列方向）

属性值：

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap 设置项目换行方式

默认情况下，项目都排在一条线(又称”轴线”)上。 flex-wrap 属性设置如果一条轴线排不下，项目如何换行。

语法：

flex-warp：

nowrap （默认）：不换行,都在一行或者一列中显示

wrap：换行，第一行在上方。

wrap-reverse：伸缩项目无法容纳时，自动换行，方向和wrap相反,这个效果和使用float的效果是一样的。

nowrap: 

 wrap：换行，第一行在上方

 .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /*  换行显示 */
           flex-wrap: wrap;
       }

 wrap-reverse：换行，第一行在下方

 .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /*  换行显示，并且内容会颠倒 */
           flex-wrap: wrap-reverse;
       }

 flex-flow 主轴方向和换行方式的简写

语法：flex-flow：row nowarp

默认值：row nowrap

 案例：向右对齐 并且 换行

<style>
       .box{
           display: flex;
           display: -webkit-flex;
           border: 1px solid #f00;
           /*  颠倒显示，并且换行 */
           flex-flow: row-reverse wrap ;
       }
       .inner{
           background-color: yellowgreen;
           border: 1px solid #f00;
           margin: 5px;
           padding: 5px;
           height: 200px;
           width: 500px;
       }
</style>

 justify-content 定义项目在主轴上的对齐方式

语法：

justify-content：center

属性值：

start（默认值）： 主轴起点对齐 主轴起点对齐

end： 主轴终点对齐 主轴终点对齐

center：居中

space-between： 两端对齐，项目之间的间隔都相等。 两端对齐，项目之间的间隔都相等。

space-around： 每个项目两侧的间隔相等。所以，项目之间间隔比项目与边框间隔大一倍。 每个项目两侧的间隔相等。所以，项目之间间隔比项目与边框间隔大一倍

space-evenly： 可以使每个元素之间和元素距离边距的距离都相等，但是兼容性比较差

。