响应式布局：弹性布局

flexBox布局的作用

• 实现响应式开发
• 与float效果相似，可以让内容水平或竖直显示
• 也解决了内容不一样容器高度不一样的问题

flexBox与浮动布局的区别

• flexBox没有脱离文档；，浮动布局脱离了文档流
• flexBox中不会自动折行，内容的宽度会根据容器的宽度自动调整；浮动布局中内容达到容器的宽度的时候，自动折行

主轴和弹性元素

• 可以把弹性收缩想成是一条穿过并固定在容器两面的线，这条线就是主轴
• 沿着主轴分布的元素叫做弹性元素，弹性盒子中的元素自动转化为弹性元素

创建弹性容器

• 给最大的容器添加一个属性：display:flex


HTML:
<div class="container">
<img src="img/banner1.jpg" alt="">
<figcaption>设置或检索弹性盒伸缩基准值。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间对应的脚本特性为flexBasis。flex-wrap 属性规定flex容器是单⾏或者多⾏，同时横轴的⽅向决定了新⾏堆叠的⽅向。。</figcaption>
</div>

CSS:
 .container{
            display: flex;
        }

 

结果为：

 

flex-direction

• 意义：规定flexBox的方向
• 默认是从左到右
• 属性有：


flex-direction:row;//从左到右
flex-direction:row-reverse;//从右到左
flex-direction:column;//从上到下
flex-dirction:column-reverse;//从下到上

 

flex-wrap

• 意义：包裹,让元素折行
• 属性有：

flex-wrap:wrap；//折行

 

flex-wrap:wrap-reverse;//改变行的序列

flex-flow

• 是flex-direction和flex-wrap的缩写

flex-flow:row nowrap;

为什么要用竖向？

• 对于块级元素来说，本来就是从上到下的，为什么还要用这个属性呢？

　　页面为：

• 因为有一些时候，我们想不按照HTML布局的方式来显示页面，此时就要用到order属性


HTML:
<div class="container">
<div class="content first">
<figcaption>1.文章，1984年6月26日出生于陕西省西安市，中国内地男演员、导演。</figcaption>
</div>
<div class="content second">
<figcaption>2.文章，1984年6月26日出生于陕西省西安市，中国内地男演员、导演。</figcaption>
</div>
<div class="content three">
<figcaption>3.文章，1984年6月26日出生于陕西省西安市，中国内地男演员、导演。</figcaption>
</div>
</div>


CSS:
 .container{
            display: flex;
            flex-direction: column;
        }
.content{
            border: 1px dashed mediumaquamarine;
        }
.first{
            order: 2;
        }
.second{
            order:3
        }
.three{
            order:1
        }

flex-grow

• 意义：某个元素扩大几倍
• 当内容的宽度小于容器的宽度时，会游空白地方留出来

• 为了不留空白地方，让第二个盒子相比较其他盒子扩大1倍

CSS:
.content{
            width: 200px;
        }
.second{
            flex-grow: 1;
        }

flex-shrink

• 意义：某个元素缩小几倍
• 当内容的宽度大于容器的宽度，会溢出，这时让第二个盒子相比较其他元素缩小1倍

CSS:
.content{
            width: 1000px;
        }
.second{
            flex-shrink: 2;
        }

 

 

flex-basis

• 意义：给元素一个初始宽度
• 水平方向相当于宽度

.content{
            flex-basis: 420px;
        }

flex简写

//flex-grow,flex-shrink,flex-basis
flex:1 1 420px