CSS3 box flex 布局
1、伸缩项目的布局方式-从左到右
<ul id="Layout1" class="box"><li>1</li><li>1</li><li>1</li></ul>
.box{width: 250px;padding: 10px;background: #999;margin: 10px; } .box li{width: 100px;height: 100px;border:1px solid #666; } #Layout1 {/*伸缩容器*/display: -webkit-box;display: -moz-box;display: -webkit-flex;display: flex;/*伸缩项目的布局方式-从左到右*//*box以下写法box-orient: horizontal | vertical | inline-axis | block-axishorizontal: 设置伸缩盒对象的子元素从左到右水平排列vertical: 设置伸缩盒对象的子元素从上到下纵向排列inline-axis: 设置伸缩盒对象的子元素沿行轴排列block-axis: 设置伸缩盒对象的子元素沿块轴排列*/-webkit-box-orient: horizontal;-moz-box-orient: horizontal;/*flex以下写法flex-flow: [ flex-direction ] || [ flex-wrap ][ flex-direction ]: 定义弹性盒子元素的排列方向。[ flex-wrap ]: 定义弹性盒子元素溢出父容器时是否换行。flex-direction: row | row-reverse | column | column-reverserow: 横向从左到右排列(左对齐),默认的排列方式。row-reverse: 反转横向排列(右对齐,从后往前排,最后一项排在最前面。column: 纵向排列。row-reverse: 反转纵向排列,从后往前排,最后一项排在最上面。flex-wrap: nowrap | wrap | wrap-reversenowrap: 当子元素溢出父容器时不换行。wrap: 当子元素溢出父容器时自动换行。wrap-reverse: 反转 wrap 排列。*/-webkit-flex-direction: row;flex-flex-direction: row; }
2、伸缩项目的布局方式-从左到右自动换行
<ul id="Layout2" class="box"><li>2</li><li>2</li><li>2</li></ul>
.box{width: 250px;padding: 10px;background: #999;margin: 10px; } .box li{width: 100px;height: 100px;border:1px solid #666; } #Layout2 {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: flex;-webkit-box-orient: vertical;-moz-box-orient: vertical;-webkit-flex-direction: row;flex-flex-direction: row;-webkit-flex-wrap: wrap;flex-wrap: wrap; }
3、伸缩项目的布局方式-从上到下排列
<ul id="Layout3" class="box"><li>3</li><li>3</li><li>3</li></ul>
.box{width: 250px;padding: 10px;background: #999;margin: 10px; } .box li{width: 100px;height: 100px;border:1px solid #666; } #Layout3 {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: flex;-webkit-box-orient: vertical;-moz-box-orient: vertical;-webkit-flex-direction: column;flex-flex-direction: column; }
4、伸缩项目的布局方式-子元素从左到右按比率填充
<ul id="Layout4" class="box"><li>4</li><li>4</li><li>4</li></ul>
.box{width: 250px;padding: 10px;background: #999;margin: 10px; } .box li{width: 100px;height: 100px;border:1px solid #666; } #Layout4 {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: flex;-webkit-box-orient: horizontal;-moz-box-orient: horizontal;-webkit-flex-direction: row;flex-flex-direction: row; } #Layout4 li:nth-child(1){width: auto;/*伸缩盒对象的子元素*//*box以下写法box-flex: <number><number>: 使用浮点数指定对象所分配其父元素剩余空间的比例。*/-moz-box-flex:1;-webkit-box-flex:1;/*flex以下写法flex-grow: <number><number>: 用数值来定义扩展比率。不允许负值 */-webkit-flex-grow:1;flex-grow:1; } #Layout4 li:nth-child(2){width: auto;-moz-box-flex:2;-webkit-box-flex:2;-webkit-flex-grow:2;flex-grow:2; } #Layout4 li:nth-child(3){width: auto;-moz-box-flex:3;-webkit-box-flex:3;-webkit-flex-grow:3;flex-grow:3; }
5、伸缩项目的布局方式-子元素从上到下按比率填充
<ul id="Layout5" class="box"><li>5</li><li>5</li><li>5</li></ul>
.box{width: 250px;padding: 10px;background: #999;margin: 10px; } .box li{width: 100px;height: 100px;border:1px solid #666; } #Layout5 {height: 250px;display: -webkit-box;display: -moz-box;display: -webkit-flex;display: flex;-webkit-box-orient: vertical;-moz-box-orient: vertical;-webkit-flex-direction: column;flex-flex-direction: column; } #Layout5 li {height: auto; } #Layout5 li:nth-child(1){-moz-box-flex:1;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1; } #Layout5 li:nth-child(2){-moz-box-flex:2;-webkit-box-flex:2;-webkit-flex-grow:2;flex-grow:2; } #Layout5 li:nth-child(3){-moz-box-flex:3;-webkit-box-flex:3;-webkit-flex-grow:3;flex-grow:3; }
6、伸缩项目的布局方式-横向子元素对齐方式
<ul id="Layout6" class="box"><li>6</li><li>6</li><li>6</li></ul>
.box{width: 250px;padding: 10px;background: #999;margin: 10px; } .box li{width: 100px;height: 100px;border:1px solid #666; } #Layout6 {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: flex;/*伸缩盒对象的子元素对齐方式*//*box以下写法box-pack: start | center | end | justifystart: 设置伸缩盒对象的子元素从开始位置对齐(大部分情况等同于左对齐,受) center: 设置伸缩盒对象的子元素居中对齐 end: 设置伸缩盒对象的子元素从结束位置对齐(大部分情况等同于右对齐) justify: 设置或伸缩盒对象的子元素两端对齐*/-moz-box-pack:justify;-webkit-box-pack:justify;/*flex以下写法justify-content: flex-start | flex-end | center | space-between | space-aroundflex-start: 弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。flex-end: 弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。center: 弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐,同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距(如果剩余空间是负数,则保持两端相等长度的溢出)。space-between: 弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数,或该行只有一个子元素,则该值等效于'flex-start'。在其它情况下,第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。space-around: 弹性盒子元素会平均地分布在行里,两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数,或该行只有一个伸缩盒项目,则该值等效于'center'。在其它情况下,伸缩盒项目则平均分布,并确保两两之间的空白空间相等,同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。*/-webkit-justify-content:space-between;justify-content:space-between; } #Layout6 li {width: 50px; }
7、伸缩项目的布局方式-纵向子元素对齐方式
<ul id="Layout7" class="box"><li>7</li><li>7</li><li>7</li></ul>
.box{width: 250px;padding: 10px;background: #999;margin: 10px; } .box li{width: 100px;height: 100px;border:1px solid #666; } #Layout7 {height: 250px;display: -webkit-box;display: -moz-box;display: -webkit-flex;display: flex;-webkit-box-orient: vertical;-moz-box-orient: vertical;-webkit-flex-direction: column;flex-flex-direction: column;-moz-box-pack:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center; } #Layout7 li {height: 50px; }
转载于:https://www.cnblogs.com/xiao-bai-yujia/p/4501074.html
CSS3 box flex 布局相关推荐
- 第103天:CSS3中Flex布局(伸缩布局)详解
一.Flex布局 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{display: ...
- 新闻列表页flex_使用css3的Flex布局实现列表展示
实现效果图如下: 通过css3样式实现(部分代码): .box{display:flex;flex-wrap:wrap;justify-content:space-between;align-cont ...
- CSS3的flex布局:方向 换行 对齐 顺序
教程 https://www.runoob.com/w3cnote/flex-grammar.html 概念 方向 换行 方向与换行 对齐方式 多根轴线的对齐 顺序排列
- css_flex弹性盒模型/flex布局/flex在线可视化工具
文章目录 contents1: content 2: 测试你对flexbox的掌握 flex 模型 flex在线可视化工具(visual guide to css3 flexbox) flex布局 f ...
- css --- flex布局的应用(between)
between 想把发布时间放在左边,点击放在右边 页面结构如下: 可以看到发布时间和点击是在类 .mui-ellipsis 下. 使用css3的 flex 布局中的: space-between . ...
- 浅谈CSS3中display属性的Flex布局,关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念 采用Fl ...
- CSS3弹性伸缩布局(一)——box布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...
- CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- CSS3 Flex布局(伸缩布局盒模型)学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
最新文章
- 用QQ提问的技巧,用了之后可以提高效率,呵呵。
- github上传文件夹教程
- MongoDB-GRIDFS大文件系统
- 编程方法学16:数组
- pat1011-1020
- 奉献一波鹅厂的面经!纪念最后的校招!| 掘金技术征文
- Linux中的文件被异常删除的排查思路
- Linux平台安装Clion
- 一些看起来有用但没用过的函数
- Fast上传图片成功,FastDFSweb页面显示失败
- matlab线旋转成面,用matlab怎么绘制一条曲线绕z轴旋转生成的曲面?
- Android中的控件
- 容器技术Docker K8s 14 容器服务ACK基础与进阶-容器网络管理
- 解决fake_useragent报错
- mysql实现axure协同工作_AxureUX CRM及协同办公APP高保真原型模板(带移动端实用元件库)...
- ibm虚拟化 用的服务器品牌,浅析IBM i虚拟化技术
- php 屏蔽deprecated,php7.2.8 Deprecated错误不能隐藏处理
- 【CGAL_多面体】3D多面体表面
- hystrix 配置了较大的核心线程数导致wating线程过多的问题
- delphi中pos的用法