flex弹性布局
2019-08-14 09:49:22来源:博客园 阅读 ()
以下是弹性布局的一些知识点,很简单,易懂!
语法:属性:display
取值:
- flex:当前元素充当弹性布局的容器,并且本身以块级元素显示。
- inline-flex:当前元素充当弹性布局的容器,并且本身以行内元素显示。
概念:
- 容器:容纳弹性布局中子元素的父元素。
- 项目:容器中的子元素
注意:元素一旦变为弹性布局的元素后,float,clear,vertical-align,text-align都失效,定位属性是有效的!
接下来就是弹性布局的核心:弹性布局的属性。弹性布局的属性分为容器的属性和项目的属性。
容器的属性:
- flex-direction:定义容器的主轴方向
- row 默认,主轴水平,从左到右
- row-reverse主轴水平,从右到左
- column主轴垂直,从上到下
- column-reverse主轴垂直,从下到上
- flex-wrap:如果项目在容器中一行显示不下的方式
- norwap:默认不换行,项目自压缩
- wrap:换行
- wrap-reverse:项目在交叉轴上的换行
- flex-flow:以上两个属性的简写,取值有两个
- justify-content:项目在主轴方向上的对其方式
- flex-start:在轴的起点对齐
- flex-end:末尾段对齐
- center:居中对齐
- space-between:项目与项目之间的距离相等
- space-around:项目两侧的剩余空间相等
- align-items:项目交叉轴的对齐方式
- flex-start:在轴的起点对齐
- flex-end:末尾段对齐
- center:居中对齐
- baseline:基线对齐
- stretch:如何项目未设置高度,将占满整个容器
- align-content:如果有多跟轴线(需要换行),轴线的对齐方式
- flex-start:在轴的起点对齐
- flex-end:末尾段对齐
- center:居中对齐
- space-between:项目与项目之间的距离相等
- space-around:项目两侧的剩余空间相等
- stretch:占满整个轴线
项目的属性:
- order:顺序,取值为整数,默认所有项目取值为0,取值越小越往前。
- flex-grow:如果容器有剩余空间,定义项目的放大比例,将剩余空间分配给具有此属性的元素,按比例分配。
- flex-shrink:如果容器有空间不足,定义项目的缩小比例。默认为1,取值为0,不压缩。
- flex-basis:定义在主轴上的大小,可以覆盖width/height,默认为auto。
- flex:以上3个属性的综合
- align-self:设置当前这个项目的对齐方式,可以覆盖align-items
- flex-start:在轴的起点对齐
- flex-end:末尾段对齐
- center:居中对齐
- baseline:基线对齐
- stretch:如何项目未设置高度,将占满整个容器
完结!!!
原文链接:https://www.cnblogs.com/woheni/p/11218604.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:爱心制作
下一篇:01、HTML 简介
- DIV居中的经典方法 2020-06-13
- CSS Grid 布局 2020-06-01
- 构建一个杂志布局(译文) 2020-05-14
- 【2020Python修炼记】前端开发之 CSS基础布局 2020-05-13
- HTML连载86-添加视频、伸缩布局 2020-05-06
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash