flex布局(弹性盒子三)
在之前的文章里说到了弹性盒子的部分属性，接下来接着说弹性盒子的其余属性
目录
弹性盒子的属性及其属性值
1.order 顺序指定：用css指定顺序，不用html排序
2.flex-grow 子项目延伸比率
3.flex-shrink 子项目的收缩比率 和flex-grow正好相反
4.flex-basis 子项目的基本宽度
5.flex flex-grow、flex-shrink和flex-basis一起指定
6.align-self 子元素垂直对齐 这是给单个的子元素盒子设置样式
弹性盒子的属性及其属性值
1.order 顺序指定：用css指定顺序，不用html排序
设置内容区的样式：.container{height: 500px;width: 500px;border: 1px red solid;display: flex;}.item{height: 100px;width: 100px;background-color: red;text-align: center;margin: 5px;line-height: 100px;font-size: 20px;}.container>.item:first-child{color: blue;order: 3;}
内容区：<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
如图所示：html里给数字1盒子 排序在最前面第一位，但是css里给数字1盒子排序在最后面一位，最后数字1盒子排在了最后面一位，说明css也可以给子元素盒子进行排序
2.flex-grow 子项目延伸比率
设置内容区的样式：.container{height: 500px;width: 500px;border: 1px red solid;display: flex;}.item{height: 100px;width: 100px;background-color: red;text-align: center;margin: 5px;line-height: 100px;font-size: 20px;}.container>.item:first-child{color: blue;flex-grow: 1;}
内容区：<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
如图所示：有一个元素设置延伸宽度至挤满父元素的宽度，两个元素设置就是共同平分共同延伸至挤满父元素的宽度
3.flex-shrink 子项目的收缩比率 和flex-grow正好相反
例：.item1{flex-shrink：0；}
4.flex-basis 子项目的基本宽度
例：.item1{flex-basis：200px；}
5.flex flex-grow、flex-shrink和flex-basis一起指定
例：.item1{flex：0 1 30%；}
6.align-self 子元素垂直对齐 这是给单个的子元素盒子设置样式
a auto 默认值
意思是指定的子元素盒子还是停留在当前位置，没有变化
b flex-shart 靠上
意思是指定的子元素盒子靠上，因为子元素盒子原始位置就是靠上，所以也相当于是默认值
c flex-end 靠下
设置内容区的样式：.container{height: 500px;width: 500px;border: 1px red solid;display: flex;}.item{height: 100px;width: 100px;background-color: red;text-align: center;margin: 5px;line-height: 100px;font-size: 20px;}.container>.item:first-child{color: blue;align-self: flex-end;}
内容区：<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
如图所示：设置选定的子元素 flex-end后，盒子靠在了父元素盒子的最下面
d center 居中
意思是设置选定的子元素center 后，盒子靠在了父元素盒子的最中间
e stretch 默认值
和auto一样，意思是指定的子元素盒子还是停留在当前位置，没有变化
f baseline 也是靠上的意思，和flex-start一样相当于是默认值
flex布局(弹性盒子三)相关推荐
- HTML/CSS布局—Flex布局(弹性布局)
目的:能够使用Flex布局模型灵活.快速的开发网页 Flex布局/弹性布局: 是一种浏览器提倡的布局模型 布局网页更简单.灵活 避免浮动脱标的问题 作用: 基于 Flex 精确灵活控制块级盒子的布局方 ...
- 什么是（flex）弹性盒子主轴和侧轴
(flex)弹性盒子的主轴和侧轴 弹性盒子分为主轴和侧轴(又称交叉轴) 属性:flex-direction 主轴设置:flex-direction :row 或row-reverse 主轴通俗来讲就是 ...
- flex布局换行盒子上下有缝隙
flex布局换行盒子上下有缝隙 可能是其他盒子有高度的原因 撑开了 display: flex; flex-wrap: wrap; align-content: flex-start;//侧轴应该就好 ...
- CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解 写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...
- 新型布局--弹性盒子
1.弹性盒子 ### 1.1 什么是弹性盒子? - 弹性盒子是CSS3的一种新的布局模式. 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列.对齐和分配空白空间 - - ...
- flex布局的盒子模型
flex盒子模型由容器(flex container)以及容器的直接子元素(flex item)组成. 以容器(flex container)定义,有主轴(main axis)以及交叉轴(cross ...
- 一、CSS弹性布局[弹性盒子、弹性元素]
一.CSS弹性布局 1.弹性盒子 弹性盒子的属性全都是写在父元素上面 1.1基础 解释:在父元素上写上display:flex;或者display:inline-flex;子元素就会出现弹性效果,其中 ...
- Html——flex布局 弹性布局
以下文章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案. 一.flex布局的语法 块级元素 :display: flex ---- 将容器盒模型作为块级弹性伸缩盒显示 行 ...
- flex布局(弹性布局、伸缩布局)
flex是CSS3中的一种布局方式 主要介绍下弹性布局的常用的一些属性 当一个盒子设置为display:flex的时候,盒子会变为一个弹性盒子,盒子内部的子元素会默认沿着主轴方向排布,此时会引出主轴和 ...
最新文章
- 《Visual C++ 开发从入门到精通》——2.7 变量
- Taylor Swift - Red
- 逃离美股！瑞信给出了11个理由
- 为什么C++（来自C++之父的观点）
- Day 9: TextBlob——对文本进行情感分析
- 第七届蓝桥杯-剪邮票(深搜+广搜)
- stringstream用法总结
- ffmpeg 常用基本命令和ffmpeg处理RTMP流媒体的常用命令
- go语言mysql框架_超级详细：Go语言框架Gin和Gorm实现一个完整的待办事项微服务...
- 省选＋NOI 第三部分 树上问题
- 杭电-------2048不容易系列之（4）考新郎（C语言）
- 人员基础信息一体化采集仪_注意！会计人员信息采集，哪些人需要采集？
- 整合xfire与struts2 （一）
- [深入React] 8.refs
- 轻松实现在微信中直接下载APK的方式
- 海贼王（pirate）（LCA)
- 程序人生-hit计统大作业
- java 原型图_一张图搞懂原型、原型对象、原型链
- 解决ECharts官网打开缓慢的问题
- 为什么sqlserver创建存储过程成功,却找不到这个存储过程呢