CSS3-多列布局-伸缩盒布局-伸缩项目
多列布局-伸缩盒布局-伸缩项目
1 回顾
1.1 变换 transform
① 相关CSS属性
transform
transform-origin
transform-style
perspective
perspective-origin
backface-visibility
② 变换方法
2D 变换：
位移： translateX() translateY() translate()
缩放： scaleX() scaleY() scale()
旋转： rotate()3D 变换：
位移： translateZ() translate3D()
缩放： scaleZ() scale3D()
旋转： rotateX() rotateY() rotateZ() rotate3D()
1.2 过渡 transition
过渡属性：
transition-property
transition-duration
transition-timing-function
transition-delay
transition触发过渡的条件：
1. 伪类选择器 :hover :active :focus
2. JavaScript 事件
3. 媒体查询 @media
1.3 动画 animation
① 关键帧
@keyframes 关键帧的名字 {0% {}100% {}
}
② 动画相关 CSS 属性
anaimtion-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count 值 数字或者infinite
animation-direction 值 normal、reverse、alternate、alternate
animation-fill-mode 值 none、forwards、backwards
animation-play-state 值：running、paused
animation
2 多列布局
① 设置给包裹元素的 CSS 属性（共 8 个属性）
| CSS 属性名 | 含义 | 值 |
|---|---|---|
| column-count | 指定分多少列 | 数字 |
| column-width | 指定列宽 | 长度 |
| columns | 复合属性（coumnt和widh） | 数字和长度 |
| column-gap | 列间距 | 长度 |
| column-rule-width | 列之间的边框宽度 | 长度 |
| column-rule-color | 列之间的边框颜色 | 颜色 |
| column-rule-style | 列之间的边框风格 | 同 border-style |
| column-rule | 列之间的边框的复合属性 | width、color、style |
注意：
- 设置 column-count 和 column-width 都可以实现分列效果；如果二者同时设置可能会出现冲突，谁分出来的列数少就按照谁。
- 推荐使用 column-count 进行分列。
② 设置给子元素的 CSS 属性（共 4 个属性）
| CSS 属性名 | 含义 | 值 |
|---|---|---|
| column-span | 设置是否跨越所有的列 |
none：默认值，不跨列 all：跨所有列 |
| -webkit-column-break-before | 设置元素前面的断列方式 |
auto：默认值，自动 always：强制前面断列 avoid：强制前面不断列 |
| -webkit-column-break-after | 设置元素后面的断列方式 |
auto：默认值，自动 always：强制后面断列 avoid：强制后面不断列 |
| -webkit-column-break-inside | 设置元素内部的断列方式 |
auto：默认值，自动 avoid：强制内部不断列 |
3 伸缩盒布局
3.1 伸缩容器和伸缩项目
伸缩容器： 一个元素设置 CSS 属性 display:flex 或者 display: inline-flex，该元素就变为伸缩容器。
伸缩项目： 伸缩容器的子元素就会变为伸缩项目。
总结：
- 伸缩项目会水平排列，可以完美的设置宽高以及内外边距，不存在外边距塌陷合并，并且具有伸缩性。
- 只有伸缩容器的子元素才是伸缩项目，子元素的子元素以及其他后代不是。
- 伸缩项目也可以作为它的子元素的伸缩容器。
/* 设置为伸缩容器 */display: flex;
3.2 设置主轴方向和换行方式
主轴： 伸缩项目会沿着主轴排列，主轴的默认是水平的且方向是从左到右。
侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的且从上到下。
① 设置主轴方向
flex-direction 属性可以设置主轴方向：
值：
row 默认值，水平且从左到右
row-reverse 水平从右到左
column 垂直从上到下
column-reverse 垂直从下到上/* 设置主轴方向：水平和垂直 */flex-direction: row; 默认值，水平且从左到右flex-direction: row-reverse; 水平从右到左flex-direction: column; 垂直从上到下flex-direction: column-reverse; 垂直从下到上
② 设置换行方式
flex-wrap 属性可以设置伸缩项目的换行方式：
值：
nowrap 默认值，强制不换行
wrap 自动换行
wrap-reverse 换行且反转行的排列属性/* 设置换行方式 */flex-wrap: wrap;默认值，强制不换行flex-wrap: nowrap;自动换行flex-wrap: wrap-reverse;换行且反转行的排列属性
③ 同时设置主轴方向和换行方式
flex-flow 属性可以同时设置主轴方向和换行方式，该属性是 flex-direction 和 flex-wrap 的复合属性，值没有数量和顺序要求。
/* 该属性是 **flex-direction** 和 **flex-wrap** 的复合属性，值没有数量和顺序要求*/flex-flow: wrap row;flex-flow: nowrap row-reverse;
3.3 设置伸缩项目在主轴上的对齐方式
justify-content 属性可以设置伸缩项目在主轴上的对齐方式：
值：
flex-start 默认值，靠主轴起始位置对齐
flex-end 靠主轴结束位置对齐
center 居中对齐
space-between 伸缩项目在主轴上均匀分布，两端没有间隙，中间有间隙。
space-around 伸缩项目在主轴上均匀分布，两端的间隙是直接间隙的一半。
space-evenly 伸缩项目在主轴上均匀分布，两端的间隙与中间的间隙一样。/* 设置伸缩项目在主轴上的对齐方式 */justify-content: flex-start;默认值，靠主轴起始位置对齐justify-content:flex-end;靠主轴结束位置对齐justify-content: center;居中对齐justify-content: space-around;伸缩项目在主轴上均匀分布，两端没有间隙，中间有间隙。justify-content: space-between;伸缩项目在主轴上均匀分布，两端的间隙是直接间隙的一半。justify-content: space-evenly;伸缩项目在主轴上均匀分布，两端的间隙与中间的间隙一样。
3.4 设置伸缩项目在侧轴上的对齐方式
① 一条主轴线（伸缩项目在主轴上不换行）
align-items 属性可以设置伸缩项目在侧轴上的对齐方式，主要用于只有一条主轴线的情况。
值：
stretch 默认值，伸缩项目在侧轴上拉伸。
flex-start 靠侧轴开始位置对齐
flex-end 靠侧轴结束位置对齐
center 居中对齐
baseline 文字基线对齐/* 设置伸缩项目在侧轴上的对齐方式 */align-items: stretch;align-items: flex-start;align-items: flex-end;align-items: center;align-items: baseline;
② 多条主轴线 （伸缩项目在主轴上发生换行）
align-content 属性可以设置伸缩项目在侧轴上的对齐方式，只能用于多条主轴的情况（伸缩项目发生了换行）
值：
stretch 默认值，伸缩项目在侧轴上拉伸。
flex-start 靠侧轴开始位置对齐
flex-end 靠侧轴结束位置对齐
center 居中对齐
space-between 在侧轴方向上，两端没有间隙，中间有间隙。
space-around 在侧轴方向上，两端的空隙是中间空隙的一半。
space-evenly 在侧轴方向上，两端的空隙与中间空隙一样。/* 设置伸缩项目在侧轴上的对齐方式 */align-content: stretch;align-content: flex-start;align-content: flex-end;align-content: center;align-content: space-between;align-content: space-around;align-content: space-evenly;
注意：
- align-items 在一条主轴或多条主轴设置对齐方式都会生效，但是我们只有在一条主轴的情况下使用该属性。
- align-content 只有多条主轴线的情况下才生效。
案例：用伸缩盒实现水平垂直居中
方案一：在父元素设置
/* 设置为伸缩容器 */ display: flex; /* 设置伸缩项目在主轴方向居中 */ justify-content: center; /* 设置伸缩项目在侧轴方向居中 */ align-items: center;方案二：/* 父元素设置为伸缩容器 */display: flex;/* 自身设置外边距 */margin: auto;
3.5 伸缩项目的伸缩性
① 伸缩项目在主轴上的基准长度 flex-basis
需要设置一个长度作为值，概属性设置的是伸缩项目在主轴方向上的长度。 如果没有设置该属性，伸缩项目在主轴上的长度就是 width的值 或者 height的值。
② 扩展比率 flex-grow
伸缩项目发生扩展的前提： 伸缩容器在主轴方向上有富余的空间。
伸缩项目默认的扩展比率是 0。
伸缩项目在扩展的时候，按照各自的扩展比率瓜分伸缩容器的富余空间。
/* 设置伸缩项目的拓展比率 ：平均分，可不平均，单独分*/flex-grow: 0;（平均分）flex-grow: 1; 给各自的盒子分配不一样的扩展比率扩展的分配规则假设分配伸缩容器的富余空间 400item01 分到 400 * 4/8item02 分到 400 * 3/8item03 分到 400 * 1/8
③ 收缩比率 flex-shrink
伸缩项目发生收缩的前提：伸缩容器在主轴方向上的长度不够（小于伸缩项目在主轴上的长度的和）
伸缩项目默认的收缩比率是 1。
伸缩项目在收缩的时候，每个伸缩项目要补一部分伸缩容器的亏空，补多少既考虑自己原本的长度也考虑收缩比率。
/* 设置收缩比率 */flex-shrink: 1;flex-shrink: 0;假设收缩规则 亏空 100item01: 100*3/(100*3+200*2+300*1) = 3/10; 30item02: 200*2/(100*3+200*2+300*1) = 4/10; 40item03: 300*1/(100*3+200*2+300*1) = 3/10; 30
④ flex 复合属性
flex: grow shrink basis;
复合数的简写：
flex: 1; /* flex: 1 1 0 */即扩展又收缩，平均分
flex: auto; /* flex: 1 1 auto */
flex: none; /* flex: 0 0 auto*/
flex: 0 auto; /* flex: 0 1 auto */
3.6 伸缩项目排序
给伸缩项目设置属性 order 可以调整伸缩项目排列属性。 order 属性的值是数字，值越小排序越靠前，可以是负数。
/* 让往前 */order: -1;/* 让往后 */order: 200;
3.7 单独设置伸缩项目在侧轴上的对齐方式
给伸缩项目设置属性 align-self，可以单独设置该伸缩项目在侧轴上的对齐方式，属性的值与 align-items 一样。
/* 要有垂直高度自己给自己设置位置 */align-self: flex-end;
3.8 伸缩盒相关 CSS 属性总结
① 设置给伸缩容器的属性
| CSS 属性名 | 含义 | 值 |
|---|---|---|
| display | 设置显示模式 |
flex: 设置为伸缩容器 inline-flex：设置为行内的伸缩容器 |
| flex-direction | 设置主轴方向 |
row：默认值，水平从左到右 row-reverse：水平从右到左 column：垂直从上到下 column-reverse：垂直从下到上 |
| flex-wrap | 设置换行方式 |
nowrap：默认值，不换行 wrap：自动换行 wrap-reverse：自动换行且反转排列 |
| flex-flow |
复合属性 复合 主轴方向和换行方式 |
|
| justify-content | 伸缩项目在主轴上的对齐方式 |
flex-start：靠主轴起始位置 flex-end：靠主轴结束位置 center：居中 space-between： 两端没有间隙，中间有间隙 space-around：两端的间隙是中间间隙的一半 space-evenly：两端间隙与中间间隙一样 |
| align-items |
伸缩项目在侧轴上的对齐方式 一条主轴线 |
stretch：默认值，拉伸 flex-start：靠侧轴其实位置 flex-end：靠侧轴结束位置 center：居中 baseline：文字基线对齐. |
| align-content |
伸缩项目在侧轴上的对齐方式 多条主轴线 |
stretch：默认值，拉伸 flex-start：靠侧轴其实位置 flex-end：靠侧轴结束位置 center：居中 space-between： 两端没有间隙，中间有间隙 space-around：两端的间隙是中间间隙的一半 space-evenly：两端间隙与中间间隙一样 |
② 设置给伸缩项目的属性
| CSS 属性名 | 含义 | 值 |
|---|---|---|
| flex-basis | 设置伸缩项目在主轴上的长度 |
长度 默认值是 auto |
| flex-grow | 设置扩展比率 | 数字，默认是 0.不会扩展 |
| flex-shrink | 设置收缩比例 | 数字，默认是 1，会收缩 |
| flex | 复合属性，复合 basis、grow、shrink | |
| order | 设置伸缩项目排序顺序 | 数字 |
| align-self | 单独设置伸缩项目在侧轴上对齐方式 |
auto： 默认值 stretch：拉伸 flex-start：靠侧轴其实位置 flex-end：靠侧轴结束位置 center：居中 baseline：文字基线对齐. |
合 basis、grow、shrink | |
| order | 设置伸缩项目排序顺序 | 数字 |
| align-self | 单独设置伸缩项目在侧轴上对齐方式 | auto： 默认值
stretch：拉伸
flex-start：靠侧轴其实位置
flex-end：靠侧轴结束位置
center：居中
baseline：文字基线对齐. |
CSS3-多列布局-伸缩盒布局-伸缩项目相关推荐
- [css] 解释下css3的flexbox（弹性盒布局模型），以及它应用场景有哪些？
[css] 解释下css3的flexbox(弹性盒布局模型),以及它应用场景有哪些? 手机端中比较常用的三段式布局, 头尾固定高度 中间自适应 它可以修改父元素下所有子元素的位置 和排序方式 相对于浮 ...
- html弹性布局两盒,CSS中的弹性盒子总结
事实上它是一种新类型的盒子模型,也有书上称作弹性伸缩盒布局. 比较新的布局方式:旨在提供一个更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使它们的大小是未知或者动态变化的. 弹性布局的主要思 ...
- 深入理解弹性盒布局（fiex-box）——Web前端系列自学笔记
文章目录 弹性盒布局 弹性盒布局概述 弹性盒布局属性 display flex-flow justify-content align-items order flex align-self 总结 弹性 ...
- flex弹性盒子(伸缩盒模型)的使用
伸缩盒布局 1 伸缩容器和伸缩项目 伸缩容器: 一个元素设置 CSS 属性 display:flex 或者 display: inline-flex,该元素就变为伸缩容器. 伸缩项目: 伸缩容器的子元 ...
- 移动端布局之flex布局
什么是flex布局 基本含义 Flex是Flexible Box的缩写(注:意思是"灵活的盒子容器"),意为"弹性布局",是 CSS3 引入的新的布局模式,用来 ...
- 移动web开发--移动端常见布局+流式布局和flex布局+携程网首页案例
浏览器私有前缀 为了兼容老版本 私有前缀 -moz- : fixfox 浏览器私有属性 -ms- : ie浏览器私有属性 -webkit- : safari.chrome私有属性 -o- : Oper ...
- CSS布局之flex布局
最近项目中涉及到手机端开发,那么flex布局是必不可少的,这里我来重新梳理一下 1. 介绍 flex布局也被成为伸缩盒布局,在flex布局模型中,flex容器的子元素可以在x轴或y轴上进行布局,并且子 ...
- 移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
- WEB字体,多列布局和伸缩盒
WEB字体 语法 @font-face{font-family:"";src:url() format()... } 兼容性写法 @font-face {font-family: ...
最新文章
- 文本编辑器中实现自定义编辑框中字体和大小的功能
- 从零开始的自学之路——css选择器
- CentOS7安装Docker详细教程
- 学霸网站-Beta版本发布说明
- Delphi开发环境中应用层网络协议的实现
- ERP Configurable product不会被CRM中间件下载
- 高考志愿怎么填？BOSS直聘发布了一份填报指南
- MFC关闭对话框可以不析构吗_Win10关闭Defender和防火墙
- 异步请求---Get
- Windows Phone中Map控件由浅及深
- 为什么JavaScript声明变量的时候鼓励加var关键字
- slickedit 运行java_SlickEdit 一些使用技巧（转载）--一个人的博客
- 生成函数学习笔记心得
- 渣男论（跟技术无关，随笔而已）——一蓑烟雨任平生
- 移动端H5游戏开发之（移动端尺寸基础知识）
- github电脑壁纸_有什么好用的电脑壁纸软件?
- 教你制作一张漂亮的城市分布图 比如加油站分布地图
- 常见软件环境的配置、下载...
- python自学之《21天学通Python》(2)
- 使用Core Graphics绘画一个山寨微信icon