响应式布局:弹性布局
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