CSS 浮动布局放弃float,拥抱flex(详解)
CSS 浮动布局放弃float,拥抱flex(详解)
文章目录
- CSS 浮动布局放弃float,拥抱flex(详解)
- 说明
- Flex布局
- 容器和项目
- 容器属性
- flex-direction属性
- flex-wrap属性
- flex-flow属性
- justify-content属性
- align-items属性
- align-content属性
- 项目属性
- order属性
- flex-grow属性
- flex-shrink属性
- flex-basis属性
- flex属性
- align-self属性
博客说明
文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!
说明
在写前端代码的时候,写一排的float:left, float: right,最后再来个clear:both;有的时候一旦忘记清除浮动,那么页面就糊了。
就是吃了float的亏,代码写得多,还容易吃亏。所以目光旁移一下,看到了flex。
Flex布局
Flex 称为弹性布局,它为盒状模型提供了最大的灵活性。任何一个容器都可以指定为 Flex 布局。使用了flex的元素,称为flex容器。里面的子元素被称为项目,项目的float
、clear
和vertical-align
属性将失效。
// Flex 布局
.box{display: flex;
}// 行内元素使用 Flex 布局
.box{display: inline-flex;
}// Webkit 内核的浏览器,必须加上`-webkit`前缀
.box{display: -webkit-flex; /* Safari */display: flex;
}
容器和项目
既然分为了容器和项目,那么大致就是如下的关系,主要记录一下容器属性和项目属性。
容器属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction属性
决定主轴的方向(即项目的排列方向)
取值:row(默认) | row-reverse | column | column-reverse
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
.box {flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap属性
控制项目是否换行
取值:nowrap(默认) | wrap | wrap-reverse
- nowrap(默认值):不换行,等分容器。
- wrap:换行,项目不会等分容器宽度,而是根据自身宽度进行排列,如果超出父容器宽度则自然换行。
- wrap-reverse:与wrap效果相反。
.box{flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box {flex-flow: <flex-direction> <flex-wrap>;
}
justify-content属性
控制项目在横轴的对齐方式
取值:flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
flex-start(默认值):左对齐。
center:居中。
flex-end:右对齐。
space-between:左右两端对齐,即左右两侧项目都紧贴容器,且项目之间间距相等。
space-around:项目之间间距为左右两侧项目到容器间距的2倍。
space-evenly:为项目之间间距与项目与容器间距相等。
.box {justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
align-items属性
控制项目在纵轴排列方式
取值:flex-start | flex-end | center | baseline | stretch(默认)
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
.box {align-items: flex-start | flex-end | center | baseline | stretch;
}
align-content属性
控制多行项目的对齐方式,如果项目只有一行则不会起作用
取值:flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
- space-evenly:为项目之间间距与项目与容器间距相等。
.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch | space-evenly;
}
项目属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order属性
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
.item {order: <integer>;
}
flex-grow属性
性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大。
.item {flex-grow: <number>; /* default 0 */
}
flex-shrink属性
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。flex-shrink
属性为0时,其他项目都为1,则空间不足时,flex-shrink不缩小。
.item {flex-shrink: <number>; /* default 1 */
}
flex-basis属性
默认auto时,项目会保持默认宽度,或者以width为自身的宽度
如果设置了flex-basis会覆盖widtn属性。
.item {flex-basis: <length> | auto; /* default auto */
}
flex属性
flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。
.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
align-self属性
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
感谢
万能的网络
菜鸟教程
阮一峰的flex布局
以及勤劳的自己,个人博客,GitHub
CSS 浮动布局放弃float,拥抱flex(详解)相关推荐
- CSS - 浮动布局(float)
目录 标准布局 标准流 浮动与浮动流,及元素脱标概念 浮动元素 浮动的特点 浮动带来的问题:标准流父级容器高度塌陷 清除浮动 浮动布局 + margin负值 标准布局 CSS将所有的元素都当成盒子,C ...
- css搜索框变圆脸角,CSS浮动布局
CSS浮动布局 浮动布局 浮动是CSS布局中经常使用的一种手段,其实说白了就是使元素进行漂浮脱离正常的文档流排列机制,实现一堆原本的block状态的标签可以并排显示,当然这也可以使用display:i ...
- css 高度塌陷_HTML+CSS入门 HTML高度塌陷以及定位详解
本篇教程介绍了HTML+CSS入门 HTML高度塌陷以及定位详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 高度塌陷的含义: 父元素的高度,默认被子元素撑开,目前来讲 ...
- html+css+javascript实现小游戏2048(详解,附源代码)
html+css+javascript实现小游戏2048(详解,附源代码) 1.上下左右的移动原理相同,这里只详细说明向上移动的方法 2.这里的上下左右由wasd四个键控制 3-小方块空的意思就是没数 ...
- Php开源h5相册系统,HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
- 弹性盒中 flex详解及flex:1的用法解析
弹性盒中 flex详解及flex:1的用法解析 一.flex 在了解 flex:1 之前我们先了解一下flex的属性值有哪些,就如同background一样,有着backgournd-images.b ...
- css伪元素before和after用法详解
css伪元素before和after用法详解 要想了解伪元素before和after到底是什么,首先就应该打开编译器敲入代码并在浏览器运行检查 <!DOCTYPE html> <ht ...
- python数值类型教程_Python数值类型 int、float、complex 详解
Python数值类型 int.float.complex 详解 Python数值类型:int.float.complex 在Python程序中,int.float和complex是三种十分重要的数值类 ...
- html 仿word页面,HTML+CSS入门 HTML页面仿WORD样式详解
本篇教程介绍了HTML+CSS入门 HTML页面仿WORD样式详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 要求不再浏览器中添加office插件的前提下.展示WOR ...
最新文章
- 【深入Java虚拟机】二 类加载与双亲委派
- Linux基础-yum软件包管理
- 高频变压器_变压器图案
- 【Java从入门到天黑|04】JavaSE入门之数组
- Stanford Machine Learning 学习 2016/7/4
- mysql 5.6.21 rpm_centos_mysql5.6.21_rpm安装
- hantzsch酯_有机人名反应——Hantzsch吡啶合成
- Google Colab使用学习笔记
- Struts的增删改查
- centos7查看进程ps_查看进程之ps命令
- 蚂蚁金服提前批实习面经(2.26)
- 百度热点排行榜 ---JS
- python中的sin函数_Python sin() 函数
- windows10 快捷方式右键失灵问题解决
- tekla钢筋组弯钩方向
- win7系统下阿里旺旺无法登陆怎么解决
- Too many re-renders. React limits the number of renders to prevent an infinite loop
- 关于学校订单班的那些事
- matlab元胞带索引的数组,Matlab-元胞数组的索引
- 312. 戳气球(区间dp)
热门文章
- 上传下载文件接口测试
- Nise-Anti-AK Problem 计蒜客网络赛
- 贝叶斯⑥——银行借贷模型(贝叶斯与决策树对比)
- 大学计算机应用基础厦门大学pdf,厦门大学2016计算机应用基础复习题.pdf
- 一个编程小白的Java SE学习日志 Ⅷ——接口、异常【极客BOY-米奇】
- 如何录制一个优秀的游戏解说视频?超全攻略,手把手教你!
- 【学习笔记】薛定谔的喵咪Cat—球盒问题(全详解)
- Paper reading (六十):Multidomain analyses of a intestinal cleanout perturbation experiment
- EasyExcel下载xls、xlsx 出现文件格式与扩展名不匹配
- workbench查询大数据量,一到30秒自动中断