flex布局(弹性布局、伸缩布局)
flex是CSS3中的一种布局方式
主要介绍下弹性布局的常用的一些属性
当一个盒子设置为display:flex的时候,盒子会变为一个弹性盒子,盒子内部的子元素会默认沿着主轴方向排布,此时会引出主轴和侧轴的概念。
主轴:默认水平向右(类似于X轴)
侧轴:与主轴垂直的就是侧轴,默认垂直向下(类似于Y轴)
主轴方向(flex-direction)
弹性盒子的主轴方向默认水平向右,但是可以通过flex-direction这个属性改变主轴的方向,如下图:
取值 | 效果(主轴方向) |
---|---|
row | 水平向右(默认) |
row-reverse | 水平向左 |
column | 垂直向下 |
column-reverse | 垂直向上 |
主轴对齐方式(justify-content)
取值:
flex-start:向主轴的开始位置对齐
flex-end:向主轴的结束位置对齐
center:居中对齐
space-around:让空白环绕盒子显示
space-between:让空白只在盒子之间显示
单行侧轴对齐方式(align-items)
取值
flex-start:向侧轴的开始位置对齐
flex-end:向侧轴的结束位置对齐
center:居中对齐
stretch:让子盒子的高度拉伸显示(默认值)
当盒子内的子元素没有高度时,会默认拉伸
是否换行(flex-wrap)
flex布局中,默认是单行显示的,如果子元素的宽度之和超出了父元素的宽度,此时子盒子会默认压缩显示。
此时,如果需要设置子元素换行显示(需加在父元素身上),可以使用属性 flex-wrap
属性值 | 效果 |
---|---|
nowrap | 不换行(默认值) |
wrap | 换行 |
多行侧轴对齐方式(align-content)
之前align-items
只是针对于单行元素的侧轴对齐方式。
如果需要设置多行元素的侧轴对齐方式,此时需要使用 align-content
才行
取值(和align-items差不多):
取值 | 效果 |
---|---|
flex-start | 向侧轴的开始位置对齐 |
flex-end | 向侧轴的结束位置对齐 |
center | 居中对齐 |
stretch | 子元素高度拉伸显示(只有没设高才有效果) |
space-around | 空白环绕盒子显示 |
space-between | 空白只在盒子之间显示 |
分配子元素空间(flex属性)
作用: 按照份数分配父元素主轴(宽度)的剩余空间
优先分配具体的宽度,剩余的空间再按照份数分配。
代码: flex:份数;
通过flex属性可以很轻松的完成圣杯布局。
子元素排序(order属性)
作用: 设置弹性盒子中子元素的排列顺序,数值越小,排列靠前,默认是0
代码: order:数字;
单个子元素侧轴对齐方式(align-self)
取值(和align-items取值一样):
取值 | 效果 |
---|---|
flex-start | 向侧轴的开始位置对齐(默认相当于顶部对齐) |
flex-end | 向侧轴的结束位置对齐(默认相当于底部对齐) |
center | 居中对齐 |
stretch | 子元素高度拉伸显示(只有没设高才有效果) |
flex布局(弹性布局、伸缩布局)相关推荐
- flex 平铺布局_CSS3 Flex布局(伸缩布局盒模型)学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- CSS3 Flex布局(伸缩布局盒模型)学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- flex布局单独一行_CSS3 Flex布局(伸缩布局盒模型)
CSS3引入了一种新的布局模式--Flexbox布局,即伸缩布局盒(Flexible Box)模型,此布局对于设计比较复杂的页面非常有用,特别是"垂直居中"布局,非常容易实现. 一 ...
- CSS 小结笔记之伸缩布局 (flex)
CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法--flex(弹性布局). flex 为和模型布局提供了极 ...
- html伸缩布局,CSS3 伸缩布局(一)
CSS3引入了一种新的布局模式--Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...
- 【前端布局篇】响应式布局 Bootstrap 移动端布局
前言 1. 布局介绍 布局:layout 对事物的全面规划和安排 页面布局:对页面的文字.图形或表格进行格式设置.包括字体.字号.颜色纸张大小和方向以及页边距等. 网页布局:利用html搭建结构与内容 ...
- CSS3 弹性布局/伸缩布局 flex
CSS3 之 弹性布局 flex 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...
- 弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content
弹性布局(flex布局.伸缩布局) 一.什么是弹性布局 flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒模型提供最大的灵活性,任何一个容器都可以指定为fl ...
- flex 单独一行_Flex网页布局一CSS弹性伸缩盒子语法教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- flex布局实现叠在另一个div之上_CSS3 flex弹性伸缩布局[上]
本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一.布局简介 CSS3 提供一种崭新的布局方式:Flexbox 布局,即弹性伸缩布局模型(Fl ...
最新文章
- 小D学blend-----如何创建自定义的Tooltip控件
- SAP PM入门系列24 - IK07 Display Measuring Points
- 【Mysql】MySQL与Oracle的大小写问题
- 什么意思_手机HD是什么意思 手机信号区显示hd是什么意思
- discuz上传附件失败问题解决办法
- java消除整型数组中重复的元素,排序后输出新数组
- 由先序+后序遍历确定序列是否唯一并输出一个中序序列
- tomcat服务器配置优化
- 如何导出mysql数据库
- 等级保护综述—等保知多少?
- ssh: connect to host master port 22: No route to host
- pytoch矩阵乘法torch.bmm
- 虚拟机中修改虚拟网络编辑器无效
- signalr php,继SignalR 持久链接 Web客户端
- 如何在谷歌地球上画路线或者运动轨迹?根据纬经高信息在谷歌地球Google earth中画运动轨迹,首先将Excel文件纬经高信息转换为.csv文件,再转换为.kml文件,最终在谷歌地球中显示。
- 81章 老子1章到_老子1章2章80章81章
- 马克思主义基本原理概论-练习题带答案
- 计算机管理下的服务没有内容,计算机管理无法打开解决办法
- SQL Server 2012 安装包
- Ubuntu连接Xshell|本机与虚拟机进行文件传输