CSS3/ 弹性布局flex
需知：
- flex布局表示弹性布局
- 任何一种元素都可以设置且当它设置 display:flex ,则开启了弹性布局,它成为弹性容器,它的所有子元素成为待排布的项目
- 开启弹性布局后,容器内待排布的项目的float,clear,vertical-align属性都将失效,所以排布元素时应优先使用弹性布局
- 容器有默认的水平主轴和升起的交叉轴，项目在容器中默认沿主轴排列
flex容器的常用属性：
- flex-direction （flex-direction 属性规定灵活项目的方向）
- flex-wrap （flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向）
- flex-flow （flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性）
- justify-content （justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式）
- align-items （align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式）
- align-content （align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直））
flex项目的常用属性：
- flex-grow （flex-grow 属性用于设置或检索弹性盒子的扩展比率）
- flex-shrink （flex-shrink 属性指定了 flex 元素的收缩规则）
- flex-basis （flex-basis 属性用于设置或检索弹性盒伸缩基准值）
- flex （flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性）
- order （order 属性 设置或检索弹性盒模型对象的子元素出现的順序）
- align-self （align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式）
@沉木
CSS3/ 弹性布局flex相关推荐
- CSS3 弹性布局 flex
基础概念 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器".它的所有子元素自动成为容器成员,称为 Flex 项目(flex item) ...
- CSS3 弹性布局 flex 项目属性
order属性: order属性定义项目的排列顺序.数值越小,排列越靠前,默认为0. .item { order: <integer>; } flex-grow属性: flex-grow属 ...
- CSS3 弹性布局盒模型 Flex布局
Web 应用中,布局设计是非常重要的一部分.随着响应式设计的盛行,一般都要求 Web 应用能够适配不同尺寸的设备.响应式设计中最重要的一环就是布局,需要根据窗口尺寸来调整布局,从而改变元素的尺寸和位置 ...
- html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
- CSS3 弹性布局/伸缩布局 flex
CSS3 之 弹性布局 flex 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...
- CSS3多列布局 columns 弹性布局 flex
多列布局columns 多列布局可以控制页面内容的排版方式,可以将文本内容设计成像报纸一样的多列布局. 属性 示例 含义 column-count column-count: 3; 将元素内部分割成3 ...
- CSS3弹性盒子Flex
CSS3弹性盒子Flex 基础知识和术语 原文链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 父级(flex容器)的属性 #显示 ...
- CSS3 弹性盒子(Flex Box)
目录 CSS3 弹性盒子(Flex Box) 一.什么是 Flexbox >>> 了解两个基本概念,接下来会频繁提到: >>> 了解两个基本方向,这个牵扯到弹性布局 ...
- CSS3 flexbox 布局 ---- flex项目属性介绍
CSS3 flexbox 布局 ---- flex项目属性介绍 现在介绍用在flex项目上的css 属性,html结构还是用ul, li 结构,不过内容改成1,2,3, 样式的话,直接把给 ul 设d ...
最新文章
- 【ES6】对象的拓展
- 第二章作业第2题--苏志华
- Spring Stateless State Security第3部分：JWT +社会认证
- linux小白-基础命令-cd
- 网友直呼太贵！华为nova 8系列发布：麒麟985+66W快充
- 从零开始学前端：表格制作 --- 今天你学习了吗？（CSS：Day04）
- 如何安装PyCharm【图文详解】
- SVD原理及代码实现
- 【2019杭电多校第六场1011=HDU6644】11 Dimensions（dp+思维）
- Ubuntu 图形界面入门
- jQuery EasyUI/TopJUI输入框事件监听
- 计算机上网记录怎么清除,如何彻底清除电脑上网痕迹
- Implement AWS SQS and Lambda to decouple process flow
- Batman+joker乱谈
- 动态规划问题 -- 求给定K个币种时N美元有几种组合方式 （例1，2，3美元存在，求10美元有几种组合方式）
- Microsoft Visusl C++2010运行程序时，调试弹出黑框自动闪退无法看见运行结果的解决方法
- 小学生C++趣味编程 上机作业 每日一练 第1单元 顺序结构
- MyEclipse 优化
- VR视频拍摄手法学习笔记
- nodejs express搭建服务器（爬虫知乎精华帖,个人学习用）五 对提到的关键字（书名或者电影名）去百度百科上爬取介绍