flex是什么及flex布局语法
Flex布局
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,自由的操作容器中元素(项目)的排列方式
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex;}
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex; }
Webkit 内核的浏览器,必须加上-webkit前缀。
.box{display: -webkit-flex; /* Safari */display: flex;
}
注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
概念
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
容器的属性
容器的6个属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1、flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。
.box {flex-direction: row | row-reverse | column | column-reverse;
}
值可能为4个
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
2、flex-wrap属性
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
.box{flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三个值。
(1)nowrap(默认):不换行。
(2)wrap:换行,第一行在上方。
(3)wrap-reverse:换行,第一行在下方。
3、flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box {flex-flow: <flex-direction> || <flex-wrap>;
}
4、justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center |
space-between | space-around;
}
它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
5、align-items属性
align-items属性定义项目在交叉轴上如何对齐
.box {align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
- flex-start:交叉轴的起点对齐。 flex-end:交叉轴的终点对齐。 center:交叉轴的中点对齐。 baseline:
- 项目的第一行文字的基线对齐。 stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
6、align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
该属性可能取6个值。
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
参考文档 :http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
flex是什么及flex布局语法相关推荐
- Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记] 目 录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
- Flex 布局语法教程
flex-wrap属性 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ps:面试 ...
- Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
用Android原生实现流式布局[实现例如app的很多标签]需要自定义View继承自ViewGroup,然后代码量也不小. 相关自定义View实现流式布局,请参考这位老兄的博客: https://bl ...
- 使用 flex 实现 5 种常用布局
原文链接 Sticky Footer 经典的上-中-下布局. 当页面内容高度小于可视区域高度时,footer 吸附在底部:当页面内容高度大于可视区域高度时,footer 被撑开排在 content 下 ...
- display:flex 多栏多列布局
转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...
- flex 两列多行布局
flex 两列多行布局 display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; 把这段 ...
- vue垂直布局_基于 Flex 实现两端对齐垂直布局
一般来说布局我们都是水平布局,最多搞个垂直居中.而且对于一些 float . position 好像本身就不太适合垂直布局. 正好前段时间用 weex 做了一个页面,weex 天生基于 flex .且 ...
- flex与grid响应式布局中的子容器为固定空间后的剩余空间,该元素容器不出现滚动条或者滚动条异常问题
flex与grid响应式布局中的子容器滚动条问题 最近在用grid布局写一些简单的响应式页面页面,遇到一个问题,就是我们的全局用grid布局或者flex布局中,遇到某个子元素的宽度或者高度是页面剩下的 ...
- [bootstrap]栅格布局与flex的区别以及栅格布局的响应式应用
栅格布局的特点以及与flex的区别 HTML <body><!-- 一行4个 --><div class="container"><div ...
- Flex框架(The Flex Framework)
Flex框架(The Flex Framework) Flex框架不同于Flex类库,它是一个集成在Flex应用里的ActionScript类库. Flex框架是完全写在ActionScript ...
最新文章
- SVM算法实现光学字符识别
- 机器学习特征工程之特征缩放+无量纲化:最小最大缩放(MinMaxScaler)
- @include与jsp:include的区别
- Elasticsearch6 去重
- Kubernetes Nginx Ingress 安装与使用
- 为什么不应该重写 service 方法?
- 【每日SQL打卡】​​​​​​​​​​​​​​​DAY 10丨买下所有产品的客户【难度中等】
- cad小插件文字刷_文字狗最佳排版神器 小恐龙公文排版助手Office WPS插件
- 参加 CSDN 2009 英雄大会有感(二)
- JMeter:生成漂亮的多维度的HTML报告
- Java EE企业应用实战
- java aes输出长度_关于Java下的AES加密明文长度的问题
- 御剑端口扫描工具2020下载
- R语言开发之输出盒形图
- 亚马逊后台付款表(Custom Transaction)详解
- 360手机:360N6Lite Twrp、Root、Magisk教程
- 【总结思考】如何提高项目的稳定性和开发效率
- OAI配置eNB时error解决
- 跟踪(一):跟踪常见算法和特点
- css中div的意思是什么
热门文章
- 空洞卷积atrous/dilated convolution
- 单片机很好玩 ,制作呼吸灯(转载)
- 布袋除尘器过滤风速多少_布袋除尘器过滤风速怎样计算
- IntelliJ IDEA 自动消除行尾空格
- Ctrl+26个英文字母组合的Excel快捷键,都是最常用的快捷键!
- Android Dialog
- 浩鲸新智能解决方案工程师面试_【远景能源科技解决方案工程师面试】远景能源车轮战,一天几乎全部面完-看准网...
- 21个有用的python工具
- 水库信息化监测系统有哪些?水库信息化监测解决方案
- PDF文件打开口令如何破解