前言：
现在你们对“css图片横向拉伸”大致比较关心，小伙伴们都需要知道一些“css图片横向拉伸”的相关资讯。那么小编也在网摘上收集了一些对于“css图片横向拉伸””的相关知识，希望我们能喜欢，咱们一起来学习一下吧！CSS3弹性布局
CSS3弹性布局(Flexible Box 或 Flexbox)是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。
块级布局(block)更侧重于垂直方向、行内布局(inline)更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的。特别适用于支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。
Flexbox布局中的概念
1.弹性容器
display 的值为flex或者inline-flex就是一个弹性容器
2.弹性项目
弹性容器的子项就是弹性项目
3.轴
弹性布局中有两条轴,弹性项目沿其依次排列的那根轴称为主轴(main axis)。
垂直于主轴的那根轴称为侧轴(cross axis)
用flex-direction来定义主轴
flex-direction:row 表示横向为主轴,从左到右flex-direction:row-reverse 横向为主轴,从右到左flex-direction:column 从上到下为主轴flex-direction:column-reverse 从下到上为主轴
用justify-content来定义沿主轴怎么排列
用align-items定义弹性项目沿侧轴默认如何排布
用align-self定义单个弹性项目沿侧轴应当如何对齐
4.尺寸:
用flex-grow定义拉伸因子,相当于权重,数字越大占空间越大,负数无效
用flex-shrink定义弹性元素的收缩规则,数字越大收缩的越厉害.负数无效
用flex-basis 指定弹性元素在主轴方向上的初始大小
布局示例
<!DOCTYPE html><html><head> <style> #container{ display: flex; flex-direction: row; } .item { background:#f0ad4e; text-align: center; border: 1px solid white; } #container div:nth-of-type(1) {flex-grow:1} #container div:nth-of-type(2) {flex-grow: 4;} #container div:nth-of-type(3) {flex-grow: 1;}</style></head><body><div id="container"> <div class="item">弹性</div> <div class="item">布局</div> <div class="item">示例</div></div></body></html>横向排列,第二个弹性元素拉伸因子最大
<!DOCTYPE html><html><head> <style> #container{ display: flex; flex-direction: column-reverse; height: 50vh; } .item { background:#f0ad4e; text-align: center; border: 1px solid white; } #container div:nth-of-type(1) {flex-grow:1} #container div:nth-of-type(2) {flex-shrink: 4;} #container div:nth-of-type(3) {flex-grow: 1;}</style></head><body><div id="container"> <div class="item">弹性</div> <div class="item">布局</div> <div class="item">示例</div></div></body></html>纵向反序排列,第二个弹性元素收缩因子最大
<!DOCTYPE html><html><head> <style> #container{ display: flex; flex-direction: row; justify-content:space-around; } .item { background:#f0ad4e; text-align: center; width: 150px; border: 1px solid white; } </style></head><body><div id="container"> <div class="item">弹性</div> <div class="item">布局</div> <div class="item">示例</div></div></body></html>沿主轴分散排列
<!DOCTYPE html><html><head> <style> #container{ display: flex; flex-direction: row; justify-content:center; height: 50vh; background-color: burlywood; } .item { background:#f0ad4e; text-align: center; height:100px; width: 100px; border: 1px solid white; } #container div:nth-of-type(1) {align-self:center} </style></head><body><div id="container"> <div class="item">弹性</div> <div class="item">布局</div> <div class="item">示例</div></div></body></html>所有元素沿主轴居中,第一个弹性元素沿侧轴居中
标签： #css图片横向拉伸
