1.什么是display:flex呢?
答:flex是 flexible box的缩写,意为弹性布局 ;这个东西的引入,为盒模型提供了最大的灵活性!可以相应式的实现各种页面的布局。
基本概念
采用flex布局的元素,称为flex容器(flex container),简称容器。 在这个容器中默认存在两个轴:水平方向的主轴(main axis)和 垂直方向上的交叉轴(cross axis)。
图: (摘自:他人博客)
以下6个属性设置在容器上:
注意: 如果元素不是弹性盒对象的元素,则flex-flow 属性是不起作用的;
属性值
用法
<!doctype html> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>page title</title> <style> .father { width: 500px; height: 100px; background-color: red; display: flex; flex-flow:row; } .box1 { flex: 3; background: blue; } .box2{ flex: 2; background: pink; } </style> </head> <body> <div class="father"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
以上仅是我个人初步学习!后期学习在进行更新! ~~~~~~~~~~~
如对本文有疑问, 点击进行留言回复!!
CSS中的两个特殊值用于控制层叠的inherit和initial的方法
CSS3 input框的实现代码类似Google登录的动画效果
CSS 容器背景 10 种颜色渐变Demo(linear-gradient())
详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式
网友评论